Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

George Moller

118,831 subscribers

301,101 Aufrufe • vor 2 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von George Moller

George Mollervor 2 Jahren

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 ↓

Profilbild von Daniel

Danielvor 2 Jahren

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

Profilbild von George Moller

George Mollervor 2 Jahren

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

Profilbild von pavi2410

pavi2410vor 2 Jahren

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

Profilbild von George Moller

George Mollervor 2 Jahren

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

Profilbild von anand tiwari

anand tiwarivor 2 Jahren

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.

Profilbild von George Moller

George Mollervor 2 Jahren

That's a valid approach as well Anand!

Profilbild von Irvin Zhan

Irvin Zhanvor 2 Jahren

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

Profilbild von Piotr Monwid-Olechnowicz

Piotr Monwid-Olechnowiczvor 2 Jahren

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>

Ähnliche Videos

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

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

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

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

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

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

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

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

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

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

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

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

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

George Moller

152,349 Aufrufe • vor 1 Jahr

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

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

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

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

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

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

George Moller

42,404 Aufrufe • vor 1 Jahr

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

❌ 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