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 次观看

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

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

460,509 次观看

❌ 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 次观看

📣 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 次观看

❌ 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 次观看

❌ 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 次观看

🚫 𝗔𝘃𝗼𝗶𝗱 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 次观看

🧪 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 次观看

⚛️ 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 次观看

⚛️ 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 次观看

⚛️ 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 次观看

⚛️ 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 次观看

⚛️ 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 次观看

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 次观看 • 5 个月前

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

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

123,862 次观看 • 5 个月前

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

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

342,359 次观看 • 2 年前

❌ 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 次观看 • 1 年前

❌ 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 次观看 • 6 个月前

❌ 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 次观看 • 2 年前

❌ 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 次观看 • 5 个月前

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

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

152,396 次观看 • 1 年前

❌ 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 次观看 • 1 年前

❌ 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 次观看 • 2 年前

❌ 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 次观看 • 6 个月前

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

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

51,286 次观看 • 5 个月前

❌ 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 次观看 • 2 年前

⚛️ 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 次观看 • 5 个月前

❌ 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 次观看 • 2 年前

❌ 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 次观看 • 2 年前

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

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

94,079 次观看 • 1 年前

⚛️ 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 次观看 • 1 年前

⚛️ 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 次观看 • 1 年前