Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

_georgemoller's profile picture

George Moller

119,007 subscribers

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

Bilim & TeknolojiEğitimKomedi
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

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

I've been working professionally with React and JavaScript 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 ↓

PATRYK profil fotoğrafı
PATRYK1 yıl önce

Don’t follow this advice. It makes your code less readable, it confuses other developers and your IDE. This level of abstraction is not helping anybody. Just use early return.

Vlad Tansky profil fotoğrafı
Vlad Tansky1 yıl önce

Nice, but wouldn’t it be easier to read code with if(!condition) throw new Error(“some message”) Instead of creating abstraction?

xavi profil fotoğrafı
xavi1 yıl önce

Just use fail fast/ early return and you’ll avoid that level of abstraction.

dcodes 🦀 profil fotoğrafı
dcodes 🦀1 yıl önce

just use zod

Hamilton Greene 🐷🦔 profil fotoğrafı
Hamilton Greene 🐷🦔1 yıl önce

I don't like this - you're hiding important control flow inside deeply nested functions. The caller must now know that implicitly your functions use exception control flow and throw on certain conditions (also hidden). Guards (if not x return) are usually better.

Remus profil fotoğrafı
Remus1 yıl önce

Dude an "any" wrapper function? That's scares the shit out of me

Proziam profil fotoğrafı
Proziam1 yıl önce

I have to know, what are you using for the animations and graphics? Looks clean

Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷 profil fotoğrafı
Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷1 yıl önce

💯 This makes it super hard to read the code

Seve profil fotoğrafı
Seve1 yıl önce

"early bail" or "early return" is far better terminology

Benzer Videolar

❌ 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,101 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,781 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,349 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,206 görüntüleme • 4 ay ö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,429 görüntüleme • 2 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,069 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,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

❌ 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

❌ 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,611 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 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

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

We got you covered 🤝 Can Tell us what teams to avoid ❌ Use code “Welcome” for 15% off ✅ 🛒 Order now -
0:53

We got you covered 🤝 Can Tell us what teams to avoid ❌ Use code “Welcome” for 15% off ✅ 🛒 Order now -

Mystery Champions

69,700 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

🚨UPAMECANO TOTY FLASHBACK REVIEW🚨 ✅Use Tah instead🇩🇪 Final verdict: CLEAR SKIP❌
0:39

🚨UPAMECANO TOTY FLASHBACK REVIEW🚨 ✅Use Tah instead🇩🇪 Final verdict: CLEAR SKIP❌

FUT Coin Shop

29,239 görüntüleme • 4 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 • 2 yıl önce

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.
0:47

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.

George Moller

21,380 görüntüleme • 1 yıl önce

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇
0:48

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,331 görüntüleme • 2 yıl önce

Hard to jump through ❌ To high ✅
1:02

Hard to jump through ❌ To high ✅

Ana

136,245 görüntüleme • 1 ay önce