title: How to cache react component fetches?
body: <p>Let's say you have a component like this:</p>
  <pre><code>function MyComponent({ index }) {
    const [data, setData] = useState('');
  
    useEffect(() =&gt; {
      (async function() {
        const result = await fetchData(index);
        setData(result);
      })();
    }, [index]);
  
    return &lt;h1&gt;{data}&lt;/h1&gt;;
  }
  </code></pre>
  <p>Whenever the index changes, we will re-fetch the data and render it. How can I cache this so that we don't have to re-fetch the same index from before?</p>