Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

George Moller

119,066 subscribers

214,951 görüntüleme • 2 yıl önce •via X (Twitter)

Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

10 Yorum

George Moller profil fotoğrafı

George Moller2 yıl önce

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 profil fotoğrafı

George Moller2 yıl önce

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 profil fotoğrafı

Dev Mamba2 yıl önce

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 profil fotoğrafı

George Moller2 yıl önce

Thanks! glad you found it useful!

happydecoder profil fotoğrafı

happydecoder2 yıl önce

I do this everytime

George Moller profil fotoğrafı

George Moller2 yıl önce

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

Pavel Romanov profil fotoğrafı

Pavel Romanov2 yıl önce

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 profil fotoğrafı

George Moller2 yıl önce

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 profil fotoğrafı

Sreehari jayaraj2 yıl önce

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

George Moller profil fotoğrafı

George Moller2 yıl önce

Agree!

Benzer Videolar

⚛️ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 1 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 4 ay önce

❌ 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 görüntüleme • 1 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 1 yıl önce

❌ 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 görüntüleme • 1 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 2 yıl önce

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,535 görüntüleme • 7 ay önce

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 görüntüleme • 3 yıl önce

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

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

George Moller

152,253 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

❌ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 4 ay önce

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

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

Bandros

14,738 görüntüleme • 1 ay önce

🎉 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,200 görüntüleme • 1 yıl önce