title: prevent child component to re-render below context provider with memo
body: <p>I am using a context provider in React to share data across several components. However since a value gets changed from one of my subcomponents, it rerenders all of my other components which partly leads to performance issues. So I want to prevent my child components to rerender. I tried using React.memo() but it's still rendering whenever I set the state of the Context Provider.</p>
  <pre><code>const Authenticator = React.memo(() =&gt; {
    
    const [myChat, setMyChat] = useContext(ChatContext);
  
    console.log(&quot;rerender&quot;); // gets called everytime on click
    return (
      &lt;Button
        title=&quot;click me&quot;
        onPress={() =&gt; setMyChat({ text: &quot;hello&quot; })}
      &gt;&lt;/Button&gt;
    );
  });
  </code></pre>
  <p>My Context Provider looks like this:</p>
  <pre><code>const ChatProvider = ({ children }) =&gt; {
    const [myChat, setMyChat] = useState([]);
  
    return (
      &lt;ChatContext.Provider value={[myChat, setMyChat]}&gt;
        {children}
      &lt;/ChatContext.Provider&gt;
    );
  };
  </code></pre>
  <p>My App.js looks like this:</p>
  <pre><code>&lt;ChatProvider&gt;
    &lt;Authenticator /&gt;
  &lt;/ChatProvider&gt;
  </code></pre>