This video dissects Cloudflare's dashboard and API outage on September 12, 2025, which Cloudflare attributed to a self-inflicted DDoS from its own users. The incident was officially caused by a bug in the React dashboard: a useEffect hook repeatedly made unnecessary calls to the tenant service API due to an incorrectly handled dependency array, coinciding with an unstable tenant service API update. The speaker critically analyzes Cloudflare's public postmortem, arguing that it disproportionately blames the React frontend while downplaying the concurrent backend API service changes as the primary root cause. He provides a technical explanation of the useEffect bug and strongly advocates for the adoption of modern data-fetching libraries like React Query, which he claims Cloudflare engineers were advised to use years ago but resisted due to "hubris" and a dismissive attitude towards frontend best practices. The video concludes with a scathing critique of the Cloudflare dashboard's current state and a call for immediate, fundamental changes in their web development approach.
0:00 Cloudflare's Self-DDoS: Cloudflare, a company known for DDoS prevention, experienced a dashboard outage caused by a DDoS originating from its own users due to a "rogue useEffect" bug in their React application.
2:49 Official Cause of Outage: Cloudflare's postmortem states an outage in their tenant service API led to broad API and dashboard unavailability. The immediate trigger was a bug in the dashboard, causing repeated, unnecessary calls to the tenant service API.
3:07 The React useEffect Bug: A React useEffect hook mistakenly included an object in its dependency array that was recreated on every state/prop change. This made React continuously treat the object as "new," forcing the useEffect to rerun and execute API calls multiple times per render, leading to excessive load.
3:26 Compounding Instability: This bug coincided with a service update to the tenant service API, which exacerbated instability and ultimately overwhelmed the service, causing it to fail.
3:34 Speaker's Critique of Postmortem: The speaker argues Cloudflare's postmortem is poorly worded, overemphasizing the React bug while downplaying the concurrent tenant API service changes as the actual primary cause of the outage.
3:54 Internal Resistance to Best Practices: He reveals that Cloudflare's frontend team has historically rejected suggestions from good engineers to adopt external libraries like React Query, leading to preventable issues.
4:20 Authorization Failure Cascade: The overloaded tenant service impacted other dashboard APIs because it's integral to API request authorization logic, causing authorization failures and widespread 500 status codes.
4:41 Timeline Discrepancy: The speaker highlights that dashboard changes occurred hours before the outage without issue, while the tenant API service deployment immediately preceded the impact, suggesting the API update was the more direct cause.
5:38 Resolution Steps: Cloudflare restored service by providing more resources to the tenant API, implementing a global rate limit, and reverting problematic changes made to the tenant API service. No mention was made of reverting the useEffect bug in the initial fix.
8:31 Future Preventative Measures: Cloudflare plans to implement Argo rollouts for the tenant service, address the "thundering herd" problem during service restarts, and increase tenant service capacity.
9:30 Technical Explanation of useEffect Error: The speaker demonstrates how passing a non-memoized object into a useEffect dependency array causes an infinite loop of re-renders and API calls due to React always perceiving the object as "new."
11:15 React Query as a Solution: He illustrates how libraries like React Query correctly manage data fetching, caching, retries, and dependencies via "query keys," preventing such infinite loops and simplifying complex data interactions.
12:08 Fetching Data in useEffect is Incorrect: The speaker asserts that using useEffect for data fetching is "100% of the time" incorrect, emphasizing that better, more robust solutions (like React Query or custom equivalents) exist.
13:04 "Hubris" Led to Outage: He attributes Cloudflare's failure to adopt modern data fetching solutions to "hubris" and a refusal to learn from the broader React ecosystem, despite the availability of extensive resources (e.g., T.K. DΕta's React Query blog series).
14:19 Call to Action for Cloudflare: The speaker demands Cloudflare adopt React Query or similar tools and criticizes internal resistance to these changes, suggesting that engineers pushing back are causing actual outages.
15:32 Cloudflare's Frontend Incompetence: Quoting Cloudflare's CTO's dismissive comment about frontend developers, the speaker retorts that Cloudflare "knows nothing about basic web development techniques in practice" and calls their dashboard "abysmal."
16:02 Urges Dashboard Fixes: The video concludes by strongly urging Cloudflare to fix their dashboard, hire skilled frontend developers, and become competent in modern web development practices.