Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

_georgemoller's profile picture

George Moller

119,079 subscribers

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

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

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

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

thgmhz profil fotoğrafı
thgmhz2 yıl önce

in some scenarios, you can avoid conditionals setting an object and getting the value by association:

Michael Lynch profil fotoğrafı
Michael Lynch2 yıl önce

Personally, I wouldn't introduce a library for something that simple. Nothing wrong with a basic switch or if...else statement. Just don't use a nested ternary.

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

For most cases I use maps, for more complex pattern matching I use ts-pattern.

Marco Pfeiffer profil fotoğrafı
Marco Pfeiffer2 yıl önce

Just use If conditions. No library that everyone reading has to learn, no overhead, more readable than both examples. Maybe a bit longer, but if you have a lot of those conditions, then the approach is wrong anyways. A separate Map would be in order.

James Vanderzon profil fotoğrafı
James Vanderzon2 yıl önce

just avoid React 🤪

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

😅 what library or framework do you use in the frontend? (If any)

Geoffrey Shepard profil fotoğrafı
Geoffrey Shepard2 yıl önce

Nice explanation. I will say the hardest thing to read might be the "ss" font there in the word "address"

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

haha font ligatures right? I have mix feeling about them, sometimes I like them, sometimes I don't...

Shripal Soni profil fotoğrafı
Shripal Soni2 yıl önce

I didn't know about `ts-pattern` before. Thanks for sharing about it, George 🙌

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

It's a great solution for complex pattern matching for sure! try it out!

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

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

❌ 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

❌ 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 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 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,599 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,253 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,237 görüntüleme • 4 ay ö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

❌ 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

Back Pages Tonight react to Eddie Howe saying match officials ''have begun to avoid taking difficult decisions'' following Newcastle's win against Aston Villa in the FA Cup ❌
1:50

Back Pages Tonight react to Eddie Howe saying match officials ''have begun to avoid taking difficult decisions'' following Newcastle's win against Aston Villa in the FA Cup ❌

Sky Sports News

92,407 görüntüleme • 3 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

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

Everything in life follows a pattern. 🔃 When you recognize the pattern, fear disappears. When you learn to use the pattern, you gain power. When you create the pattern, you dominate. #UnleashthePowerWithin
1:22

Everything in life follows a pattern. 🔃 When you recognize the pattern, fear disappears. When you learn to use the pattern, you gain power. When you create the pattern, you dominate. #UnleashthePowerWithin

Tony Robbins

60,892 görüntüleme • 1 yıl önce

In Canada, use VPN & incognito tabs to book flights so you can avoid full price! 🇨🇦✈️
1:16

In Canada, use VPN & incognito tabs to book flights so you can avoid full price! 🇨🇦✈️

RTN

98,471 görüntüleme • 1 ay önce

#Serbia "Glory to You, Lord!" Despite living in extremely difficult conditions, Serbs in Kosovo* are celebrating Christmas Eve.
0:41

#Serbia "Glory to You, Lord!" Despite living in extremely difficult conditions, Serbs in Kosovo* are celebrating Christmas Eve.

The National Independent

52,537 görüntüleme • 1 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