How a misplaced state update in React caused an infinite browser-crashing loop

A developer migrating their personal portfolio to Next.js 16 encountered a severe bug where a custom loading screen caused the entire browser to flash black and eventually freeze. The loading component featured complex SVG animations, multiple state variables, refs, and layered timer logic intended to display an animated intro before handing off to the main content. Upon opening the dev server, the browser immediately began alternating between black and content at full speed, with Chrome throwing errors and slowing to a halt within seconds. The same black-screen behavior appeared in production, making the site completely unusable to visitors. After ruling out memory leaks and build issues, React DevTools and a 'Maximum update depth exceeded' console error revealed the culprit: state updates were firing during render outside of any effect hook, triggering an uncontrolled infinite re-render loop.