『Why Your React App Renders Twenty Times on First Load』のカバーアート

Why Your React App Renders Twenty Times on First Load

Why Your React App Renders Twenty Times on First Load

無料で聴く

ポッドキャストの詳細を見る
Lucas and Luna break down a common performance trap in React applications: excessive re-renders on initial page load. They trace the problem from a developer's console warning about 22 renders in under two seconds to the root cause — misuse of useEffect and stale closure patterns. Using a concrete example of a dashboard app fetching three unrelated API endpoints, they show how improper state batching and missing dependency arrays cause cascading re-renders that bloat render time from 200 milliseconds to nearly four seconds. The episode walks through React 18's automatic batching, the difference between urgent and non-urgent updates, and a practical migration path from useEffect to useSyncExternalStore for data subscriptions. Lucas references a real-world case where a SaaS team cut initial render count from 37 to 4 by splitting one component into three micro-components and switching to React Query for caching. Luna adds a note on React DevTools profiler output and how to interpret the flame graph's 'why did this render' tags. The conversation ends with a forward-looking note on React Forget, the compiler that aims to automate memoization in React 19. #React #ReactPerformance #ReRenders #useEffect #React18 #React19 #ReactForget #useSyncExternalStore #WebPerformance #Frontend #JavaScript #ReactDevTools #StateBatching #StaleClosures #ReactQuery #Memoization #FexingoBusiness #BusinessPodcast Keep every episode free: buymeacoffee.com/fexingo
adbl_web_anon_alc_button_suppression_t1
まだレビューはありません