Reactjs.org: componentWillReceiveProps to getDerivedStateFromProps

[Statfine]

if props is not in state, and props is identification marks for certain methods，

componentWillReceiveProps(nextProps) {
    if (nextProps.flag !== this.props.flag && nextProps.flag) {
      this.doSomething()
    }
  }

what should i do after used getDerivedStateFromProps

[Statfine]

flag is not in state, so i can not used componentDidUpdate to do this.

if getDerivedStateFromProps+ componentDidUpdate instead of componentWillReceiveProps is the only way

[gaearon]

flag is not in state, so i can not used componentDidUpdate to do this.

You can:

componentDidUpdate(prevProps) {
  if (prevProps.flag !== this.props.flag && nextProps.flag) {
    this.doSomething();
  }
}

componentDidUpdate accepts both prevProps and prevState as arguments, as documented.

You don't need getDerivedStateFromProps for this.

[Statfine]

@gaearon flag is only identification marks，Render action will not be triggered， componentDidUpdate executed？？？

[gaearon]

React always calls componentDidUpdate unless you bailed out with shouldComponentUpdate.

[Statfine]

@gaearon you may not understand what i mean, flag???

import React, { PureComponent } from 'react';
import PropType from 'prop-types';

export default class ExamplePage extends PureComponent {
  componentDidUpdate(prevProps) {
    if (prevProps.flag && this.props.flag !== prevProps.flag) {
      this.handleDoSomething();
    }
  }
  handleDoSomething = () => {
    console.log('handleDoSomething');
  };
  render() {
    const { title } = this.props;
    return (
      <div>
        <p>{title}</p>
      </div>
    );
  }
}

ExamplePage.propTypes = {
  title: PropType.string.isRequired,
  flag: PropType.bool.isRequired,
};

[gaearon]

I don’t understand your problem. Does this code not work?

[Statfine]

you can try, only change flag in parent component then see Console

[gaearon]

Sorry. Please provide an example I can run — I don't understand your problem.

[Statfine]

Parent

import React from 'react';

import ExamplePage from './ExamplePage';

/* eslint-disable react/prefer-stateless-function */
export class NewPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      title: 'Hello',
    };
  }
  handleClick = () => this.setState({ flag: true });
  render() {
    const { title, flag } = this.state;
    return (
      <div>
        <p onClick={this.handleClick}>Btn</p>
        <ExamplePage flag={flag} title={title} />
      </div>
    );
  }
}

export default NewPage;

ExamplePage

import React, { PureComponent } from 'react';
import PropType from 'prop-types';

export default class ExamplePage extends PureComponent {
  componentDidUpdate(prevProps) {
    if (prevProps.flag && this.props.flag !== prevProps.flag) {
      this.handleDoSomething();
    }
  }
  handleDoSomething = () => {
    console.log('handleDoSomething');
  };
  render() {
    const { title } = this.props;
    return (
      <div>
        <p>{title}</p>
      </div>
    );
  }
}

ExamplePage.propTypes = {
  title: PropType.string.isRequired,
  flag: PropType.bool.isRequired,
};

click Btn change flag, title not change, so componentDidUpdate executed?
in old version

componentWillReceiveProps(nextProps) {
    if (nextProps.flag !== this.props.flag && nextProps.flag) {
      this.doSomething()
    }
  }

[gaearon]

Your code displays the message when the flag changes from true to false.

  componentDidUpdate(prevProps) {
    if (prevProps.flag && this.props.flag !== prevProps.flag) {
      this.handleDoSomething();
    }

But you are changing it from false to true.

  handleClick = () => this.setState({ flag: true });

This is why you don’t see the message.

Did you mean to write this instead?

  componentDidUpdate(prevProps) {
    if (this.props.flag && this.props.flag !== prevProps.flag) {
      this.handleDoSomething();
    }

I think the root of your misunderstanding is that in componentWillReceiveProps the argument is new props, and this.props are old props. But in componentDidUpdate the update has already happened so the argument is old props, and this.props are the new props.

[AliasT]

@Statfine , may be your problem is:

_Why the child component rerender when parent's state: flag changes, although flag not used in child's render ?_

If so, then the reason is:
when parent rerender, the process comes to child's shouldComponentUpdate, after the internal shallowEqual it gets true, so rerender, different from Vue's dependencies collection (or mobx?)

That's why we need shouldComponentUpdate to optimize our component.

shallowEqual
shouldComponentUpdate

[Statfine]

Thanks， It's my understanding mistake

[Statfine]

@AliasT Thanks,you are right