how to stop re-rendering of child component if parent update the context or state in react js?

Question

how to stop re-rendering of child component if parent update the context or state in react js ?

I am already using React.memo still it is re-rendering.

this is my child component

const Ab = () => {
  console.log("---ff-ddd");
  const pageContext = useContext(PageContext);

  useEffect(() => {
    setTimeout(() => {
      pageContext.updateGlobalMenu({});
    }, 5000);
  }, []);
  return <div>ddd</div>;
};

export default React.memo(Ab);

I am updating the context. I want it update the context value but not re-render the child component

export default function IndexPage() {
  const [globalMenu, setGlobalMenu] = useState("");

  const updateGlobalMenu = (menuContent) => {
    setGlobalMenu(menuContent);
  };

  return (
    <PageContext.Provider
      value={{
        updateGlobalMenu
      }}
    >
      <Ab />
    </PageContext.Provider>
  );
}

here is my code

https://codesandbox.io/s/friendly-bartik-3cnqvf?file=/pages/index.js:156-470

if you see it print two times console. it means it is re-rendering two times

Answer 1

You can also, in addition to memoisation from the previous answer, split your "api" and "data" portion of the state into two different providers.

updateGlobalMenu will be in PageContextAPI provider, globalMenu will be in PageContextData provider. That way when you update the data, only the provider with the data will be re-rendered.

Take a look at this article, I covered this technique in detail here:https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context