Quick React performance win that made my app feel instantly smoother 😜 One common gotcha: functions created inside the component (like event handlers or API fetch wrappers) get recreated on every render. When passed as dependencies to useEffect, it causes unnecessary re-runs → extra API calls, subscriptions, or heavy logic → laggy UI. The fix I implemented: Instead of this (triggers too often) Wrap the whole effect in useEffectEvent (newer pattern in React 19+) if it’s purely event-like and you want to skip deps entirely for non-reactive parts. Result? Dropped unnecessary renders/effects by ~40-60% in a data-heavy dashboard component. Typing, scrolling, and interactions felt buttery smooth again. #ReactJS #JavaScript #Frontend #WebPerformance #ReactNative
In react 19 Don't use useEffect/useEffectEvent for data fetching. If your fetch depends on client side state like search query or pagination use the useMemo with new use hook, Suspense and ErrorBoundary (those state can be moved to query params and use in RSC) else use RSC
Great point — this is a very common source of “invisible” performance issues. Recreated functions + effects is something I’ve seen cause subtle bugs and unnecessary API calls in production, especially in data-heavy screens. useEffectEvent is a really interesting addition for truly event-like logic where you don’t want reactivity leaking in. That said, I’ve found it works best when combined with clear boundaries — reactive state stays reactive, and event handlers stay event handlers.