Building a React.js App: componentWillReceiveProps and React Router

Share this video with your friends

Send Tweet

In this lesson, we’ll learn how React Router uses the componentWillReceiveProps life cycle method in order to give you any route changes that occurs in your application. We’ll leverage this to fetch new data about different users when the user requests that data.

egghead eggo
egghead eggo
~ 9 years ago

The lesson video has been updated!

Alan Eng
Alan Eng
~ 9 years ago

Can you explain what the role of componentWillUnmount is in this app? I commented it out and was able to have the app function perfectly without it. Maybe it's because the component never unmounts? I'm not sure in what situation a component would unmount or even how to unmount one.

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Great observation! Usually the role of componentWillUnmount is to remove/clean up any listeners you've established whether that's with flux, Firebase as in our example, or any other listeners. If you take out componentWillUnmount, you'll no longer be removing the listener to Firebase. Now, this isn't a HUGE deal, but what if that component mounts again, then you've created another listener. Now all of a sudden you have two listeners to firebase. And if this happens again, 3 listeners etc etc. So componentWillUnmount is mostly used to remove listeners (therefor protecting against memory links etc)

Jin
Jin
~ 9 years ago

I have been following this tut this far, thank you Tyler for your hard work. Correct me if i am wrong, since the Rounter History has deprecated, i am using context router to replace it, and the search function is ok and you dont need the componentWillReceiveProps to unbind and rebind incoming props to render the new page?

Kylan Hurt
Kylan Hurt
~ 8 years ago

For some reason when I try to access jakelingwall's profile I get the following error in my console: bundle.js:1178 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of NotesList.

Otherwise the lesson and code seems to work fine.

Andrewsh86
Andrewsh86
~ 8 years ago

There seems to be a bug after introducing the change of "profile/" to "/profile/" in SearchGithub.js.

After completing all of the code in this lesson, when you search for two users, they'll show up and load fine, but the third one will come back as an undefined user and the url will be something like this:

<path_to_project>/public/index.html?#/profile/undefined?_k=kb9dpq

I tried searching andrewsh86, then tenderlove, then SamyPesse

If I replace the "undefined" in the url with the correct username, it works fine. There's something buggy happening with the SearchGithub.js and not pushing to the history correctly. I verified that changing it back to be "profile/" fixes this problem, but reintroduces the issue of loading the page completely again.