George Moller's banner
George Moller's profile picture

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 views

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

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

460,509 views

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

📣 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,618 views

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

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

🚫 𝗔𝘃𝗼𝗶𝗱 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 views

🧪 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 views

⚛️ 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 views

⚛️ 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 views

⚛️ 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 views

⚛️ 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 views

⚛️ 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 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

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

HD live stream
Exclusive private shows
1.2k viewers online

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 ↓
0:35
_georgemoller's profile picture

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

George Moller

161,415 views • 5 months ago

❌ Rendering 10,000 items at once ✅ Rendering only what's visible
0:35
_georgemoller's profile picture

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

George Moller

123,862 views • 5 months ago

⚛️ How to structure and organize a React application ( ) ↓
1:13
_georgemoller's profile picture

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

George Moller

342,359 views • 2 years ago

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.
1:03
_georgemoller's profile picture

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.

George Moller

206,884 views • 1 year ago

❌ 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.
0:22
_georgemoller's profile picture

❌ 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,081 views • 6 months ago

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.
0:40
_georgemoller's profile picture

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

George Moller

301,111 views • 2 years ago

❌ 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.↓
0:45
_georgemoller's profile picture

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

George Moller

62,751 views • 5 months ago

❌ Avoid multiple state variables to track status. ✅ Instead use enums.
0:22
_georgemoller's profile picture

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

George Moller

152,396 views • 1 year ago

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.
0:46
_georgemoller's profile picture

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

177,645 views • 1 year ago

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
0:23
_georgemoller's profile picture

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

George Moller

256,612 views • 2 years ago

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2
0:27
_georgemoller's profile picture

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2

George Moller

57,445 views • 6 months ago

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition
0:31
_georgemoller's profile picture

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

George Moller

51,286 views • 5 months ago

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.
0:51
_georgemoller's profile picture

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

George Moller

214,959 views • 2 years ago

⚛️ How to structure a React project that scales: app/ → pages/ → features/ → shared/
0:30
_georgemoller's profile picture

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

George Moller

43,102 views • 5 months ago

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.
0:21
_georgemoller's profile picture

❌ 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,805 views • 2 years ago

❌ 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
_georgemoller's profile picture

❌ 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,611 views • 2 years ago

⚛️ Use callback ref functions instead of useEffect (when possible) ↓
0:34
_georgemoller's profile picture

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

George Moller

94,079 views • 1 year ago

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓
0:32
_georgemoller's profile picture

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

George Moller

89,542 views • 1 year ago

⚛️ If you are using fetch() in a useEffect, you probably want to watch this short video ↓
0:52
_georgemoller's profile picture

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

George Moller

88,624 views • 1 year ago