React (Performance): How to prevent unwanted rendering on each state change? [duplicate]

Question

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> </> ); }

@HMR Tried that but it didn't help because sometimes I want to pass children props on Content where memo doesn't support — Anugraha Acharya
– Anugraha Acharya, Commented Jun 12, 2020 at 12:58
@AnugrahaAcharya You may find this detailed answer by Dan Abramov helpful. — hangindev.com
– hangindev.com, Commented Jun 12, 2020 at 13:13
@AnugrahaAcharya I can't open this question again but you are correct, the component will re render if it has children even if all children themselves are pure components. Maybe you could create a new question specifically asking how to prevent re render when using children. I think that if you're using children then don't have the component do other heavy calculations or rendering, when children are pure then you should not have a performance problem. — HMR
– HMR, Commented Jun 12, 2020 at 14:13
Thanks @HMR. it helped me. I end up with something like codesandbox.io/s/prevent-renders-on-sidebar-toggle-lmo4j?file=/… — Anugraha Acharya
– Anugraha Acharya, Commented Jun 13, 2020 at 5:23

hangindev.com · Accepted Answer · 2020-06-12 12:58:59Z

Use React.memo which is a higher order component that returns a new memoized component.

The memoized component will not trigger a re-render if it's props haven't changed.

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

You can learn more about React.memo here

pachonjcl · Accepted Answer · 2020-06-12 12:55:18Z

To avoid re-rendering you should use React.memo in the component Content component as follows:

const Content = React.memo(() => { ... });

This way the component will shallowly compare the props and only render again when properties changes, which in this case doesn't.

I end up with something like this. By using react-fast-compare with react.memo codesandbox.io/s/prevent-renders-on-sidebar-toggle-lmo4j?file=/…

Collectives™ on Stack Overflow

React (Performance): How to prevent unwanted rendering on each state change? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related