title: Assign local storage to react state. React Hooks
body: <p>I'm trying to sign a user in, and update my global context with the user data. To keep the user signed in I'm storing their data in local storage.</p>
  
  <p>I'm using react-hooks to take care of the state, hence I have defined a state: <code>let [userData, setUserData] = useState({});</code>.</p>
  
  <p>Since I wan't to keep the user signed in I store their data in local storage during sign in. This works and the data does in fact get stored in local storage. </p>
  
  <p>My problem is however that I can't set the initial <code>userData</code> state equal to the current data from local storage. In other words the <code>userData</code> state gets reset to default on reload.</p>
  
  <p>I thought that getting the initial data from local storage and assigning it to state inside the <code>useEffect</code> hook would work. But the state does not update when calling <code>setUserData</code> inside <code>useEffect</code>.</p>
  
  <p>AuthContext.js:</p>
  
  <pre><code>import React, { createContext, useState, useEffect } from 'react';
  
  export const AuthContext = createContext();
  
  const AuthContextProvider = props =&gt; {
      let [userData, setUserData] = useState({});
  
      const loginUser = (data) =&gt; {
          localStorage.setItem('userData', JSON.stringify({
              key: data.key,
              id: data.id,
              email: data.email,
              first_name: data.first_name,
              last_name: data.last_name
          })); // Save the user object in local storage
          setUserData({
              key: data.key,
              id: data.id,
              email: data.email,
              first_name: data.first_name,
              last_name: data.last_name
          }); // Set user data    
      };
  
      const logoutUser = () =&gt; {
          localStorage.removeItem('userData');
          setUserData({}); // Empty user data state
          newToast('Successfully signed out');
      };
  
      useEffect(() =&gt; {
          const localUser = JSON.parse(localStorage.getItem('userData'));
          if (localUser &amp;&amp; localUser.key) {
              setUserData({
                  key: localUser.key,
                  id: localUser.id,
                  email: localUser.email,
                  first_name: localUser.first_name,
                  last_name: localUser.last_name
              }); // Set user data    
          }
      }, [])
  
  
      return (
          &lt;AuthContext.Provider value={{ userData, loginUser, logoutUser, newToast }}&gt;
              {props.children}
          &lt;/AuthContext.Provider&gt;
      )
  }
  
  export default AuthContextProvider;
  </code></pre>
  
  <p>Signin.js:</p>
  
  <pre><code>const Signin = props =&gt; {
      let [loading, setLoading] = useState(false);
      let [formError, setFormError] = useState(false);
      const { userData, loginUser, newToast } = useContext(AuthContext);
      const { register, handleSubmit, errors, setError, clearError } = useForm();
  
      const onSubmit = e =&gt; {
          setLoading(true);
          setFormError(false);
          clearError(); // Clear all erros on form        
          axios
              .post('users/auth/login/', {
                  headers: { 'Content-Type': 'application/json' },
                  email: `${e.email}`,
                  password: `${e.password}`,
              })
              .then(res =&gt; {
                  const { data } = res
                  loginUser(data);
                  newToast('Successfully signed in');
              })
              .catch((error) =&gt; {
                  const { data } = error.response;
                  console.log(data);
                  data.email &amp;&amp; setError("email", "", data.email);
                  data.password1 &amp;&amp; setError("password", "", data.password1);
                  setFormError(true);
              })
  
          setLoading(false);
      };
      return ( ... );
  }
  </code></pre>