I made a mistake today while refactoring that gave this classical error: 🔴Error: Rendered more hooks than during the previous render. Looking at the code, everything looks fine. ✅Syntax = correct ✅imports = correct 🔄 refreshed browser... multiple times But red box doesnt seem to disappear from the screen. Now i was left with no choice to leave the skimming and dig deeper. (the hard but necessary choice 😄). Finally, the StackOverflow answer saved the day. The problem was that i was calling the hooks in my page in this order: function Component() { useSomeHook(); if (loading) { return <Skeleton />; } useAnotherHook(); } I was'nt able to recall even after looking at it multiple times, that there is rule: 🔴 Do not call Hooks after a conditional return statement. 📌 What this taught me No matter how many times you read the docs, real understanding comes from making mistakes and fixing them. 🗨️If you have encountered some similar problem that you struggled solving recently, let me know in the comments. #react #javascript #nextjs
The best way to enforce principles in your code is by using linters like Biome, for example, or ESLint with rules-of-hooks, which catch conditional hook usage before it reaches runtime. But it’s good, digging into the error and finding the root cause yourself is valuable too, real learning often sticks best when it comes from debugging
Classic React footgun. This is a great reminder that hooks rules aren’t just theory—they’re execution-order guarantees. You don’t really internalize them until React punishes you once. These mistakes tend to stick far better than rereading the docs ever does.