Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

_georgemoller's profile picture

George Moller

119,099 subscribers

137,429 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

George Moller profil fotoğrafı
George Moller2 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 video animations just like this one. Check them out ↓

George Moller profil fotoğrafı
George Moller2 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 video animations just like this one. Check them out ↓

Dominik 🔮 profil fotoğrafı
Dominik 🔮2 yıl önce

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.

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

Will do Dominik!

Akhil 17 profil fotoğrafı
Akhil 172 yıl önce

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

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

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

Pavel Romanov profil fotoğrafı
Pavel Romanov2 yıl önce

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

MUIZ profil fotoğrafı
MUIZ2 yıl önce

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?

Oury Tenguella profil fotoğrafı
Oury Tenguella2 yıl önce

State colocation, right ?

Nikki Siapno profil fotoğrafı
Nikki Siapno2 yıl önce

Agree, important tip George!

Benzer Videolar

❌ 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,627 görüntüleme • 1 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,061 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,237 görüntüleme • 4 ay önce

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

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

George Moller

119,681 görüntüleme • 2 yıl önce

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 👉
0:54

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

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

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

Alex Sidorenko

50,550 görüntüleme • 1 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,311 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,253 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,781 görüntüleme • 2 yıl önce

Day 8: React Server Components
4:53

Day 8: React Server Components

srgm

16,570 görüntüleme • 11 ay ö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,951 görüntüleme • 2 yıl önce

❌ 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 ↓
0:35

❌ 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 görüntüleme • 4 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,841 görüntüleme • 1 yıl ö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 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

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

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

George Moller

24,702 görüntüleme • 2 yıl önce

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 ↓
6:35

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

⚛️ How I like to name React components ↓
0:44

⚛️ How I like to name React components ↓

George Moller

39,480 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

50,727 görüntüleme • 4 ay önce

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

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