Switching from Redux to Zustand for Simplified State Management

🚀 Day 7/30 – React Hooks (Game Changer) Today I learned one of the most powerful concepts in React ⚡ 👉 Hooks Today I learned: ✅ Hooks let you use state & lifecycle features in functional components ✅ No need to write class components anymore ✅ Makes code cleaner and easier to manage 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } 🔥 Key Takeaway: Hooks = Less code + Better readability + Powerful logic 💡 Bonus: Common Hooks: - useState → manage state - useEffect → side effects - useRef → access DOM Are you using Hooks or still learning them? 👇 #React #Hooks #Frontend #WebDevelopment #JavaScript #CodingJourney

🚀 Starting a 10-part series on React things that make code harder than it needs to be. Not tutorials. Not “10 hooks you should know.” Just real patterns that show up in actual codebases and make simple work more annoying than it should be. Part 1: A lot of React problems are really state problems. Not React itself. Not JSX. Not even hooks most of the time. State living in too many places. Duplicated state. State doing jobs it was never supposed to do. That’s usually when an app starts feeling harder to reason about than it should. The more I work with React, the more I think good frontend code starts with good state decisions. If the state is messy, everything downstream gets harder: debugging feature work testing handoffs even basic collaboration Good React usually feels predictable. And predictable usually starts with state. What’s the most common state mistake you keep seeing? #React #ReactJS #StateManagement #FrontendEngineering #JavaScript #TypeScript #SoftwareEngineering

🚨 Small React mistake… big headache 👇 I used to write code like this without even thinking: if (condition) return null; useEffect(() => { // logic }, []); It looks completely fine, right? I thought the same ❌ Then suddenly this error shows up: 👉 "Rendered fewer hooks than expected" Took me some time to realize what was actually wrong. React expects hooks to run in the same order every single render. But in this case: • First render → component returns early → useEffect doesn’t run • Next render → useEffect runs And boom 💥 React gets confused because the order changed. The fix is simple (but easy to forget): useEffect(() => { // logic }, []); if (condition) return null; Now hooks always run first, no matter what 👍 💡 Lesson learned: Never put hooks after a condition or inside it. Always keep them at the top. Have you ever hit this error? It’s one of those bugs that looks small but wastes a lot of time 😅 #react #nextjs #javascript #frontend #webdev

𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗹𝗲𝗮𝗿𝗻 𝗳𝗼𝗿𝗺 𝗵𝗮𝗻𝗱𝗹𝗶𝗻𝗴. 𝗩𝗲𝗿𝘆 𝗳𝗲𝘄 𝗹𝗲𝗮𝗿𝗻 𝘄𝗵𝘆 𝘁𝗵𝗲𝗶𝗿 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵 𝗶𝘀 𝘀𝗶𝗹𝗲𝗻𝘁𝗹𝘆 𝗶𝗻𝗲𝗳𝗳𝗶𝗰𝗶𝗲𝗻𝘁. Today's class changed how I think about both. Started with the brute force way. One state per input field. Works fine. Also bloats fast and scales terribly. Then the optimized approach. Less code, single state object, same result. But the thing that actually stuck with me was the event system difference nobody talks about early on:  • Native DOM events use event bubbling by default. Events travel up the tree  • React's synthetic events use event delegation by default. One listener at the root handles everything Same outcome on the surface. Very different under the hood. React isn't just a UI library. It's quietly making performance decisions for you before you even think about them. Understanding why React does what it does makes you a better React developer. Simple as that. Devendra Dhote #reactjs #javascript #formhandling #webdevelopment #frontend

I made React slower trying to optimize it. Wrapped everything in useMemo. Added useCallback everywhere. Felt productive. Performance got worse. Here's what I didn't understand about re-renders 👇 4 things that trigger a re-render: > State change > Prop change > Parent re-renders (even if YOUR props didn't change) > Context update That third one is responsible of unnecessary re-renders I've seen in real codebases. The fix isn't memorizing APIs. It's this order: 1. Profile first Open React DevTools Profiler. Find the actual problem. Takes 2 minutes. 2. Wrap the right components in React.memo Not all of them. Only components that are expensive AND receive stable props. 3. Stabilise your functions with useCallback Without it - new function reference every render --> child always re-renders. Doesn't matter if you have React.memo. 4. useMemo for heavy calculations only Not for "this array map looks expensive." Only when Profiler proves it. The rule I follow now: Don't optimise what you haven't measured. One change in the right place beats 10 changes in the wrong ones. What's the most unnecessary useMemo you've ever written? 😄 #React #JavaScript #Frontend #WebDev

Ever clicked two dropdowns and both stayed open at the same time? 😾 Looks unprofessional. Feels broken. Users hate it. Here is how I fixed it in React with just 2 lines : 👉 When Explore opens → force "Degree" dropdown to close onClick={() => {  setIsExploreMenuOpen(!isExploreMenuOpen);  setIsDegreeMenuOpen(false); // ← this one line does it }} 👉 When Degree opens → force "Explore" dropdown to close onClick={() => {  setIsDegreeMenuOpen(!isDegreeMenuOpen);  setIsExploreMenuOpen(false); // ← same idea }} The logic is simple: When you open something → explicitly close everything else. React does not do this automatically. You have to tell it exactly what to close. Small detail. Big difference in user experience. #react #nextjs #javascript #webdevelopment #tailwindcss #buildinpublic #frontenddevelopment

Unpopular opinion 👇 You probably don’t need Redux anymore.😅 With modern React: • Context API + useReducer • Server state libraries (like React Query) • Better component design Most apps can scale without heavy global state tools. But here’s the catch: 👉 The real problem isn’t the tool—it’s how we structure state. Good engineers don’t ask: “Which library should I use?” They ask: “Where should this state live?” What’s your take—Redux still essential or overused? #React #JavaScript #Frontend #SoftwareArchitecture #Thoughts

🧠 React Doesn’t Update State Immediately (Even Inside the Same Function) Most people know state is async. But here’s the part many don’t realize 👇 Example const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); if (count === 0) { console.log("Still zero?"); } } You click the button. Expected: count = 1 But inside that function… 👉 count is still 0 🔍 Why? Because React doesn’t update state inside the current render cycle. It schedules the update and re-renders later. 🧠 The tricky part Even this won’t work: setCount(count + 1); setCount(count + 1); 👉 Final result = +1, not +2 ✅ Correct way setCount(prev => prev + 1); setCount(prev => prev + 1); Now React uses the latest value. 🎯 The Real Insight State inside a function is a snapshot, not a live value. 💥 Why this matters This causes: Unexpected conditions Wrong calculations Confusing bugs #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #CodingTips #LearningInPublic

🚨 The React mistake that causes state not updating immediately You update state. But when you log it… It still shows the old value. Example: const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) console.log(count) } You expect: 1 But it logs: 0 Why? Because React state updates are asynchronous. "setCount()" does NOT update the state immediately. It schedules an update for the next render. So inside the same function, you still get the old value. This becomes a serious problem in cases like: ❌ Multiple updates ❌ Dependent state logic ❌ API calls using outdated values 💡 The correct approach is using functional updates. setCount(prev => prev + 1) Now React always uses the latest state value. 💡 Good React engineers don’t assume state updates instantly. They understand how React schedules updates. #reactjs #frontend #javascript #webdevelopment #softwareengineering

React Hook Form made my forms faster, cleaner, and easier to manage. Before using it, I was handling form state with useState, writing multiple handlers, and dealing with unnecessary re-renders. It worked, but it was messy and hard to scale. React Hook Form changed that. It uses uncontrolled components, which means fewer re-renders and better performance. You don’t need to store every input in state. Instead, you register inputs and let the library handle the rest. Key benefits: 1. Minimal re-renders 2. Simple validation 3. Cleaner code 4. Easy integration with libraries like Zod Example: const { register, handleSubmit } = useForm(); If you are still managing forms manually in React, it is worth trying React Hook Form. #reactjs #webdevelopment #frontend #javascript #reacthookform #coding