Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

❌ 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 Aufrufe • vor 3 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von George Moller
George Mollervor 3 Jahren

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

Profilbild von George Moller
George Mollervor 3 Jahren

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

Profilbild von Ritika kaur
Ritika kaurvor 3 Jahren

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

Profilbild von George Moller
George Mollervor 3 Jahren

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

Profilbild von waqar ahmed
waqar ahmedvor 3 Jahren

👍 I have wasted hours with ref current.

Profilbild von George Moller
George Mollervor 3 Jahren

We have all been there I think 😅

Profilbild von pavi2410
pavi2410vor 3 Jahren

This is great

Profilbild von Amit
Amitvor 3 Jahren

Very useful tip for improving code and its performance!

Profilbild von George Moller
George Mollervor 3 Jahren

Glad you found vale in the tweet Amit!

Profilbild von Shalini Tewari
Shalini Tewarivor 3 Jahren

Amazing tip for developers!

Profilbild von George Moller
George Mollervor 3 Jahren

Glad you found value in the video Shalini!

Ähnliche Videos

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

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

George Moller

94,101 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 7 Monaten

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 3 Jahren

⚛️ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 7 Monaten

❌ 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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 1 Jahr