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
📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/react-in-depth
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader
Watch video Custom Hooks - React In Depth online without registration, duration hours minute second in high quality. This video was added by user Tech with Nader 03 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,08 once and liked it 6 people.