George Moller's banner
George Moller's profile picture

George Moller

@_georgemoller • 117,797 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,528 views

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

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

462,364 views

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

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

219,773 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,154 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,668 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,863 views

❌ Avoid fetching data in useEffect ✅ Instead use libraries like react-query that have a strong built-in mechanism for data fetching.

❌ Avoid fetching data in useEffect ✅ Instead use libraries like react-query that have a strong built-in mechanism for data fetching.

113,797 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,491 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,163 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,792 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,833 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,601 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,072 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,625 views • 8 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,897 views • 8 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,473 views • 3 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

207,021 views • 2 years 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,147 views • 3 years 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,697 views • 3 years 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,399 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,710 views • 2 years 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,295 views • 9 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,976 views • 3 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

63,006 views • 8 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 • 3 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,625 views • 3 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,450 views • 9 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,316 views • 8 months 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,101 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 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,620 views • 3 years 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,781 views • 1 year ago