Exercises: Custom Hooks - React In Depth

Let's go through some exercises to practice Custom Hooks in React together.

We start with a warmup to create a hook that will log when a component mounts and re-renders in a re-usable way.

In the first main exercise we see what a custom hook would look like that checks to see if a user might be authenticated in an application and how that might be shared with other components in the component hierarchy.

For the second exercise, we create a hook that wraps around useState that logs the previous and next state values as state changes.

To wrap up the video, we look at how we can create our own data fetching hook that implements caching inside it.

Chapters:
00:00 Introduction
00:35 Warmup Exercise - Rerender Logger
11:06 Exercise 1 - useAuth Hook
22:12 Exercise 2 - useState with Logging
38:39 Exercise 3 - useQuery Data Fetching
1:13:51 Next Steps

[ruskasielu]

I would like if you could show us the result you expect at the beginning of each exercice (not the code, just the app). Sometimes I'm not sure of what we are supposed to do until I see the solution, and I realise I could have done it alone if I had known.

Besides that, absolutely stellar content, the best react course I've seen online !

[giafra]

Hello @TechWithNader, many thanks for the extremely helpful video.
I got a question for you regarding Exercise 3 (useQuery custom hook): isn't it a React anti-pattern to fetch outside of a useEffect hook? I'm referring to the function fetcher you coded. Technically, the network request as you coded the hook is not placed inside a useEffect hook. Should this be a point of concern ?

Thanks again.