1

I was trying to pass props both in App component (The root Component) and then to Header component from App itself.

I have used Life Cycle Hooks upto componentWillReceiveProps() in both App and Header Component.

componentWillMount(), render(), componentDidMount() are getting executed in both the Components in an expected order.

However, componentWillReceiveProps() is not executed at all even on passing props. This is a unExpected behaviour, since componentWillMount() was executed normally!

I shall be extremely thankful to know why is this happening ! Thank you :)

Kindly check the code sample from the below link:

https://codesandbox.io/s/r092xkpwjp

ComponentWillReceiveProps

Please Note: Question has been updated, and it shows both scenarios now, new props being passed (in Header Component which works fine now) and no new props being passed as was previously the case in the question (in App Component which still shows why things were working unexpectedly).

2
  • 1
    hi @Imran Rafiq Rather can you please look at this code stackoverflow.com/questions/53203916/…
    – user11783025
    Apr 20, 2020 at 21:32
  • Hi @ParthTiwari I have mistakenly updated and worked on the same link that I have shared in the question about 1 and half year ago. As I went through all my sandboxes I have found the correct one. Here it is codesandbox.io/s/r092xkpwjp . If you want to know any thing about what I was trying to achieve, do let me know please. Thanks again. I am updating my Image as well as the link :) Apr 21, 2020 at 14:39

3 Answers 3

2

I don't see why you expect your components to be updated as the The props being passed to them always stay the same and no new props have been passed to these at all, but generally you should use componentDidUpdate(prevProps, prevState).

componentWillReceiveProps() only gets invoked when the props passed to them are new props, different from the previous values. In the question this was not happening.

Note: The question has been updated now for it to work properly.

Also consider managing the state by static getDerivedStateFromProps(props, state), i.e.:

static getDerivedStateFromProps(props, state){
  // just return the state
  return {
    isLoading: false,
    money: props.money
  }
}

- it's executed on init + on updates.

1
  • @ImranRafiqRather glad to help! It's all available in react docs, also I'd recommend to touch react hooks they will be delivered in future releases, but really makes code cleaner! :)
    – Alejandro
    Nov 8, 2018 at 9:11
0

As stated in the official documentation (see https://reactjs.org/docs/react-component.html) the

 componentWillReceiveProps()

lifecycle method is deprecated and should be avoided.

The reason why it is never called is that, to help user avoid it, React developers renamed it

 UNSAFE_componentWillReceiveProps()

You should however avoid it, since they plan to deprecate that method

1
  • This is not the reason. componentWillReceiveProps will stop working only in React 17. Nov 8, 2018 at 8:54
0

1.The main reason why the componentWillReceiveProps() was not being invoked was because my props passed to Header Component were not changing at all, I have been passing the same props again and again. And componentWillReceiveProps() gets executed only when the props being passed are different each time.

This is what my Header component looked at the time of asking this question.

<Header
      menus={["home", "about", "services", "blog"]}
/>

The Header Component had only the menus prop as an array (at the time of asking this question) and no event was updating this menus prop , that's the reason why my componentWillReceiveProps() was never invoked/called in the Header Component.

Note: To simply the things I now passed another prop to Header Component, and started to test my code on this prop instead of working with the array menus prop.

 <Header
    menus={["home", "about", "services", "blog"]}  
    prop={this.state.prop}
 />

And I am making my state.prop to update using an event handler:

 // Dynamically sending Props
  handlePropSending = () => {
   this.setState({
    ...this.state,
    prop: this.state.prop + 1
   });
  };

And as I am clicking on the button 'Sending Props to Header', the new props are sent to Header Component and our componentWillReceiveProps is being called and executed succefully.

  1. And same was the issue with componentWillReceiveProps in the App Component

    ReactDOM.render(, rootElement);

Since I was adding money prop (money={9199}), there actually is no Parent Component available for money prop to update it's value (which we could have passed to the App Component for it to invoke its componentWillReceiveProps method).

NOTE: The code is updated now and there are event handlers now to make sure the props keep updated and now the componentWillReceiveProps() method is indeed being successfully invoked.

componentWillReceiveProps demonstrated along with other life Cycle Hooks

LIKE THEY SAY :) ALL IS WELL THAT ENDS WELL :)

1
  • @Parth Tiwari Firstly my special Thanks goes to you for letting me update the question. I checked it and figured out why things where not working for me at that time (almost 1 and a half years ago). Now all seems crystal clear. :) Apr 21, 2020 at 16:30

Your Answer

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

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