title: React useContext() always returning initial value in different children
body: <p>I need to share global variables through multiple components, and it seems that my context is not working as expected.</p>
  <p>I declared in a seperated file <code>globalContext.tsx</code> :</p>
  <pre><code>export type GlobalContent = {
    entities: entity[]
    setEntities:(c: entity[]) =&gt; void,
    pallets: string[],
    setPallets:(c: string[]) =&gt; void,
  }
  export const GlobalContext = createContext&lt;GlobalContent&gt;({
      entities: [], // set a default value
      setEntities: () =&gt; {},
      pallets: [],
      setPallets: () =&gt; {}
  })
  </code></pre>
  <p>Then, initialize and my values in my App.tsx, then wrapping all my tree in the Provider  :</p>
  <pre><code>function App() {
    // Init global variables, accessible everywhere using useContext hook
    const [entities, setEntities] = useState&lt;entity[]&gt;([])
    const [pallets, setPallets] = useState&lt;string[]&gt;([&quot;hello&quot;])
    let defaultGlobals: GlobalContent = { entities, setEntities, pallets, setPallets }
  
    return (
      &lt;GlobalContext.Provider value={defaultGlobals}&gt;
        &lt;BrowserRouter&gt;
          &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Home/&gt;}/&gt;
              &lt;Route path=&quot;/picking&quot; element={&lt;Picking/&gt;}/&gt;
              &lt;Route path=&quot;/control&quot; element={&lt;Control/&gt;}/&gt;
              &lt;Route path=&quot;/place&quot; element={&lt;Place/&gt;}/&gt;
              &lt;Route path=&quot;*&quot; element={&lt;NotFound/&gt;}/&gt;
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      &lt;/GlobalContext.Provider&gt;
    )
  }
  </code></pre>
  <p>So, there should be it. Within my components (let's say &lt;Picking/&gt; for example), I can get find back my default values by using the following :</p>
  <pre><code>const { entities, setEntities, pallets, setPallets } = useContext(GlobalContext)
  </code></pre>
  <p>But when I grab this data in another component (&lt;Control/&gt; or &lt;Place/&gt;) using :</p>
  <pre><code>const { entities, setEntities, pallets, setPallets } = useContext(GlobalContext)
  </code></pre>
  <p>I keep getting the default value (a.k.a. the &quot;defaultGlobals&quot;, with [&quot;hello&quot;] array).</p>
  <p>I tried changing my <code>entities</code> or <code>pallets</code> content using the corresponding setters, and the variables extracted from the useContext are definitively independant from a component to another.
  Still getting default values at first.</p>
  <p>Seems something is breaking the context or I am doing something wrong here.
  Any help ?</p>
  <p>Here's a link to a running <a href="https://codesandbox.io/s/practical-sky-jlud9m?file=/src/App.tsx" rel="nofollow noreferrer">codesandbox</a>.</p>
  <p>Example consumer:</p>
  <pre><code>export default function Home() {
    const { entities, setEntities, pallets, setPallets } = useContext(
      GlobalContext
    );
  
    return (
      &lt;div&gt;
        &lt;a href=&quot;/other&quot;&gt;Move to Other&lt;/a&gt;
        &lt;h1&gt;Home component&lt;/h1&gt;
        &lt;button onClick={() =&gt; setPallets([...pallets, &quot;newPallet&quot;])}&gt;
          Add pallet
        &lt;/button&gt;
        {pallets.map((pallet) =&gt; {
          return &lt;p&gt;{pallet}&lt;/p&gt;;
        })}
      &lt;/div&gt;
    );
  }
  </code></pre>