Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

_georgemoller's profile picture

George Moller

119,066 subscribers

214,951 Aufrufe • vor 2 Jahren •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 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 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 Dev Mamba
Dev Mambavor 2 Jahren

That's a very nice example of using custom hooks! Custom hooks are a powerful way to encapsulate logic and reuse it across different components, making our code more efficient and easier to maintain. Well done!

Profilbild von George Moller
George Mollervor 2 Jahren

Thanks! glad you found it useful!

Profilbild von happydecoder
happydecodervor 2 Jahren

I do this everytime

Profilbild von George Moller
George Mollervor 2 Jahren

Glad to read this, it will make changes in the future feel like a breeze 😎

Profilbild von Pavel Romanov
Pavel Romanovvor 2 Jahren

I had a tough time with architectural topics when I was a new dev. Appreciate the content. It would be great to go into more depth so we can understand the reasoning behind these abstractions

Profilbild von George Moller
George Mollervor 2 Jahren

Makes sense Pavel! will try to make more content around this. The main reasoning behind this abstractions is that loosely coupled modules/systems reduce the effort needed to make changes.

Profilbild von Sreehari jayaraj
Sreehari jayarajvor 2 Jahren

this is one of the best thing you should do while building react apps

Profilbild von George Moller
George Mollervor 2 Jahren

Agree!

Ähnliche Videos

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓
0:30

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

George Moller

24,702 Aufrufe • vor 2 Jahren

❌ 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 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 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 Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
0:21

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

George Moller

120,828 Aufrufe • vor 2 Jahren

❌ 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

❌ 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 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 difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.
0:21

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

Running a business already comes with a lot of stress, managing payments shouldn't. Now, running your business globally is simpler with Platnova @PlatnovaBusiness . Scale your global dreams with tools that make payments effortless. With Platnova Business, you can: ✅ Create business accounts in USD, GBP, EUR, and NGN ✅ Get virtual and physical cards for team expenses ✅ Create invoices and payment links ✅ Receive and send payments across the globe via different payment methods ✅ Automate payment workflows ✅ Manage your team all from one dashboard ✅ Enjoy higher transaction limits with OTC payments It's time to level up and grow your business without borders. Download the app and sign up your business today. 🥳 #Platnova #PlatnovaBusiness
1:09

Running a business already comes with a lot of stress, managing payments shouldn't. Now, running your business globally is simpler with Platnova @PlatnovaBusiness . Scale your global dreams with tools that make payments effortless. With Platnova Business, you can: ✅ Create business accounts in USD, GBP, EUR, and NGN ✅ Get virtual and physical cards for team expenses ✅ Create invoices and payment links ✅ Receive and send payments across the globe via different payment methods ✅ Automate payment workflows ✅ Manage your team all from one dashboard ✅ Enjoy higher transaction limits with OTC payments It's time to level up and grow your business without borders. Download the app and sign up your business today. 🥳 #Platnova #PlatnovaBusiness

Isabella Esther Georgewill

300,535 Aufrufe • vor 7 Monaten

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉
0:54

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Real World React

32,739 Aufrufe • vor 3 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

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️
0:24

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️

Jay Hack

122,213 Aufrufe • vor 3 Jahren

❌ 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

❌ 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

Mixing ✅ Transition ✅ Pitch ✅ Jog Wheel ❌ Bass 2 Bass Mixing 🔥👌
1:14

Mixing ✅ Transition ✅ Pitch ✅ Jog Wheel ❌ Bass 2 Bass Mixing 🔥👌

Bandros

14,738 Aufrufe • vor 1 Monat

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6
0:22

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6

Andrew Prifer

66,200 Aufrufe • vor 1 Jahr