title: Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null when calling set function
body: <p>I'm trying to set up a user login system using the userContext and localSotrage of the browser.</p>
  <p>I have a first file that includes my provider and my context:
  <strong>Auth.jsx</strong></p>
  <pre><code>import { hasAuthenticated } from '../services/AuthAPI';
  
  export const AuthContext = createContext()
  
  const AuthProvider = ({children}) =&gt; {
      const [auth, setAuth] = useState(hasAuthenticated());
      const value = useMemo(() =&gt; ({auth, setAuth}, [auth, setAuth]));
  
  
      return (
          &lt;AuthContext.Provider value={value}&gt;{children}&lt;/AuthContext.Provider&gt;
      )
  
      
  }
  
  export default AuthProvider
  
  export const AuthState = () =&gt; {
      return useContext(AuthContext)
    }
  </code></pre>
  <p>I also have a page that allows to manage elements of the LocalStorage and to know if a user is already connected (it for now hardcoded):
  <strong>AuthAPI.jsx</strong></p>
  <pre><code>
  export function hasAuthenticated() {
      const token = getItem('sessionToken');
      const result = token ? tokenIsValid(token) : false;
  
      if (false === result) {
          removeItem('sessionToken');
      }
  
      return result;
  }
  
  export function login(credentials) {
      addItem('sessionToken', 'tokenSample');
      return true;
  };
  
  export function logout() {
      removeItem('sessionToken');
  }
  
  function tokenIsValid(token) {
      // const { exp: expiration } = jwtDecode(token);
  
      // if (expiration * 1000 &gt; new Date().getTime()) {
      //     return true;
      // }
  
      return true;
  }
  </code></pre>
  <p>And finally I have my connection page which must update the auth variable using the context:
  <strong>Login.jsx</strong></p>
  <pre><code>import { useNavigate } from 'react-router-dom';
  import { AuthContext } from '../contexts/Auth';
  import { login } from '../services/AuthAPI';
  
  const Login = () =&gt; {
    const navigate = useNavigate();
    const {auth, setAuth} = useContext(AuthContext);
  
    const [user, setUser] = useState({
      username: &quot;&quot;,
      password: &quot;&quot;
    })
  
    const handleChange = ({ currentTarget }) =&gt; {
      const { name, value } = currentTarget;
  
      setUser({ ...user, [name]: value })
    }
  
    async function handleSubmit(event) {
      event.preventDefault();
  
      try {
        const response = await login(user);
        setAuth(response);
        navigate('news', { replace: true });
        console.log('oui');
      } catch (e) {
        console.error(e);
      }
    }
  
    useEffect(() =&gt; {
      if (auth) {
        navigate('news', { replace: true });
      }
    }, [navigate, auth]);
  
    return (
      &lt;div className=&quot;container border rounder mt-5 p-3 bg-light&quot;&gt;
        &lt;form className=&quot;form-profile&quot; onSubmit={setAuth(true)} &gt;
          &lt;fieldset&gt;
            &lt;legend&gt;Se connecter&lt;/legend&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label htmlFor=&quot;email&quot;&gt;Email&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                name=&quot;username&quot;
                className=&quot;form-control&quot;
                id=&quot;email&quot;
                placeholder=&quot;mail@mail.fr&quot;
                onChange={handleChange}
              /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-group&quot;&gt;
              &lt;label htmlFor=&quot;password&quot;&gt;Password&lt;/label&gt;
              &lt;input
                type=&quot;password&quot;
                name=&quot;password&quot;
                className=&quot;form-control&quot;
                id=&quot;password&quot;
                placeholder=&quot;Password&quot;
                onChange={handleChange}
              /&gt;
            &lt;/div&gt;
  
            &lt;button type=&quot;submit&quot; className=&quot;btn btn-outline-primary&quot;&gt;
              Se connecter
            &lt;/button&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default Login;
  </code></pre>
  <p>But React returns this error:
  <strong>Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null site:stackoverflow.com</strong> at line       setAuth(response); from Login.jsx</p>
  <p>Do you have any idea ?</p>