title: Can't access lexical definition of response before initialization within a React hook
body: <p>I'm trying to make the home page send one API call on load and display all results on screen. It seems to send the call and receive response fine, although despite receiving the response from the server it can't pass the contents of the payload within the code, which is a JSON.</p>
  <pre><code>useEffect(() =&gt; {
          const localUser = localStorage.getItem(&quot;user&quot;);
          if (localUser) {
              const foundUser = localUser;
              setUser(foundUser);
          } else {
              const newUser = uuidv1();
              localStorage.setItem(newUser, user);
              setUser(newUser);
          }
          console.log(user);
          async function fetchPosts() {
              try {
                  let tempPosts = [];
                  const response = await fetch('http://localhost:3000/posts')
                      .then(response =&gt; response.json())
                      .then(response.payload.forEach(object =&gt; tempPosts.push(object.post)))
                      .then(setPosts((posts) =&gt; [tempPosts]));
                  console.log(posts);
              } catch (err) {
                  console.log(err)
              }
          }
  
          fetchPosts();
  
      }, [user, posts]);
  </code></pre>
  <p>Somehow React is trying to access the response without the declaration and I have no idea how, which in result stops the function from executing.</p>