#React use memo update

#React use memo update

Any time a React component renders, regardless of why or where it's located in the component tree, React creates a snapshot of the component which captures everything React needs to update the view at that particular moment in time. Now, regardless of how many times we click our button, Wave will only render once, on the initial render.īut again, even when dealing with child components, our mental model holds strong. mo is a function that takes in a React component as an argument and returns a new component that will only re-render if its props change. Third, if you do have an expensive component and you want that component to opt out of this default behavior and only re-render when its props change, you can use React's mo higher-order component. We'll cover these later in the course, but know that we can't just assume a component should only re-render when its props change. To be a pragmatic tool and not just a philosophical one we discuss in computer science courses, React provides some escape hatches to break out of its normal v = fn(s) paradigm. The problem, as anyone who has built a real world React app knows, is that isn't always the case.

Second, the assumption that React should only re-render child components if their props change works in a world where React components are always pure functions and props are the only thing these components need to render. If you have a performance problem, the reality is it's rarely because of too many renders.

Shouldn't React only re-render child components if their props change? Anything else seems like a waste.įirst, React is very good at rendering.

I get this may seem like a strange default.