Mastering React's useEffect

Jack Herrington · 183K views · 2022 · 25:20

Open on YouTube

Web developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about useEffect re-runs, dependency arrays and unexpected re-renders.

Recommended by 2 people across 2 different months, 2022 to 2022.

What it is

A 25-minute React tutorial by Jack Herrington on writing useEffect hooks that behave predictably. He builds a useFetch hook and walks through dependency pitfalls such as object and function dependencies, references, cleanup functions, and state mutated inside the effect.

What people said

Recommends Deniz Karadağ · 2022-03 · Stack Overflow · on “React state management - Rerenders with useEffect”

if you want to trigger a rerender, you can use dependency array of useEffect. So, if you want to trigger useEffect when computer or user point changes, add them inside your useEffect dependency array. This guy explains it perfectly: [this video]

Recommends Simon1 · 2022-09 · Stack Overflow · on “Why does the POST stop working when setting state in useEffect?”

This fixed my issue. Thank you. I also came across this YouTube video today that explains ```useEffect``` very well. [this video]

Cites John · 2022-06 · Stack Overflow · on “Why runs the component 2 times with useEffect?”

On the screen I get : Hello { "name" : "Jack" } In console I get: App rendering useFetch useEffect App rendering Because what I have seen in the console , I think App.js must have ran 2 times and useFetch must have ran 1 time . I think this is behind : App.js calls useFetch and writes on console that App rendering . App.js does NOT wait useFetch to complete, so Hello undefined is on the screen . BUT we don't see undefined on the screen , because it is so fast and it goes away -> because of 2. step : While App.js writes on console and displays undefined on screen , useFetch is running . When useFetch completes its running it gives back the correct object ( Jack ) App.js component runs again a