Custom Hooks - React In Depth

Let's learn about Custom Hooks in React together.

We start with an overview of what a custom hook is and why we would use one and look at them in the context of the React Component Lifecycle.

Then, we look at an example of a custom hook that uses a single useEffect to log a message when a component mounts and how we can re-use it.

We then create a more complex hook by also brining in useState along with useEffect to create a useTimer hook that we can re-use across components. We also see how each component gets its own independent state and lifecycle.

To wrap up the video we recap the main ideas behind custom hooks, where and why to use them and some places we might see them in the wild.

Chapters:
00:00 Introduction
01:14 Custom Hooks Overview
03:01 React Component Lifecycle
04:07 useEffect Custom Hooks Example
09:33 logOnMount Hook Code Example
15:57 Starting Hooks with "use"
17:51 useTimer Custom Hook Example
20:55 useTimer Custom Hook Code
28:18 Custom Hook Visualization
29:47 Independent States Across Hooks
33:10 Recap
35:13 Next Steps

[MyPukeko]

Fantastic video again 👍. I am looking forward to doing the Custom Hooks exercises next. I really enjoy doing all of the exercises, such a great way to practice! Thanks so much.

[MuhammadAdnan.]

Well and good....
Custom hook for typing effect in next vdo ....