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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

118,831 subscribers

301,101 просмотров • 2 лет назад •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

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

Фото профиля George Moller

George Moller2 лет назад

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics just like this one. Check them out ↓

Фото профиля Daniel

Daniel2 лет назад

Why go through all that when you can simply have a helper function with a normal switch case that returns the copy?

Фото профиля George Moller

George Moller2 лет назад

I like this pattern because its a more React-ish way of conditionally render elements.

Фото профиля pavi2410

pavi24102 лет назад

I think this is cleaner and much readable this way. No new library is introduced.

Фото профиля George Moller

George Moller2 лет назад

I like this approach too! Either this or the switch component for me. Ternary expressions in jsx are a mess.

Фото профиля anand tiwari

anand tiwari2 лет назад

From readability perspective looking nice and clean. 👌 As we already have switch case in Js that can used inside a function and i prefer using that. Instead of creating switch functionality using react components & props.

Фото профиля George Moller

George Moller2 лет назад

That's a valid approach as well Anand!

Фото профиля Irvin Zhan

Irvin Zhan2 лет назад

You lose some Typescript type safety here. Plus this feels like unnecessary layers of abstraction. Just use a variable.

Фото профиля Piotr Monwid-Olechnowicz

Piotr Monwid-Olechnowicz2 лет назад

This is very bad advice in a pretty video. Branches in ternaries aren't eagerly evaluated, and children are. This crashes ⬇️ with "cannot read properties of null". <Case condition={data == null}>Loading...</Case> <Case condition={data != null}>{data.text}</Case>

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

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

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

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

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

❌ 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 your components to extend them ✅ Instead use composition

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

51,206 просмотров • 4 месяцев назад

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

❌ 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 prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,323 просмотров • 1 год назад

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

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

George Moller

206,841 просмотров • 1 год назад

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,951 просмотров • 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. ↓

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

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

Made this kind of video for the first time 👀🔥 Today : - mid sem day 2 (English communication) - started learning React - learned card components, css style, props, conditional rendering, render list Will carry on tonight...

Made this kind of video for the first time 👀🔥 Today : - mid sem day 2 (English communication) - started learning React - learned card components, css style, props, conditional rendering, render list Will carry on tonight...

Sam ☕

33,668 просмотров • 8 месяцев назад

🚀 I got React Server Components rendering in Bun ‼️ ‼️ Wrote up my own little next-like framework that uses for bundling! ✦ 70ms cold boot (bundling react + pages and components) ✦ 1-3ms to render a page I'm coming for you, Next 🙈

🚀 I got React Server Components rendering in Bun ‼️ ‼️ Wrote up my own little next-like framework that uses for bundling! ✦ 70ms cold boot (bundling react + pages and components) ✦ 1-3ms to render a page I'm coming for you, Next 🙈

leah lundqvist

57,881 просмотров • 2 лет назад

❌ Avoid multiple state variables to track status. ✅ Instead use enums.

❌ Avoid multiple state variables to track status. ✅ Instead use enums.

George Moller

152,349 просмотров • 1 год назад

❌ Conditional rendering loses form state in React. ✅ React 19's Activity API preserves it. e.g. Switch between steps → your data stays. Effects cleanup automatically → no wasted resources.

❌ Conditional rendering loses form state in React. ✅ React 19's Activity API preserves it. e.g. Switch between steps → your data stays. Effects cleanup automatically → no wasted resources.

George Moller

74,003 просмотров • 5 месяцев назад

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

256,611 просмотров • 2 лет назад

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

120,830 просмотров • 2 лет назад

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓

George Moller

124,069 просмотров • 2 лет назад

⚛️ How to use conditional types in TypeScript and React ↓

⚛️ How to use conditional types in TypeScript and React ↓

George Moller

42,404 просмотров • 1 год назад

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2

George Moller

57,402 просмотров • 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.

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