React useEffect hook - A complete guide for beginners and Advanced

In this Tutorial, you'll learn all about React useEffect hook. Topics covered side effects, syntax, how to use, synchronization with an external system, declare at the top, does not work in conditions nor loops, does not return value, does not re-render, without dependency array, with empty dependencies array, with one dependency, with multiple dependencies, run on initial render, runs twice on initial render, useState dependency, prop dependency, function dependency, local variable dependency, run after the render, reactive dependencies, constants and dependencies, using updater function, multiple useEffects, cleanup function runs on unmount, cleanup function runs with the previous values, cleanup timeouts intervals eventListeners fetch and finally infinite loop error

Full React useEffect Tutorial with Examples: https://tutjunction.com/react/use-effect

Full React Tutorial with Examples: https://tutjunction.com/react/start

Pinterest: https://www.pinterest.com/ampathumbandara/

Author LinkedIn: https://www.linkedin.com/in/pathum-bandara-tutjunction/

About Author: https://tutjunction.com/about/author

LIKE and SUBSCRIBE !!!!

Music: Boom Bap Flick - Quincas Moreira

- timestamps -
00:00 - Intro
00:07 - What are the side effects in useEffect?
00:29 - Quick preview of useEffect
01:39 - Syntax and how to use useEffect
02:42 - Components and external system
05:43 - useEffect synchronizes the component with external system
06:05 - Declare useEffect at the top
06:20 - useEffect does not work in conditions and loops
06:43 - useEffect does not return a value
06:52 - useEffect does not directly re-render the component
07:06 - useEffect without dependency array
07:46 - useEffect with empty dependencies array
08:17 - useEffect with a single dependency
08:42 - useEffect with multiple dependencies
09:07 - useEffect run once in the initial render
09:23 - useEffect runs twice at the beginning
09:44 - useState as useEffect dependency
10:02 - Props as useEffect dependency
11:30 - Function as useEffect dependency
14:29 - Local variable as a useEffect dependency?
15:12 - useEffect is executed after the render
15:49 - Reactive dependencies in useEffect
16:53 - Constants and useEffect dependencies
17:38 - Updater functions in useEffect
18:49 - Using multiple useEffect hooks
19:19 - Cleanup function runs after unmount
20:30 - Cleanup function executes with previous values
20:51 - Cleanup timeouts intervals eventListeners fetch
21:09 - Infinite loop in useEffect
21:41 - Outro