Mastering useEffect: Beware of depending on values you set

preview_player
Показать описание
We start taming React's useEffect by laying down some rules because misusing useEffect can cause serious issues with React applications on NextJS, Vite, or Create React App. Rule number one is to avoid depending on values we set.

#shorts #react #useeffect #nextjs #nextjs13
  1. Jack Herrington
  2. useeffect react hook
  3. reactjs useeffect
  4. useeffect dependencies
  5. next 13
  6. nextjs 13
Рекомендации по теме
Mastering useEffect: Beware 0:00:54

Mastering useEffect: Beware of depending on values you set

Mastering useEffect: Avoid 0:00:38

Mastering useEffect: Avoid Using useEffect!

Mastering useEffect: Avoid 0:00:59

Mastering useEffect: Avoid Race Conditions

Mastering useEffect: What 0:00:55

Mastering useEffect: What Goes In Dependency Arrays

Mastering useEffects: Avoid 0:01:00

Mastering useEffects: Avoid Functions as Dependencies

Mastering useEffects: Arrays 0:00:54

Mastering useEffects: Arrays and Objects as Dependencies

Beware of Race 0:01:00

Beware of Race Conditions in UseEffect! ⚠️

Stop Making This 0:00:40

Stop Making This Mistake with the useEffect React Hook! #shorts

useEffect in 60 0:00:56

useEffect in 60 seconds #shorts #reactjs

Fix React useEffect 0:00:34

Fix React useEffect running twice in React 18

Debugging useEffect Issues 0:01:00

Debugging useEffect Issues Made Simple

Why you probably 0:10:14

Why you probably do not need useEffect

You should Avoid 0:15:53

You should Avoid these React useEffect Mistakes

React useEffect in 0:00:54

React useEffect in 60 seconds #shorts

React Hooks [2] 0:00:57

React Hooks [2] : What is useEffect() ?

React's useEffect hook 0:13:18

React's useEffect hook always confuses me

Cleanup function useEffect 0:00:48

Cleanup function useEffect - React Interview Question #reactjs #shorts

useMemo, When and 0:00:59

useMemo, When and Why You Need It

Why is my 0:00:24

Why is my useEffect running twice? #shorts

useEffect react hook 0:01:00

useEffect react hook - React Interview Question #reactjs #shorts

React useEffect function 0:00:57

React useEffect function as a dependency

What is second 0:00:42

What is second argument in useEffect hook | useEffect Hook | React Hooks

Usestate and Useeffect 0:07:47

Usestate and Useeffect Mistakes - Avoid Them

UseEffect Mistakes Every 0:18:05

UseEffect Mistakes Every Beginner Should Avoid

Комментарии
Автор

"beware of depending on values that you set" also sounds like some eastern philosophy

Yusuf-okrk
Автор

setInterval and setTimeout on React have been always messy to implement. Every time I need to work with those methods, I need to be very careful because it's not intuitive for remembering. I don't like React mental model cause of that, so for personal projects I'm moving to SolidJS, where timer methods become intuitive again.

webblocksapp
Автор

Once spent like 5 hours trying to find a way to solve EXACTLY this problem until i finally poured through the docs to find the functional setState method.

owenjones
Автор

Should be spending more time in the docs. I wasted lots of time by using direct update and not utilizing the clean-up functions. Thanks so much for this.

aydzz
Автор

I did not quite understand what the return function of a `useEffect` hook was supposed to do. Now I do, and I have always needed it without even knowing. 😀😆

Thank you.

cyonii
Автор

just pasted a screenshot of the initial code into chatgpt and it suggested the correct revised code!

wealthassistant
Автор

What is meant here by a "stale closure"?

ttncmok
Автор

What's the theme and style of your vscode!

surajpokhrel
Автор

Shouldn’t count be set as a dependency?

noy
Автор

This is great. Is there a way to save these shorts for quick reference?

nitinupadhyay
Автор

The cleanup function doesn't cause any re-render, which means the component will no longer update any state. So How does the callback function runs again even we didn't watch for any changes?

dotacontent