5

Context provides a way to pass data through the component tree without having to pass props down manually at every level. This is great!

but I'm wondering how to use it with getDerivedFromProps()

For example, if I have a prop sent via Context in top level of the app, that said it's window.location.href, and I need to take action in the child component based on the href, e.g. fetch the data.

Using getDerivedStateFromProps(), I have to write something like the following:

getDerivedStateFromProps(nextProps, state) {

  var stateRev = null
  var pathname = hrefToPath(nextProps.href)
  if (pathname != state.pathname) {
    stateRev = {}
    Object.assign(stateRev, {
      pathname,
      book: source.find()
    })
  }
  return stateRev
}

However, if I write the code like the above, I have to send the window.location.href through the levels. What I need to know is if the prop in the context changed, I need to update the state.

I see no way to know the prop in the context changed or not. Is there anything I need to know about the context api and getDerivedStateFromProps?

Thank you.

2 Answers 2

5

If you want to consume context in lifecycle methods you can use contextType. The problem with this approach is that getDerivedStateFromProps is static and cannot access instance variables.

So solution I see is to wrap your component in High Order Component, like this

const WithContext = (Component) => {
    return (props) => (
        <CustomContext.Consumer>
            {value =>  <Component {...props} value={value} />}
        </CustomContext.Consumer>
    )
}

In this case you'll get context as part of props

1
  • 1
    thank you. It seems it's the only way to react on the context props change. Jun 18, 2019 at 7:30
0

getDerivedFromProps is not for that

DOCS - tips for getDerivedFromProps: 'If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.'

Also 'This method doesn’t have access to the component instance.' - then no this.context available.

If you need to react on context prop change - use Context.Consumer. Use componentDidUpdate to compare props (consumer provides context value as prop) and conditionally fetch data.

2
  • Hi, xadm, I'm sorry I cannot understand why it should not use getDerivedStateFromProps, in fact, what I'm asking is how to fetching external data when props changed in the link: reactjs.org/blog/2018/03/27/… However, I'm thinking how to react on context prop change, so I'm asking. Jun 18, 2019 at 7:27
  • because it's static - no this access, no this.setState after fetch ...etc.
    – xadm
    Jun 18, 2019 at 7:48

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.