title: Custom Hook returning component rerenders all children if the individual hook state changes
body: <p>Why does using a custom hook to render a component rerenders the App Component.  If I toggle <code>&lt;Comp&gt; or &lt;AnotherComp&gt;</code> the entire App component gets rerendered same for the other component.</p>
  
  <p>I tried React.memo and wrap the component again in App component but has no effect.</p>
  
  <p>I read that its the way react compares and treats that functions are different betwn renders. But is there an advanced pattern people use for this purpose?? </p>
  
  <pre><code>export const useCard = (params)=&gt;{
  const { ToBeWrappedComponent } = params;
  const [isOpen,setIsOpen] = useState(true);
  
  const toggle= ()=&gt; setIsOpen(!isOpen);
  
  const WrappedComponent = ()=&gt;{ 
  return (
  &lt;Collapse isOpen={isOpen} &gt;
  &lt;button onClick= {toggle}&gt; &lt;/button&gt;
  &lt;ToBeWrappedComponent /&gt;
  &lt;/Collapse&gt;
  )
  }
  
  return [WrappedComponent,toggle]
  };
  
  
  
  const App = ()=&gt;{
  const [Comp, toggleComp] = useCard({ToBeWrappedComponent: ()=&gt; (&lt;h1&gt;Wrapped Item &lt;h1&gt;) });
  const [AnotherComp, toggleAnotherComp] = useCard({ToBeWrappedComponent: ()=&gt; (&lt;h1&gt;Another Wrapped Item &lt;h1&gt;) })
  
  return (
  &lt;AnotherComp &gt; &lt;/AnotherComp&gt;
  &lt;Comp&gt; &lt;/Comp&gt;
  )
  }
  </code></pre>
  
  <p>Please note this code is just an exampple I have created to demonstrate what I am facing, I do more complex things with this apporach and just want to know about Advanced patterns to achieve it and the reason for rendering. Thanks</p>