正在加载视频...

视频加载失败

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

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

George Moller

119,066 subscribers

214,951 次观看 • 2 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

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 ↓

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 ↓

Dev Mamba 的头像

Dev Mamba2 年前

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!

George Moller 的头像

George Moller2 年前

Thanks! glad you found it useful!

happydecoder 的头像

happydecoder2 年前

I do this everytime

George Moller 的头像

George Moller2 年前

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

Pavel Romanov 的头像

Pavel Romanov2 年前

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

George Moller 的头像

George Moller2 年前

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.

Sreehari jayaraj 的头像

Sreehari jayaraj2 年前

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

George Moller 的头像

George Moller2 年前

Agree!

相关视频

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

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

George Moller

24,702 次观看 • 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

50,727 次观看 • 4 个月前

❌ 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,311 次观看 • 1 年前

❌ 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 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,599 次观看 • 2 年前

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

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

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,601 次观看 • 7 个月前

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 👉

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 次观看 • 3 年前

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

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

George Moller

152,253 次观看 • 1 年前

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

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

Jay Hack

122,213 次观看 • 3 年前

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

❌ 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,237 次观看 • 4 个月前

🎉 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

🎉 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,253 次观看 • 1 年前

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

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

Bandros

14,738 次观看 • 1 个月前