title: Understanding Suspense and React Hooks
body: <p>I'm struggling to find problems with using <strong>Suspense</strong> and <strong>React hooks</strong>.</p>
  <p>There are several <strong>key problems</strong> with the React code below.</p>
  <pre><code>import { Suspense, useState, useEffect } from 'react';
  
  const SuspensefulUserProfile = ({ userId }) =&gt; {
    const [data, setData] = useState({});
    useEffect(() =&gt; {
      fetchUserProfile(userId).then((profile) =&gt; setData(profile));
    }, [userId, setData])
    return (
      &lt;Suspense&gt;
        &lt;UserProfile data={data} /&gt;
      &lt;/Suspense&gt;
    );
  };
  const UserProfile = ({ data }) =&gt; {
    return (
      &lt;&gt;
        &lt;h1&gt;{data.name}&lt;/h1&gt;
        &lt;h2&gt;{data.email}&lt;/h2&gt;
      &lt;/&gt;
    );
  };
  const UserProfileList = () =&gt; {
    &lt;&gt;
      &lt;SuspensefulUserProfile userId={1} /&gt;
      &lt;SuspensefulUserProfile userId={2} /&gt;
      &lt;SuspensefulUserProfile userId={3} /&gt;
    &lt;/&gt;
  };
  </code></pre>
  <p>Let me know what they are.</p>
  <p>I found two key problems.</p>
  <ul>
  <li>Misuse of <code>setdata</code> in <code>useEffect</code> dependency array</li>
  <li>Didn't provide <code>suspense</code> <code>fallback</code> props.</li>
  </ul>
  <p>I think there is still one key problem remaining.</p>
  <p>One weird thing is why <code>userId</code> needs to be included in the dependency array.</p>