George Moller's banner
George Moller's profile picture

George Moller

@_georgemoller • 118,936 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,193 views

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

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

459,671 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,057 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,600 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,848 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,479 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

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

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

⚛️ State relocation is one of the simplest ways to avoid expensive components from being unnecesary rendered ↓

⚛️ State relocation is one of the simplest ways to avoid expensive components from being unnecesary rendered ↓

39,935 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,567 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,296 views • 4 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,451 views • 4 months 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

73,981 views • 4 months 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 • 4 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,274 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,841 views • 1 year 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

50,727 views • 4 months 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,237 views • 4 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,253 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,627 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,599 views • 2 years 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,951 views • 2 years 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,781 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,601 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

93,875 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,528 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

⚛️ Keep UI responsive during expensive renders with useTransition(): React prioritizes user input over transitions ↓
0:50
_georgemoller's profile picture

⚛️ Keep UI responsive during expensive renders with useTransition(): React prioritizes user input over transitions ↓

George Moller

30,325 views • 4 months ago

⚛️ If you want cleaner event handlers in your jsx in React you can use currying ↓
0:30
_georgemoller's profile picture

⚛️ If you want cleaner event handlers in your jsx in React you can use currying ↓

George Moller

142,607 views • 2 years ago