Загрузка видео...

Не удалось загрузить видео

На главную

❌ 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 просмотров • 2 лет назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля George Moller
George Moller2 лет назад

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

Фото профиля thgmhz
thgmhz2 лет назад

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

Фото профиля Michael Lynch
Michael Lynch2 лет назад

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
George Moller2 лет назад

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

Фото профиля Marco Pfeiffer
Marco Pfeiffer2 лет назад

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
James Vanderzon2 лет назад

just avoid React 🤪

Фото профиля George Moller
George Moller2 лет назад

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

Фото профиля Geoffrey Shepard
Geoffrey Shepard2 лет назад

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

Фото профиля George Moller
George Moller2 лет назад

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

Фото профиля Shripal Soni
Shripal Soni2 лет назад

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

Фото профиля George Moller
George Moller2 лет назад

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

Похожие видео

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 4 месяцев назад

❌ 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 просмотров • 4 месяцев назад

❌ 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 просмотров • 2 лет назад

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 просмотров • 3 месяцев назад

❌ 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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

"Complex workflows in compact form" A visual introduction to the new Linear Mobile app by Gavin Nelson.
0:54

"Complex workflows in compact form" A visual introduction to the new Linear Mobile app by Gavin Nelson.

Linear

44,421 просмотров • 1 год назад

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 просмотров • 1 месяц назад

❌ 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 просмотров • 4 месяцев назад