Why can't I store a state getter/setter in a global context?

Can anyone tell me why this won't work?

• Page1 creates a state "num" (initialized to 0) with useState and stores the getter/setter in a context held in App
• Page2 accesses the num setter through context and sets num to 1
• Page3 accesses the num value through context and displays it

I expect Page3 to display num=1, but in fact it displays num=0. It seems that the setNum call on Page2 is not working as I expect it to.

Downloadable example here:

App.js

import { SharedContext } from './context';

function App() {
  const [context, setContext] = useState(null);

  return (
    <BrowserRouter>
      <SharedContext.Provider value={{ context, setContext }}>
        <Routes>
          <Route path="/" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
          <Route path="/page3" element={<Page3 />} />
        </Routes>
      </SharedContext.Provider>
    </BrowserRouter>
  );
}

Page1.js

export default function Page1() {
    const navigate = useNavigate();
    const { setContext } = useContext(SharedContext);
    const numState = useState(0);

    useEffect(() => {
        setContext(numState);
    }, []);

    const onClick = () => {
        navigate('/page2');
    };

    return <button onClick={onClick}>Next</button>;
}

Page2.js

export default function Page2() {
    const navigate = useNavigate();
    const { context } = useContext(SharedContext);
    const [num, setNum] = context;

    const onClick = () => {
        setNum(1);
        navigate('/page3');
    };

    return <button onClick={onClick}>Next</button>;
}

Page3.js

export default function Page3() {
    const { context } = useContext(SharedContext);
    const [num, setNum] = context;

    return <div>num = {num}</div>;
}

Edit: Looks like you're running into some trouble accessing the state in the context API. Just a friendly reminder that the state will only be defined once Page1.js is rendered. But don't worry! I've got a solution for you. Give this implementation a try and it should get the job done 💪

context.js

import { createContext, useState } from 'react';

export const SharedContext = createContext({
    num: null,
    setNum: () => {}
});

export const SharedContextProvider = ({ children }) => {
    const [num, setNum] = useState(null);
    
    return <SharedContext.Provider value={{num, setNum}}>{children}</SharedContext.Provider>
}

App.js

import { SharedContext, SharedContextProvider } from './context';

function App() {
  return (
    <BrowserRouter>
      <SharedContextProvider>
        <Routes>
          <Route path="/" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
          <Route path="/page3" element={<Page3 />} />
        </Routes>
      </SharedContextProvider>
    </BrowserRouter>
  );
}

Page1.js

export default function Page1() {
    const navigate = useNavigate();
    const { setNum } = useContext(SharedContext);

    useEffect(() => {
        setNum(0);
    }, []);

    const onClick = () => {
        navigate('/page2');
    };

    return <button onClick={onClick}>Next</button>;
}

Page2.js

export default function Page2() {
    const navigate = useNavigate();
    const { setNum } = useContext(SharedContext);

    const onClick = () => {
        setNum(1);
        navigate('/page3');
    };

    return <button onClick={onClick}>Next</button>;
}

Page3.js

export default function Page3() {
    const { num, setNum } = useContext(SharedContext);

    return <div>num = {num}</div>;
}

Also, Just wanted to give you a friendly reminder that when using the React.JS Context API, make sure to declare default values for the properties you're using inside the createContext function. This will help avoid any potential issues when trying to access the state. Have a great day! 💻🔥

import { createContext } from 'react';

export const SharedContext = createContext({
    context: null,
    setContext: () => {};
});

Docs on createContext

The core issue is you are trying to set a state setter inside of a state setter on a global context. The much simpler way to do it is:

context.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { createContext } from "react";

export const SharedContext = createContext();

<!-- end snippet -->

app.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import { SharedContext } from "./context";

function App() {
  const [state, setState] = useState({ num: 0 });

  return (
    <BrowserRouter>
      <SharedContext.Provider value={{ state, setState }}>
        <Routes>
          <Route path="/" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
          <Route path="/page3" element={<Page3 />} />
        </Routes>
      </SharedContext.Provider>
    </BrowserRouter>
  );
}

export default App;

<!-- end snippet -->

Page1.js

Notice the removal of the unnecessary useState.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useNavigate } from "react-router-dom";

export default function Page1() {
  const navigate = useNavigate();

  const onClick = () => {
    navigate("/page2");
  };

  return <button onClick={onClick}>Next</button>;
}

<!-- end snippet -->

Page2.js

Notice how we use one global state setter, and not a nested setter setter? You set the global state and destructure the previous state so you don't lose any other state variables that are not num.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { SharedContext } from "./context";

export default function Page2() {
  const navigate = useNavigate();
  const context = useContext(SharedContext);

  const onClick = () => {
    context.setState({
      ...context.state,
      num: 1,
    });
    navigate("/page3");
  };

  return <button onClick={onClick}>Next</button>;
}

<!-- end snippet -->

Page3.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useContext } from "react";
import { SharedContext } from "./context";

export default function Page3() {
  const context = useContext(SharedContext);

  return <div>num = {context?.state?.num}</div>;
}

<!-- end snippet -->

BTW, using your code as-is in a sandbox, I see several errors thrown, because in several areas you are trying to destructure { setContext } when the parent object is initially undefined - which is why Typescript users here are recommending you set the state values initially. It actually does matter.

Slava and other users made good points.

Working Sandbox

https://codesandbox.io/p/sandbox/trusting-neco-svgp1z

I will provide a Typescript-version along with more proof as to why it's incredibly important to define a context initially, OR be prepared to handle for undefined in your code with ? checks which is not ideal.

The way you access your context is incorrect, because you are mirroring the useState pattern while that's not what you want to pass into the context provider.

Page1 is needs a fix:

const [numState, setNumState] = useState(0);

useEffect(() => {
    setContext(numState);
}, []);

Page2 should be:

const { setContext } = useContext(SharedContext);

const onClick = () => {
    setContext(1);
    navigate('/page3');
};

Page3 should be:

const { context } = useContext(SharedContext);

return <div>num = {context}</div>;

You are currently doing a pattern that looks like:

// The "context" field is the value that you set. It is a number.
const { context } = useContext(SharedContext);
// `num` and `setNum` here are non-sensical
const [num, setNum] = context;