React js lifecycle methods not firing on wrapped component

Viewed 1129

Here is a component:

export default class MyComponent extends React.Component {
  componentWillReceiveProps(newProps) {
    console.log('RECEIVED PROPS');
  }

  render() {
    return <div>{this.props.foo}</div>
  }
}

Here is a wrapper/higher-order-component:

  const withSomething = (ComponentToWrap) => {
    render() {
      return <ComponentToWrap {...this.props} />
    }
  }

Here is a functional component that wraps MyComponent in withSomething:

export default function WrappedComponent(props) {
    const Component = withSomething(MyComponent);
    return <Component ... some props ... />
}

Result: props-related lifecycle functions (such as componentWillReceiveProps) in MyComponent never fire, even when I update the props.

What is up with this? Do props-based lifecycle methods not work on wrapped components?

1 Answers
Related