George Moller's banner

George Moller

@_georgemoller • 118,562 subscribers

Staff Front End Engineer @shopify. Learning, building, and sharing my journey.

Shorts

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

373,312 görüntüleme

❌ Avoid using conditionals to render views in React ✅ Instead use Enums

❌ Avoid using conditionals to render views in React ✅ Instead use Enums

460,509 görüntüleme

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

170,096 görüntüleme

📣 Quick announcement: I put together an ebook with 30+ questions and answers to help you ace your next React interview (from beginner to advanced). Just comment on this tweet and I'll send it over 👇

📣 Quick announcement: I put together an ebook with 30+ questions and answers to help you ace your next React interview (from beginner to advanced). Just comment on this tweet and I'll send it over 👇

162,620 görüntüleme

❌ Prevent performance issues when showing large lists of data. ✅ Instead use Virtualization, only display what the user sees at any given time

❌ Prevent performance issues when showing large lists of data. ✅ Instead use Virtualization, only display what the user sees at any given time

133,849 görüntüleme

❌ Avoid resetting state when prop changes in an effect. ✅ Instead, use the key prop to tell react what makes the component reset its state.

❌ Avoid resetting state when prop changes in an effect. ✅ Instead, use the key prop to tell react what makes the component reset its state.

101,481 görüntüleme

🚫 𝗔𝘃𝗼𝗶𝗱 Using a full context value in every component can trigger unnecessary re-renders. ✅ 𝗜𝗻𝘀𝘁𝗲𝗮𝗱 Use 𝘤𝘰𝘯𝘵𝘦𝘹𝘵 𝘴𝘦𝘭𝘦𝘤𝘵𝘰𝘳𝘴 to pull only the data you need. This reduces re-renders and improves performance.

🚫 𝗔𝘃𝗼𝗶𝗱 Using a full context value in every component can trigger unnecessary re-renders. ✅ 𝗜𝗻𝘀𝘁𝗲𝗮𝗱 Use 𝘤𝘰𝘯𝘵𝘦𝘹𝘵 𝘴𝘦𝘭𝘦𝘤𝘵𝘰𝘳𝘴 to pull only the data you need. This reduces re-renders and improves performance.

52,973 görüntüleme

🧪 React testing tip: Avoid performing side effects in waitFor. Instead put side effects outside waitFor callbacks and use the callback for assertions only.

🧪 React testing tip: Avoid performing side effects in waitFor. Instead put side effects outside waitFor callbacks and use the callback for assertions only.

80,161 görüntüleme

⚛️ In React, rendering large lists or tables can be a drag on performance. The fix? Virtualization! the process of only rendering part of that large data set (just enough to fill the viewport). ✅ Improves rendering time significantly. ✅ Lowers memory consumption.

⚛️ In React, rendering large lists or tables can be a drag on performance. The fix? Virtualization! the process of only rendering part of that large data set (just enough to fill the viewport). ✅ Improves rendering time significantly. ✅ Lowers memory consumption.

55,288 görüntüleme

⚛️ React TIp: reuse logic by using custom hooks to attach event listeners ↓

⚛️ React TIp: reuse logic by using custom hooks to attach event listeners ↓

73,787 görüntüleme

⚛️ useEffect cheatsheet ↓ ❌ Thinking of useEffect as a lifecycle method. ✅ Thinking of useEffect as a mechanism to sync data (state/props) with systems that aren’t controlled by React.

⚛️ useEffect cheatsheet ↓ ❌ Thinking of useEffect as a lifecycle method. ✅ Thinking of useEffect as a mechanism to sync data (state/props) with systems that aren’t controlled by React.

64,827 görüntüleme

⚛️ I don't worry too much about re-renders in React. (unless I see performance issues) However, I do care about understanding how the rendering process works. ↓

⚛️ I don't worry too much about re-renders in React. (unless I see performance issues) However, I do care about understanding how the rendering process works. ↓

38,597 görüntüleme

⚛️ A common useEffect mistake I often see people make: ❌ Don't put event's logic in useEffect. ✅ Instead put it right in the event handler ↓

⚛️ A common useEffect mistake I often see people make: ❌ Don't put event's logic in useEffect. ✅ Instead put it right in the event handler ↓

32,067 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

161,415 görüntüleme • 5 ay önce

❌ Rendering 10,000 items at once ✅ Rendering only what's visible

❌ Rendering 10,000 items at once ✅ Rendering only what's visible

123,862 görüntüleme • 5 ay önce

⚛️ How to structure and organize a React application ( ) ↓

⚛️ How to structure and organize a React application ( ) ↓

342,359 görüntüleme • 2 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.

206,926 görüntüleme • 1 yıl önce

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

74,081 görüntüleme • 6 ay önce

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

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

301,111 görüntüleme • 2 yıl önce

❌ useMemo, useCallback, memo everywhere ✅ React Compiler handles it automatically React Compiler v1.0 is here. It analyzes your code at build time and adds memoization where needed.↓

❌ useMemo, useCallback, memo everywhere ✅ React Compiler handles it automatically React Compiler v1.0 is here. It analyzes your code at build time and adds memoization where needed.↓

62,751 görüntüleme • 5 ay önce

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

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

152,396 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.

177,645 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.

256,612 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

57,445 görüntüleme • 6 ay önce

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

51,286 görüntüleme • 5 ay önce

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

214,959 görüntüleme • 2 yıl önce

⚛️ How to structure a React project that scales: app/ → pages/ → features/ → shared/

⚛️ How to structure a React project that scales: app/ → pages/ → features/ → shared/

43,102 görüntüleme • 5 ay ö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.

185,805 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.

177,611 görüntüleme • 2 yıl önce

⚛️ Use callback ref functions instead of useEffect (when possible) ↓

⚛️ Use callback ref functions instead of useEffect (when possible) ↓

94,079 görüntüleme • 1 yıl önce

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

89,542 görüntüleme • 1 yıl önce

⚛️ If you are using fetch() in a useEffect, you probably want to watch this short video ↓

⚛️ If you are using fetch() in a useEffect, you probably want to watch this short video ↓

88,624 görüntüleme • 1 yıl önce