The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: componentWillReceiveProps and React Router

Building a React.js App: componentWillReceiveProps and React Router

5:18
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Transformers

Hi Tyler, I' m trying out the tutorial, and so far it has been a good experience learning ReactJS. However for some reason the data is not unbinding.I and using the new version of React and when I try changing the GitHub username only the username changes but not the entire data. If I enter a new username then it loads the previous data and not a new data.

In reply to egghead.io
Avatar
Tyler

It's hard to tell from your description what the error could be. Have you checked out the Github version? It's (as of yesterday) been updated with all the latest versions of everything. https://github.com/tylermcginnis/github-notetaker-egghead

In reply to Transformers
Avatar
egghead.io

The lesson video has been updated!

Avatar
Alan

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.

Avatar
Tyler

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)

In reply to Alan
Avatar
Ryan

When I use console.log() anywhere in the Profile component or any of it's children, the result is logged 4 times. Assuming that's not supposed to be the case, are there any tricks to figuring out why that is happening? Thx!

Hmmm. I actually just downloaded your repo and the behavior is the same. Perhaps this is normal re-rendering?

In reply to egghead.io
Avatar
Tyler

React will (efficiently) re-render whenever a component receives new props or state. Check out shouldComponentUpdate to tell React specifically when it should re-render.

In reply to Ryan
Avatar
Maximilian Patan

I've also experienced this behavior. This happens when prefixing the "/" to profile in SearchGithub.js as instructed in this lesson. Trying to figure out why this is happening. May be a version issue.

Tyler - wonderful series btw. It's a great tutorial with some meat to it. Your explanations are clear and well thought-out. Please do other tutorials - you have a talent for communicating complex concepts with clarity. Alliteration not intended - just worked out that way :)

In reply to Transformers
Avatar
Maximilian Patan

Problem solved - componentWillReceiveProps was not being called because of a spelling error. duh.

In reply to Maximilian Patan
Avatar
Tyler

Thank you Max - that truly means a lot.

Also, I can't tell you how many times I've mis-spelled componentWillReceiveProps as well :)

In reply to Maximilian Patan
Avatar
Jin

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?

Avatar
marlonjfrausto

I just completed this video for the tutorial but some properties in a user's profile return as 00 within the unordered list. did anybody else encounter this issue? any ideas/hints on what may be going on and how to fix it?
Not seeing any errors in the console so don't really know how to debug/address issue.
BTW: AWESOME tutorial tyler, can't even begin to tell you how helpful this has been !

In reply to Tyler
Avatar
Priyanka Malviya

Hello Tyler, Awesome job on this tutorial! My app works fine but the app hangs when I try to search a second user. I tried to look carefully into the video again to find out the error but cannot. Could you please help? My code is here: https://github.com/priyankamalviya/githubnotes

In reply to Tyler
Avatar
Kylan Hurt

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?