This problem is hitting on my performance badly. On each state change, my children's are re-rendered. Is there any way to get rid of this? How can I prevent my child components to not get affected from this type of re-renders. Please help.

 import React from "react"; const Content = () => { console.log("I am rendering multiple time on each open sidebar"); return <div>test-content</div>; }; export default function App() { const [open, setOpen] = React.useState(false); return ( <> <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button> <Content /> </> ); } 

This problem is hitting on my performance badly. On each state change, my children's are re-rendered. Is there any way to get rid of this? How can I prevent my child components to not get affected from this type of re-renders. Please help.

 import React from "react"; const Content = ({children}) => { console.log("I am rendering multiple times on each update"); return children; }; export default function App() { const [open, setOpen] = React.useState(false); return ( <> <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button> <Content>  <p>test-children</p> </Content> </> ); }