Recompose: Update withStateHandlers initialState when receiving new props

Created on 27 Jun 2018  路  1Comment  路  Source: acdlite/recompose

I recently ran into an issue in a project with @lamflam where we wanted to recalculate the initialState on withStateHandlers when the component receives new props. Here is the solution that we came up with, which makes use of getDerivedStateFromProps and the existing withStateHandlers utility:

import React, { PureComponent } from 'react';
import { withStateHandlers as withRecomposeStateHandlers } from 'recompose';

export const withStateHandlers = (initialState, stateUpdaters) => WrappedComponent => {
    class WithStateHandlers extends PureComponent {
        static getDerivedStateFromProps(props, state) {
            return initialState(props, state);
        }

        constructor(props) {
            super(props);
            this.state = {};
        }

        render() {
            return React.createElement(WrappedComponent, { ...this.props, ...this.state });
        }
    }

    return withRecomposeStateHandlers(props => initialState(props, {}), stateUpdaters)(WithStateHandlers);
};

We've read a few of the GitHub issues where it's been explained why this isn't a part of withStateHandlers or isn't its own recompose utility, but I thought I'd post it here and see if this solution is helpful to anyone else. Also more than happy to clean this up and turn it into a PR if it would make sense to include this with recompose.

Most helpful comment

This is as simple as adding

  if (typeof initialState === 'function') {
    WithStateHandlers.getDerivedStateFromProps = initialState
  }

to withStateHandlers HOC.

I've copy/pasted the code from recompose source code into my codebase and did this change, now my use case is covered by this component.

>All comments

This is as simple as adding

  if (typeof initialState === 'function') {
    WithStateHandlers.getDerivedStateFromProps = initialState
  }

to withStateHandlers HOC.

I've copy/pasted the code from recompose source code into my codebase and did this change, now my use case is covered by this component.

Was this page helpful?
0 / 5 - 0 ratings