title: Is there a way to cache data coming from redux connect in React function component with using useRef()?
body: <p>The way I cache data in Class component is like below :
  1. make async API call in componentDidMount
  2. get API response and dispatch data through redux
  3. use response data by mapping state to prop</p>
  
  <p>What I want to do is caching data right after you get API response with mapped redux state value
  inside of <code>useEffect</code> in function component
  (
  It works on class component. but I'm wondering how should I make it work in function component)</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyClassComponent extends React.Component {
      private readonly _myCachedData = {
           'data1': {}
      }
  
      public async componentDidMount() {
          await this.loadAsyncData();
      }
  
      private loadAsyncData() {
          const { makeAPICall } = this.props
          await makeAPICall();
          return this._myCachedData.data1 = this.props.data1FromReduxConnect;
      }
  }
  
  export const mapStateTopProps = (state) =&gt; {
      const { data1FromReduxConnect } = state;
      return data1FromReduxConnect;
  }
  ...
  
  </code></pre>
  
  <p>What I have tried :</p>
  
  <pre class="lang-js prettyprint-override"><code>export const MyFunctionComponent = props =&gt; {
      const { data1FromReduxConnect } = props;
      const myCachedData = React.useRef();
      const loadAsyncData = () =&gt; {
          const { makeAPICall } = this.props
          await makeAPICall();
          return myCachedData.current = data1FromReduxConnect;
      }
      React.useEffect(()=&gt; {
          await loadAsyncData();
      })
  
  }
  
  export const mapStateTopProps = (state) =&gt; {
      const { data1FromReduxConnect } = state;
      return data1FromReduxConnect;
  }
  </code></pre>
  
  <p>I was only able to get the previous value of<code>data1FromReduxConnect</code> unlike class component did get updated value <code>this.props.data1FromReduxConnect</code> after API call </p>
  
  <p>Not sure if I should just keep class component for it, or is there a way to deal with this issue!
  Thanks!!</p>