Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

George Moller

119,099 subscribers

137,429 Aufrufe • vor 2 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von George Moller

George Mollervor 2 Jahren

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

Profilbild von George Moller

George Mollervor 2 Jahren

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

Profilbild von Dominik 🔮

Dominik 🔮vor 2 Jahren

It would be cool if you could recommend importing from '@tanstack/react-query' instead of just 'react-query'. We've moved to the TanStack umbrella over a year ago.

Profilbild von George Moller

George Mollervor 2 Jahren

Will do Dominik!

Profilbild von Akhil 17

Akhil 17vor 2 Jahren

But using the same query inside dashboard will trigger another api call right?

Profilbild von George Moller

George Mollervor 2 Jahren

Nope, it only triggers another api call if the data is not already in the cache.

Profilbild von Pavel Romanov

Pavel Romanovvor 2 Jahren

Love this concept and react-query in general! First time I saw it was in this great article:

Profilbild von MUIZ

MUIZvor 2 Jahren

I use Redux for state management. React query look simpler and reduces redux broiler plate. Does react query works with React Native? Any cons I should be aware of?

Profilbild von Oury Tenguella

Oury Tenguellavor 2 Jahren

State colocation, right ?

Profilbild von Nikki Siapno

Nikki Siapnovor 2 Jahren

Agree, important tip George!

Ähnliche Videos

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

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

George Moller

177,627 Aufrufe • vor 1 Jahr

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

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

George Moller

130,061 Aufrufe • vor 2 Jahren

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

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

George Moller

57,237 Aufrufe • vor 4 Monaten

💡React tip: Use a custom hook to handle array states in your components

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,681 Aufrufe • vor 2 Jahren

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Real World React

32,739 Aufrufe • vor 3 Jahren

"How to share state between React client components with a parent server component?" 👇

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

50,550 Aufrufe • vor 1 Jahr

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

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

George Moller

48,311 Aufrufe • vor 1 Jahr

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

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

George Moller

152,253 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.

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

Day 8: React Server Components

Day 8: React Server Components

srgm

16,570 Aufrufe • vor 11 Monaten

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

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

George Moller

214,951 Aufrufe • vor 2 Jahren

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,296 Aufrufe • vor 4 Monaten

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

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

George Moller

206,841 Aufrufe • vor 1 Jahr

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

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

❌ 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. ↓

❌ 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

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

George Moller

24,702 Aufrufe • vor 2 Jahren

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Evan Bacon 🥓

233,085 Aufrufe • vor 3 Jahren

⚛️ How I like to name React components ↓

⚛️ How I like to name React components ↓

George Moller

39,480 Aufrufe • vor 1 Jahr

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

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

George Moller

50,727 Aufrufe • vor 4 Monaten

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

Ryan Toronto

378,375 Aufrufe • vor 3 Jahren