React.memo

up:: ReactDOM

React.memo

const DemoOutput => {...};
 
export default React.memo(DemoOutput)

This tells React to only re-render child components on props change.

In fact, this can be a bit of a performance dip. React stores the previous prop and then compares it to a new one. Sometimes that is more performance cost, sometimes not. Eg. when we avoid the re-evaluation of a parent component with a lot of children, it’s worth it. If prop change often on a component, it’s not worth it.

Common gotcha on prop values that are objects

If you pass a function as a prop, React.memo still re-evalutes.

That is because what React.memo does, is (in a simplified way) this:

props.value === props.previous.value

Now here is how JavaScript evalutes stuff:

false === false // true
"hi" === "hi" // true
 
[1, 2, 3] === [1, 2, 3] // false

JS Primitives like booleans are strings are equal on comparison, JS Non-primitives like arrays or objects (and JavaScript Functions are just objects) are never the same. So even if what looks like ‘the same’ function gets passed in, it actually isn’t evaluated as the same.

The React useCallback hook help us out here.