Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

❌ Avoid using objects as dependencies in React.useEffect() ✅ Instead use the primitive keys

_georgemoller's profile picture

George Moller

118,626 subscribers

43,042 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

George Moller profil fotoğrafı
George Moller1 yıl önce

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

SecurityPal profil fotoğrafı
SecurityPal1 yıl önce

“When something breaks, be transparent, own it, fix it. And it's really about how you respond to it.” @WilHarm3 (@craft_ventures) emphasizes the importance of transparency and responsiveness when things go wrong. Watch the episode here:

skylerdj👻 profil fotoğrafı
skylerdj👻1 yıl önce

or be toxic and wrap the object with `JSON.stringify()`

Gustavo AL. profil fotoğrafı
Gustavo AL.1 yıl önce

Good advice, but in this case you might not need an useEffect. Like this article of official documentation said, a useEffect is to synchronize external state (API, storage, DOM) with internal state of React.

Mohammad, the Dev one. profil fotoğrafı
Mohammad, the Dev one.1 yıl önce

Here,understanding the concept of passed by value and passed by reference shines. When we put an passed by reference item into the dependency array, it makes the useEffect to re-run on reach re-render. Good point 👍

Alejandro profil fotoğrafı
Alejandro1 yıl önce

if you use const {userId} = params everything should be the same no?

Ethan_AI Marketer for 𝕏 profil fotoğrafı
Ethan_AI Marketer for 𝕏1 yıl önce

Have you tried using primitive keys in your useEffect dependencies? It can really help avoid unnecessary re-renders. I’ve seen it make a big difference in performance.

nome profil fotoğrafı
nome1 yıl önce

i want a react job i am working in react since 2 years i have strong grip on react ,redux , tailwindcss,material ui ,ajax ,axios ,jsx , props , hooks ,state management , ui responsive design

Benzer Videolar

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓
0:32

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓

George Moller

124,086 görüntüleme • 2 yıl önce

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API
1:02

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,323 görüntüleme • 1 yıl önce

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
0:23

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

256,612 görüntüleme • 2 yıl önce

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
0:21

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

120,830 görüntüleme • 2 yıl önce

❌ Avoid multiple state variables to track status. ✅ Instead use enums.
0:22

❌ Avoid multiple state variables to track status. ✅ Instead use enums.

George Moller

152,381 görüntüleme • 1 yıl önce

❌ Adding state to useCallback dependencies. ✅ Instead, use functional setState. Stable callbacks, no stale closures, no unnecessary re-renders. Here's the pattern ↓
0:28

❌ Adding state to useCallback dependencies. ✅ Instead, use functional setState. Stable callbacks, no stale closures, no unnecessary re-renders. Here's the pattern ↓

George Moller

17,254 görüntüleme • 5 ay önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.
1:00

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

130,080 görüntüleme • 2 yıl önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.
0:46

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

177,645 görüntüleme • 1 yıl önce

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition
0:31

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

51,241 görüntüleme • 5 ay önce

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.
1:03

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.

George Moller

206,884 görüntüleme • 1 yıl önce

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.
0:40

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

301,111 görüntüleme • 2 yıl önce

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.
0:21

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

George Moller

185,802 görüntüleme • 2 yıl önce

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2
0:27

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2

George Moller

57,427 görüntüleme • 5 ay önce

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.
0:20

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

George Moller

177,601 görüntüleme • 2 yıl önce

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.
0:51

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,959 görüntüleme • 2 yıl önce

❌ Avoid deriving state in useEffect in React, this can create multiple unnecessary render phases. ✅ Instead derive the state directly in the event handler, this way you'll have one single render phase. ↓
0:29

❌ Avoid deriving state in useEffect in React, this can create multiple unnecessary render phases. ✅ Instead derive the state directly in the event handler, this way you'll have one single render phase. ↓

George Moller

33,474 görüntüleme • 1 yıl önce

❌ You 𝗺𝗶𝗴𝗵𝘁 not need a react form library ✅ Instead you can use the FormData API's
1:03

❌ You 𝗺𝗶𝗴𝗵𝘁 not need a react form library ✅ Instead you can use the FormData API's

George Moller

81,577 görüntüleme • 2 yıl önce

New tool that smooths out curves horizontally instead of vertically, or in other words smooths out the time Works on selected keys and multiple objects at a time. The smoothing strength is adjustable Can be useful for baked keys after retiming (such as mocap or space switching)
0:42

New tool that smooths out curves horizontally instead of vertically, or in other words smooths out the time Works on selected keys and multiple objects at a time. The smoothing strength is adjustable Can be useful for baked keys after retiming (such as mocap or space switching)

Martin

90,552 görüntüleme • 2 yıl önce

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.
0:34

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,439 görüntüleme • 2 yıl önce

Stop getting stuck in the bunker 😱❌⛳️ do this instead ✅
0:25

Stop getting stuck in the bunker 😱❌⛳️ do this instead ✅

Georgia Ball

177,108 görüntüleme • 1 yıl önce