title: How are custom hooks related to the component using them?
body: <p>I will argue about the core hook <code>useState</code> but I guess it applies the same for custom hooks. Consider this small ReactJS piece of code implementing a simple counter:</p>
  <pre><code>import React, { useState } from 'react';
  
  const Counter = () =&gt; {
      const [counter, setCounter] = useState(0);
      
      return (
          &lt;&gt;
              &lt;h1&gt;Counter value: {counter}&lt;/h1&gt;
  
              &lt;button onClick={() =&gt; { setCounter(counter + 1); }}&gt;Increment&lt;/button&gt;
          &lt;/&gt;
      );
  }
  
  export default Counter;
  </code></pre>
  <p>When the button is clicked the counter gets updated and it's new value is shown nicely.</p>
  <p>I guess <code>setCounter</code> is a closure inside de <code>useState</code> function, and when the button is clicked, that closure is called and the <code>counter</code> attribute is updated inside <code>useState</code> internals.</p>
  <p>But how does <code>useState</code> knows that it's &quot;hosting&quot; <code>Counter</code> component needs to be rendered again?. No relationship or reference between them is apparently established in the code.</p>
  <p>Thanks</p>