React.memo behaviour

Question

Consider the following simple components:

import React, { Fragment, memo } from 'react'; function Parent(props) { return ( <Fragment> <Child {...props} /> <Child foobar={props.foobar} /> </Fragment> ); } export default memo(Parent);

import React, { memo } from 'react'; function Child({ foobar }) { return ( <p>{foobar}</p> ); } export default memo(Child);

From what I understand wrapping a component in React.memo() will ensure that it only gets re-rendered whenever its props changes.

So unless whatever props that is passed onto "Parent" changes, that component, and its entire lineage of children will not get re-rendered.

However, what about its two children? Understandably if "props.fooobar" changes, they both will get re-rendered. But what if "props.somethingElse" gets changed? Which of them will get re-rendered here?

It wont rerender since the render method of the function, in your case the return wont be rerendered. — Nicholas
– Nicholas, Commented Apr 16, 2019 at 14:04

Tholle · Accepted Answer · 2019-04-16 14:08:15Z

If another prop than fooobar given to the Parent component changes, the Parent component will be re-rendered, but the first Child component will also be re-rendered since that is given all of the props given to the parent, so its props will also change.

Example

const { memo, Fragment } = React; const Parent = memo(props => { console.log("Rendered Parent"); return ( <Fragment> <Child {...props} /> <Child foobar={props.foobar} /> </Fragment> ); }); const Child = memo(({ foobar }) => { console.log("Rendered Child"); return <p>{foobar}</p>; }); class App extends React.Component { state = { foobar: "foo", bazqux: "baz" }; componentDidMount() { setTimeout(() => this.setState({ foobar: "bar" }), 1000) setTimeout(() => this.setState({ bazqux: "qux" }), 2000) } render() { const { foobar, bazqux } = this.state; return <Parent foobar={foobar} bazqux={bazqux} />; } } ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Collectives™ on Stack Overflow

React.memo behaviour

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related