正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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