title: Simple way to store React state between components
body: <p>I have a React app that has multiple tabs. When the user goes to the "Data" tab it will fetch data from an API call and set the data in a React state. However, if the user goes from "Data" tab to "Home" tab then back to "Data" tab it will have to fetch the data again from API call because data in state has disappeared.</p>
  
  <p>Psuedocode of desired functionality:</p>
  
  <pre><code>const OutputTab: React.FC&lt;PageProps&gt; = ({ match, pageName }) =&gt; {
    const [outputData, setOutputData] = useState&lt;outputsInterface[]&gt;([]);
  
    useIonViewWillEnter(() =&gt; {
      if (!outputData) {
        fetchOutputs();
      }
    });
  
    const fetchOutputs = () =&gt; {
      let response = fetch("....");
      setOutputData(response.json);
    };
  };
  
  </code></pre>
  
  <p>What is the simplest way to store the state data? Desired functionality is when user comes back to the tab we can simply check if data already exists rather than making another API call to refetch.</p>
  
  <p>I thought of possible solutions to use <code>localStorage</code> or <code>sessionStorage</code> but I'd prefer to store the data in memory rather than storage. Do I need something like Redux to accomplish this?</p>