useEffect Hook - React In Depth

Let's learn side effect and the useEffect hook together in React.

We start off with an overview of the useEffect hook and it's place in the React ecosystem.

Then, we start getting in to the syntax of useEffect and how the dependency array argument works in regard to the effect function.

We then take a look at the cleanup function and how this fixes some issues with side effects and what we need to be aware of. We take a look at a specific example with setInterval and fix it with a cleanup.

We wrap up the video with an overview on rendering react trees and what useEffect looks like in the computer's memory.

Chapters:
00:00 Introduction
01:26 useEffect Hook Intro
05:15 High level use cases
06:37 Component Lifecycle
09:04 useEffect Syntax
10:54 No dependency array
12:19 Code Example - no dependencies
16:20 Empty dependency array
17:44 Code Example - State dependencies
24:29 State dependency array
35:43 useEffect Cleanup Functions
37:37 On-mount Cleanup Code Example
40:00 Re-render Cleanup Code Example
42:47 State Cleanup Code Example
44:22 Cleanup Function Visuals
45:03 Bugs without cleanup
52:45 Fixing Bugs with Cleanups
56:31 React Trees and Rendering
58:09 useEffect in Memory
59:20 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: https://discord.gg/K4nkugP7Gd

?Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: https://www.patreon.com/TechWithNader