每次渲染后 componentDidUpdate 不触发

Question

I'm tracking when componentDidUpdate and render are firing with log statements.

The log statements in componentDidUpdate do not fire after render . I have used breakpoints to confirm this isn't a timing issue.

I'm using "render props" to wrap the component in question. My code (stripped down) is below. This is the output of the logging. Sometimes I'll get componentDidUpdate to fire, but inconsistently and it's never the final thing, a RENDER always shows up in my logs last, never UPDATE .

As I understand it componentDidUpdate should fire even if the update does not modify the DOM (though the renders here do update the DOM.) I've tried React@16.11.x and React@16.12.x with identical results.

class MyWrapper extends React.PureComponent {

  render() {
  const { buttonDefinitions } = this.props;
    return (
      <InfoProvider
        render={infoProps => {
          return (
            <MyMenu
              {...{ buttonDefinitions, infoProps }}
            />
          );
        }}
      />
    );
  }
}

class MyMenu extends React.Component {
  componentDidUpdate() {
    log.warn('UPDATE');
  }

  render() {
    log.warn('RENDER');
    const { buttonDefinitions } = this.props;
    return (
      <MenuWrapper>
        {buttonDefinitions.map(buttonDef => (
          <MyButton {...buttonDef} />
        ))}
      </MenuWrapper>
    );
  }
}

Answer 1

As per react docs , if you are using render props with React pure component, then shallow prop comparison will always return false for new props. In this case, for each render it will generate a new value for the render prop. As new props getting created & not updating previous one it won't call componentDidUpdate.