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