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.
373,528 次观看
❌ Avoid using conditionals to render views in React ✅ Instead use Enums
462,364 次观看
❌ Avoid using conditionals to render views in React ✅ Instead use Enums ↓
219,773 次观看
❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
170,154 次观看
📣 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 次观看
❌ Prevent performance issues when showing large lists of data. ✅ Instead use Virtualization, only display what the user sees at any given time
133,863 次观看
❌ Avoid fetching data in useEffect ✅ Instead use libraries like react-query that have a strong built-in mechanism for data fetching.
113,797 次观看
❌ 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 次观看
🚫 𝗔𝘃𝗼𝗶𝗱 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.
80,163 次观看
⚛️ 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 ↓
73,792 次观看
⚛️ 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 次观看
⚛️ 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 次观看
⚛️ 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 ↓
