George Moller's banner

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

462,364 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 ↓

219,773 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,154 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,668 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,863 görüntüleme

❌ 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 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,491 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,163 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,792 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,833 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,601 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,072 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,625 görüntüleme • 8 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,897 görüntüleme • 8 ay önce

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

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

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

207,021 görüntüleme • 2 yıl ö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,147 görüntüleme • 3 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,697 görüntüleme • 3 yıl önce

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

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

152,399 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,710 görüntüleme • 2 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,295 görüntüleme • 9 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,976 görüntüleme • 3 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.↓

63,006 görüntüleme • 8 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 • 3 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,625 görüntüleme • 3 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,450 görüntüleme • 9 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,316 görüntüleme • 8 ay önce

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

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

94,101 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 want cleaner event handlers in your jsx in React you can use currying ↓

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

142,620 görüntüleme • 3 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,781 görüntüleme • 1 yıl önce