How to create React's new static function getDerivedStateFromProps as a lifecycle method using an HoC in the recompose library?

Question

Recently it has come out that soon React will be deprecating componentWillReceiveProps and in it's place is the new static function getDerivedStateFromProps. See more here

I am currently migrating my apps to this new API, but am having an issue withgetDerivedStateFromProps, due to the fact that I am using the recompose library for higher order components. We make the use of componentWillReceive props through the library's lifecycle object.

So before moving to the new API, I had this:

export function someHoC () {
  return compose(
    lifecycle({
      componentWillReceiveProps (nextProps) {
        const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

This has now changed to the following:

export function someHoC () {
  return compose(
    lifecycle({
      getDerivedStateFromProps (nextProps) {
          const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

However, getDerivedStateFromProps needs to be static, so I am getting the warning regarding that and don't know how to handle it.

warning.js?7f205b4:33 Warning: lifecycle(MyComponent): getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.

What can I do to pass it in as a static lifecycle method into my component?

I'll update the OP, but it's irrelevant to the problem, which is why I chose to remove it. — theJuls, Apr 17 '18 at 18:44
You could use `setStatic`, but that will actually modify the base component, which might not be what you want. — Oblosys, Apr 17 '18 at 19:03
I did consider that, but it does not solve my problem due to exactly that. — theJuls, Apr 17 '18 at 19:06

score 5 · Answer 1 · answered Apr 19 '18 at 10:11

If you want to use getDerivedStateFromProps you need to declare it as a static method:

static getDerivedStateFromProps() {...}

Obviously, this makes getDerivedStateFromProps static, which means you can't call it the same as you could call componentWillReceiveProps.

If a static method doesn't work for you, you can move your logic into componentDidUpdate to silence the warning. However this can cause an additional render if you call setState() from this method. Depending on what happens when you resolve your fetch(), this may work for you.

You can also replace componentWillReceiveProps with UNSAFE_componentWillReceiveProps (docs), which will work the same way. However, due to the upcoming async rendering feature, this could cause some issues.

user2126927 · Answer 2 · 2018-04-18T13:43:59.793

0

You should use the following inside your lifecycle

setStatic('getDerivedStateFromProps', (nextProps, prevState) => {}) and store previous values in component state for retrieving it from prevState argument

edited Apr 18 '18 at 13:43

answered Apr 18 '18 at 12:53

user2126927

9
1
4

outside the lifecycle. – Nir O. Dec 18 '18 at 13:16

How to create React's new static function getDerivedStateFromProps as a lifecycle method using an HoC in the recompose library?

2 Answers2