🚀 React Tip Every Developer Should Know Using multiple useState hooks isn’t wrong — but how you structure your state matters. When your data is logically related (like form fields), grouping it into a single state object can make your code: ✅ Cleaner ✅ Easier to maintain ✅ More scalable ✅ Less error-prone Instead of managing multiple setters, you manage one source of truth. This improves readability and prepares your component for growth (and even useReducer when things get complex). 💡 Key takeaway: Don’t avoid useState. Avoid poorly structured state. Write code that your future self (and your teammates) will thank you for 👨💻✨ #ReactJS #ReactHooks #JavaScript #FrontendDevelopment #WebDeveloper #CodingTips #CleanCode #BestPractices #SoftwareDeveloper #DeveloperLife #TechCommunity #Programming #LearnToCode #CodeNewbie #FullStackDeveloper #US #Developer
Coincidentally, I asked the exact same question to ChatGPT, and it said that both approaches are equivalent in terms of memory allocation and efficiency. However, I personally prefer the latter because it uses a single useState.
We can also use useReducer hook for handle this
It's code optimization technique, in first image for every state using useState so every time it is calling, but in second image only one useState is used for multiple states, so here we can call the useState function for one time, this will reduce the calling functionality in react and the code performance will increase
Back in the day this led to spaghetti code, guess we don't care about that anymore
With the code in the image, you didn't reduce the re-renders, but probably increased it, as you are passing an unstable function around. How many times is setUser is called? Compare that to how many times the other three were called in total. Also even if you called the three different state variants more time, if their values didn't change, there is no re-render. If you always mutate the state in the setUser, it always re-renders.