title: How do I fetch data and use it in useEffect()?
body: <p>I'm trying to fetch data from an API and set a state with the data, but when I use the data in a child component, I get an <code>[Unhandled promise rejection: TypeError: null is not an object (evaluating 'data.name')]</code> warning.</p>
  <p>Here is a gist of what I'm trying to do. Does anyone know why this might be occurring? I assume it's because the data isn't received from the API. I have tried adding an &quot;isLoading&quot; state and only returning the ChildComponent if it's false, but I still get the same warning (this might be because setNewProp in useEffect isn't updating when it receives the data from the API).</p>
  <pre><code>const ParentComponent = (props) =&gt; {
          const [data, setData] = useState(null);
          const [newProp, setNewProp] = useState();
          const fetchData = async () =&gt; {
                  new DataService.retrieveData().then((response) =&gt; {
                          setData(response);
                  }
          }
  
          useEffect(() =&gt; {
                  fetchData();
                  setNewProp({ data, ...props });
          }, []);
  
          return (
                  &lt;ChildComponent newProp={newProp} /&gt;
  
          );
  }
  </code></pre>