Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

❌ Avoid listening for ref changes with useEffect() in React. ✅ Instead use a ref callback function.

_georgemoller's profile picture

George Moller

118,137 subscribers

101,654 görüntüleme • 3 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

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

Hey there 👋 Friendly reminder that I have more than 100 infographics and video animations just like this one. Check them out ↓

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

Hey there 👋 Friendly reminder that I have more than 100 infographics and video animations just like this one. Check them out ↓

Ritika kaur profil fotoğrafı
Ritika kaur3 yıl önce

Great job, George! It's always nice to discover new possibilities. Thanks!

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

Thanks Ritika, yes this is a pain point most react developers have, so I wanted so share some content around it.

waqar ahmed profil fotoğrafı
waqar ahmed3 yıl önce

👍 I have wasted hours with ref current.

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

We have all been there I think 😅

pavi2410 profil fotoğrafı
pavi24103 yıl önce

This is great

Amit profil fotoğrafı
Amit3 yıl önce

Very useful tip for improving code and its performance!

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

Glad you found vale in the tweet Amit!

Shalini Tewari profil fotoğrafı
Shalini Tewari3 yıl önce

Amazing tip for developers!

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

Glad you found value in the video Shalini!

Benzer Videolar

⚛️ Use callback ref functions instead of useEffect (when possible) ↓
0:34

⚛️ Use callback ref functions instead of useEffect (when possible) ↓

George Moller

94,101 görüntüleme • 1 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,450 görüntüleme • 7 ay ö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 • 3 yıl ö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 • 3 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 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

❌ 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,805 görüntüleme • 3 yıl önce

⚛️ Future React tip ↓ ❌ Omitting useEffect dependencies usually leads to hard-to-find bugs. ✅ Having said that, there are use cases when you need to run an effect only when reactive parts of the useEffect changes ↓ Extract non-reactive parts with useEffectEvent()
0:49

⚛️ Future React tip ↓ ❌ Omitting useEffect dependencies usually leads to hard-to-find bugs. ✅ Having said that, there are use cases when you need to run an effect only when reactive parts of the useEffect changes ↓ Extract non-reactive parts with useEffectEvent()

George Moller

78,174 görüntüleme • 3 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,872 görüntüleme • 2 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,670 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,976 görüntüleme • 3 yıl önce

❌ 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 • 3 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 using objects as dependencies in React.useEffect() ✅ Instead use the primitive keys
0:39

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

George Moller

43,042 görüntüleme • 1 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,399 görüntüleme • 1 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,443 görüntüleme • 3 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,316 görüntüleme • 7 ay ö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 • 3 yıl ö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,944 görüntüleme • 1 yıl önce