title: Is it possible to share states between components using the useState() hook in React?
body: <p>I was experimenting with the new Hook feature in React. Considering I have the following two components (using React Hooks) - </p>
  
  <pre><code>const HookComponent = () =&gt; {
    const [username, setUsername] = useState('Abrar');
    const [count, setState] = useState();
    const handleChange = (e) =&gt; {
      setUsername(e.target.value);
    }
  
    return (
      &lt;div&gt;
        &lt;input name="userName" value={username} onChange={handleChange}/&gt;
        &lt;p&gt;{username}&lt;/p&gt;
        &lt;p&gt;From HookComponent: {count}&lt;/p&gt;
      &lt;/div&gt;
    )
  }
  
  
  const HookComponent2 = () =&gt; {
    const [count, setCount] = useState(999);
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Hooks claim to solve the problem of sharing stateful logic between components but I found that the states between <code>HookComponent</code> and <code>HookComponent2</code> are not sharable. For example the change of <code>count</code> in <code>HookComponent2</code> does not render a change in the <code>HookComponent</code>. </p>
  
  <p>Is it possible to share states between components using the <code>useState()</code> hook?</p>