Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

❌ 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 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von George Moller
George Mollervor 2 Jahren

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

Profilbild von thgmhz
thgmhzvor 2 Jahren

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

Profilbild von Michael Lynch
Michael Lynchvor 2 Jahren

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.

Profilbild von George Moller
George Mollervor 2 Jahren

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

Profilbild von Marco Pfeiffer
Marco Pfeiffervor 2 Jahren

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.

Profilbild von James Vanderzon
James Vanderzonvor 2 Jahren

just avoid React 🤪

Profilbild von George Moller
George Mollervor 2 Jahren

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

Profilbild von Geoffrey Shepard
Geoffrey Shepardvor 2 Jahren

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

Profilbild von George Moller
George Mollervor 2 Jahren

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

Profilbild von Shripal Soni
Shripal Sonivor 2 Jahren

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

Profilbild von George Moller
George Mollervor 2 Jahren

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

Ähnliche Videos

❌ 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 Aufrufe • vor 1 Jahr

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

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 1 Jahr

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

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

❌ 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 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. ↓
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 Aufrufe • vor 1 Jahr

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

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 4 Monaten

❌ 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 Aufrufe • vor 4 Monaten

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

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 Aufrufe • vor 3 Monaten

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

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

"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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Monat

❌ 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 Aufrufe • vor 4 Monaten