title: Is it possible to decouple re-rendering of some components when specific states change in react hooks?
body: <p>I have created state called someState with useState and my page has 2 components (component A is function of someState, and component B of not.)</p>
  <p>I wanted to only re-render component A when someState changes but does B as well.</p>
  <pre><code>const [someState, setSomeState] = useState(null);
  const [message, setMessage] = useState(null);
  
  const componentA = () =&gt; {
     console.log(&quot;component A&quot;);
     return (&lt;div style={{position:someState}}&gt;Hello World!&lt;/div&gt;);
  }
  
  const ComponentB = (props) =&gt; {
     console.log('component B');
     return &lt;div&gt;Hope this is not re-rendered..&lt;/div&gt;
  }
  
  return (
     &lt;div&gt;
       &lt;div onClick={(e)=&gt;{setSomeState(5);}&gt;Update the position&lt;/div&gt;     
       &lt;div&gt;{componentA()}
       &lt;/div&gt;
  
       &lt;ComponentB message={message}/&gt;
     &lt;/div&gt;
  )
  
  
  </code></pre>
  <p>here when I clicked the button &quot;update&quot;, I get two console log results (component A, component B)</p>
  <p>Is there way to decouple the re-rendering of componentB?</p>
  <p>Thank you so much!</p>