score:1

Accepted answer

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>


Related Query

More Query from same tag