title: useEffect infinite loop
body: <p>Despite passing an empty array, useEffect still produces an infinite loop when I try to update the global state. I've tried not passing an empty array, adding dependencies, and even tried utilizing the useState hook inside the component itself yet nothing seems to work. There's nothing wrong with the API call, when I remove the function to update the state there is no loop. When i do this anywhere else in my code things work fine. Here is the functional component useEffect is being called in.</p>
  
  <pre><code>const Posts = () =&gt; {
      const [{auth}] = useAuth();
      const [{profile},, setPosts] = useProfile();
      const {getPostsByUser} = PostApi()
      useEffect(() =&gt; {
          const fetch = async () =&gt; {
              const response = await getPostsByUser(auth.user._id, auth.token)
              setPosts(response)
          }
          fetch()
      }, [])
      console.log(profile)
      return(
          &lt;div className="User-Post"&gt;
              &lt;div className="New-Post"&gt;
                  &lt;NewPost /&gt;
              &lt;/div&gt;
              &lt;div className="User-Posts-Content"&gt;
                  {
                      profile.posts ? profile.posts.map((item, key) =&gt; {
                          return &lt;Post post={item} /&gt;
                      }) : null
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Here is the useProfile hook:</p>
  
  <pre><code>const useProfile = () =&gt; {
      const [{...profile}, setState] = useStore()
  
      const setPosts = posts =&gt; {
          setState(state =&gt; ({
              ...state,
              profile: {
                  ...state.profile,
                  posts: posts
              }
          }))
      }
  
      return [profile, setPosts]
  }
  </code></pre>
  
  <p>heres the global store: </p>
  
  <pre><code>function makeStore() {
      // Make a context for the store
      const Context = React.createContext();
  
      // Make a provider that takes an initialValue
      const Provider = ({ initialValue, children }) =&gt; {
        // Make a new state instance (could even use immer here!)
        const [state, setState] = useState(initialValue);
        // Memoize the context value to update when the state does
        const contextValue = useMemo(() =&gt; [state, setState], [state]);
  
        // Provide the store to children
        return &lt;Context.Provider value={contextValue}&gt;{children}&lt;/Context.Provider&gt;;
      };
  
      // A hook to help consume the store
      const useStore = () =&gt; useContext(Context);
  
      return { Provider, useStore };
  }
  </code></pre>