Improve the React lifecycle method challenges

[joshalling]

After seeing the issue that @web2033 reported (#241) about deprecated lifecycle methods, I decided to go through the lifecycle challenges, and I have a few recommendations that I think would be beneficial.

1. https://learn.freecodecamp.org/front-end-libraries/react/use-the-lifecycle-method-componentwillmount/

   • Add the new lifecycle methods and remove the deprecated ones based on the react docs here
   • Include subheadings in the list to specify which are for mounting, updating, and unmounting
   • If we do use the new getDerivedStateFromProps in this first challenge then I think it's important to point out 2 things.
     • This lifecycle method only has very specific use cases and should rarely be used.
     • This lifecycle method is static so you will not have access to the instance of the component (i.e. this).
     • Edit: It might be better to use the constructor lifecycle method for this first challenge as it is the first method to be called in the lifecycle.

2. https://learn.freecodecamp.org/front-end-libraries/react/use-the-lifecycle-method-componentdidmount

   • I think that we should specify that this and all of the mounting lifecycle methods only run on the first render.

3. https://learn.freecodecamp.org/front-end-libraries/react/add-event-listeners

   • This might be a little nitpicky, but I would like to see the challenge name specify that we are adding event listeners in the componentDidMount method. I know that I sometimes need to go back to old challenges to remember things that I learned and I think this could help users to more quickly identify that challenge if they need too.
   • The challenge asks you to use the componentWillUnmount method without a good description of that lifecycle method and when it gets called. I would argue that we should have a separate challenge later on that references this challenge and explains the method separately. This way we aren't trying to teach 2 different principles in one challenge, and the chalenges will flow nicely from mounting to updating to unmounting.

4. https://learn.freecodecamp.org/front-end-libraries/react/manage-updates-with-lifecycle-methods

   • I think that we should replace componentWillReceiveProps with getSnapshotBeforeUpdate. I know that getDerivedStateFromProps is a better replacement for componentWillReceiveProps in practice, but this isn't a use case for it anyway.
   • "You'll need to pass nextProps as an argument to this method..." This phrasing is confusing and makes it sound like the user needs to pass nextProps when calling the method. It might be better to say something like, "nextProps will be automatically passed when this method is called so you will need to include it in the method signature in order to use it in the body of your method."

5. https://learn.freecodecamp.org/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate

   • componentWillReceiveProps should be removed entirely from the contents of this challenge.

6. We should add another challenge here that goes over componentWillUnmount and what it is used for.

Does anyone have any thoughts or suggestions on this topic?

[ghost]

This article has even more details with examples and suggestions for migration.

[joshalling]

@web2033 Thanks for that article. It looks like pretty much all use cases for componentWillMount can be migrated using constructor or componentDidMount. Maybe in the first challenge we could have them console.log() something in the constructor, and explain that this is the first method that gets called in the lifecycle.