title: use context value as initial state value - react hooks
body: <p>Can We use context values to initiate a state variable inside a function component?</p>
  
  <p>Here I am trying to initiate a component state with values from context. But the state doesnot update when context value changes.</p>
  
  <pre><code>
  function Parent() {
    return (
      &lt;ContextProvider&gt;
        &lt;Child /&gt;
      &lt;/ContextProvider&gt;
    );
  }
  
  function Child() {
    const mycontext = useContext(Context);
    const [items, setItems] = useState(mycontext.users);
    console.log(mycontext.users, items); //after clicking fetch, =&gt; [Object, Object,...], [] both are not equal. why??????
  
    return (
      &lt;&gt;
        &lt;button onClick={() =&gt; mycontext.fetch()}&gt;fetch&lt;/button&gt;
        {/* &lt;button onClick={()=&gt;mycontext.clear()} &gt;Clear&lt;/button&gt; */}
        {items.map(i =&gt; (
          &lt;p key={i.id}&gt;{i.name}&lt;/p&gt;
        ))}
      &lt;/&gt;
    );
  }
  /* context.js */
  const Context = React.createContext();
  function ContextProvider({ children }) {
    const [users, setUsers] = useState([]);
  
    function fetchUsers() {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then(response =&gt; response.json())
        .then(json =&gt; setUsers(json));
    }
  
    return (
      &lt;Context.Provider
        value={{ users, fetch: fetchUsers, clear: () =&gt; setUsers([]) }}
      &gt;
        {children}
      &lt;/Context.Provider&gt;
    );
  }
  </code></pre>
  
  <p>The above code can be tested in <a href="https://codesandbox.io/s/great-northcutt-whf1k" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <p>I can use context values directly, but I want to maintain state inside the component.
  If we cannot initiate state value with a context value, what is the best approach If I want to get data from context and also want to maintain state internally? </p>