React has finally solved its biggest problem: The joys of useEffectEvent - LogRocket Blog

"If I were to ask you what React's biggest source of bugs is, what would you say? You'd probably say what everyone says: useEffect. It's the Hook with the obtuse name that allows you to do async work. That's great, but it can cause a lot of issues. In particular, infinite loops, where we keep fetching and fetching from the server."

"Cloudflare is one of the biggest deployment providers on the planet, and they have an excellent engineering team. But even they can make mistakes when it comes to useEffect. Recently, they distributed denial of service'd (DDOS'ed) their own dashboard when they errantly put an object into a dependency array. That object changed its identity with every re-render, causing an infinite loop that took down their whole dashboard."

useEffect often produces bugs because dependencies can change identity between renders, triggering repeated effects and infinite data fetching loops. Objects placed in dependency arrays frequently change identity, causing repeated re-runs of effects. Cloudflare experienced a dashboard outage when an object in a dependency array caused an infinite re-render loop and a self-inflicted DDoS. The React compiler can help by stabilizing object references to reduce identity-related bugs. The new Hook useEffectEvent provides stable event handlers and eliminates the need to include objects in dependency arrays, preventing many common useEffect-induced infinite loop issues. A simple component example uses useState for an editable userName.

Read at LogRocket Blog