title: Loosing component data on page refresh in react
body: <p>I am working on something where I need to maintain the application level state i.e global state, I am using react hooks for that <code>useContext</code> and <code>useReducer</code>.</p>
  <p>So what I am doing is on button click I am setting up my context and then using it thought my application by registering the provider in my <code>App.js</code>.</p>
  <p>I know why I am using my data, because I am setting the initial state to null first, that's why when I refresh the page it sets to null again, but my requirement is not that after button click I want to store that data as a global state so that I can use it further</p>
  <p>But this should not be the case I want to make my data global and on refresh it should not lose</p>
  <p><strong>My code</strong></p>
  <p><strong>My context file</strong></p>
  <pre><code>import React, { useReducer, createContext } from &quot;react&quot;;
  
  const initialstate = {
    someData: null
  };
  
  const MyContext = createContext({
    someData: null,
    click_btn: d =&gt; {}
  });
  const MyReducer = (state, action) =&gt; {
    switch (action.type) {
      case &quot;BTNCLICKED&quot;:
        return {
          ...state,
          someData: action.payload
        };
  
      default:
        return state;
    }
  };
  
  const MyProvider = props =&gt; {
    const [state, dispatch] = useReducer(MyReducer, initialstate);
    const click_btn = d =&gt; {
      dispatch({
        type: &quot;BTNCLICKED&quot;,
        payload: d
      });
    };
  
    return (
      &lt;MyContext.Provider
        value={{ someData: state.someData, click_btn }}
        {...props}
      /&gt;
    );
  };
  
  export { MyContext, MyProvider };
  </code></pre>
  <p><strong>My home code where I am setting the context</strong></p>
  <pre><code>    import React, { useContext, useState } from &quot;react&quot;;
  import history from &quot;../History/history&quot;;
  
  import { MyContext } from &quot;../context/testContext&quot;;
  
  function Test() {
    const context = useContext(MyContext);
    const [data, setdata] = useState(null);
    const clickEvt = () =&gt; {
      setdata(&quot;Setting data&quot;);
      context.click_btn(data);
    };
    return (
      &lt;div&gt;
        &lt;input type=&quot;button&quot; onClick={clickEvt} value=&quot;Click Me&quot; /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Test;
  </code></pre>
  <p><strong>And my app.js file</strong></p>
  <pre><code>    import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { MyProvider } from &quot;./context/testContext&quot;;
  import { Router } from &quot;react-router-dom&quot;;
  import history from &quot;./History/history&quot;;
  import Routes from &quot;./myRoutes&quot;;
  
  export default () =&gt; {
    return (
      &lt;MyProvider&gt;
        &lt;Router history={history}&gt;
          &lt;div className=&quot;App wrapper&quot;&gt;
            &lt;Routes /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/MyProvider&gt;
    );
  };
  </code></pre>
  <p><strong>Please do check working code <a href="https://codesandbox.io/s/romantic-grass-tzp4o?file=/src/App.js" rel="noreferrer">My codesand box link</a></strong></p>
  <p>Please do check the <strong>react developer tools</strong></p>
  <p><a href="https://i.stack.imgur.com/ajTw7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ajTw7.png" alt="On click my developer tool image" /></a></p>
  <p><a href="https://i.stack.imgur.com/v0o6L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v0o6L.png" alt="When I refresh the page developer tool" /></a></p>