React js lifecycle methods not firing on wrapped component

Question

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?

Answer 1

The problem is that since the line that creates the wrapped component is contained in the functional component, it basically creates a new component every time the functional component renders.

This line ends up being included in WrappedComponent's render method:

const Component = withSomething(MyComponent);

...which means Component gets overwritten at every render.

Another clue is to put a componentDidMount() into MyComponent -- it'll fire every time the props update.

Solution is to create the wrapped component somewhere OUTSIDE the functional component, or outside the render method if you are using a regular class component.