Cloudflare DDoSed itself with React useEffect hook blunder

"The cause was hard to troubleshoot since the apparent issue was with the API availability, disguising the fact that it was the dashboard that was overloading it. Lianza said the core issue was a React useEffect hook with a "problematic object in its dependency array." The useEffect hook is a function with parameters including a setup function that returns a cleanup function, and an optional list of dependencies. The setup function runs every time a dependency changes."

"In this Cloudflare case, the function made calls to the Tenant Service API, and one of the dependencies was an object that was "recreated on every state or prop change." The consequence was that the hook ran repeatedly during a single render of the dashboard, when it was only intended to run once. The function ran so often that the API was overloaded, causing the outage."

On September 12 Cloudflare experienced an outage lasting over an hour after a dashboard bug triggered repeated, unnecessary calls to the Tenant Service API, which is part of API request authorization and thus affected other APIs. Troubleshooting was difficult because API availability appeared to be the issue while the dashboard was actually overloading the service. The root cause was a React useEffect hook whose dependency array included an object recreated on every state or prop change, causing the hook to run repeatedly during a single render and flood the Tenant Service API. Community responses debated useEffect misuse and performance pitfalls.

Read at Theregister