19. 19
    Understand the React Hook Flow
    11m 4s

Understand the React Hook Flow

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Understanding the order in which React hooks are called can be really helpful in using React hooks effectively. This chart can be really helpful in understanding this, and in this lesson we’ll explore the lifecycle of a function component with hooks with colorful console log statements so we know when one phase starts and when it ends.

I recommend you watch this one slowly and watch it as many times as you need to. Also definitely play around with the code yourself until you feel relatively comfortable with this. Understanding all of this is not critical to your success with using React, and most of the time you won’t need to think about this at all, but understanding it can help you at times.

~ 5 years ago

Hi Kent, I'm enjoying the lessons so far, but in this video something is unclear to me: The console logging in the return callback of useEffect is getting called before the console logging in the body of useEffect. I didn't really catch the reason for that, and actually I don't understand how that is possible, since the return statement should not be called until after every other statement in the body of useEffect is executed.

Alon
Alon
~ 5 years ago

Hi Kent,thanks for the great course. I did the same example, and the useState in the app is causing another render, so when the app loads I get

App: render start App: useState callback App: render end App: render start App: useState callback App: render end App: useEffect no deps App: useEffect empty dep App: useEffect with dep

I can't understand why it is different from your example ​

Kent C. Dodds
Kent C. Dodds(instructor)
~ 5 years ago

Do you have strict mode enabled? https://kentcdodds.com/blog/react-strict-mode

Alon
Alon
~ 5 years ago

Yes, apparently I have strict mode enabled, thanks.

Victor Callegari
Victor Callegari
~ 4 years ago

I am very curious of knowing what's the hook flow when you have <Route> in the file. The problem I am facing is that I am having weird behaviors and I see renderings that to my understanding should not happen according to what I learned from this vide. BTW, yes, I am using Switch and Route in my App file.

Could someone give me some info about it?

Thanks!