Learned React Hooks for state management

⚛️ React Hooks: A Game Changer in Functional Components React Hooks revolutionized how we write components — making code cleaner, more reusable, and easier to understand. 🔧 Before Hooks, managing state and lifecycle logic meant using class components. It worked, but let’s be honest — things got messy fast. Then came Hooks in React 16.8. Now we can: ✅ Manage state with useState ✅ Handle side effects with useEffect ✅ Share logic between components via custom hooks ✅ Tap into context, refs, reducers, and more — all in functional components Why does this matter? ➡️ Less boilerplate ➡️ Better separation of concerns ➡️ Easier testing and reuse ➡️ Improved developer experience 🔁 Hooks didn’t just simplify React — they made it more powerful. 💬 Are you using Hooks in production? Any favorite custom hooks you've built or discovered? Drop them below! #ReactJS #WebDevelopment #JavaScript #ReactHooks #FrontendDevelopment #CodingTips #CleanCode #TechTalk

JavaScript Promise.race() — When Speed Matters! Sometimes, you don’t need all async tasks to finish — you just want the fastest one’s result That’s where Promise.race() comes in! 💡 Definition: Promise.race() takes an array of promises and returns the result of the first one that settles (either resolved or rejected). 🧩 Example: const fast = new Promise((resolve) => setTimeout(() => resolve("🚀 Fast task completed!"), 1000) ); const slow = new Promise((resolve) => setTimeout(() => resolve("🐢 Slow task completed!"), 3000) ); Promise.race([fast, slow]) .then((result) => console.log("Winner:", result)) .catch((error) => console.error("Error:", error)); ✅ Output: Winner: 🚀 Fast task completed! Even though the slow promise finishes later, the first one decides the result. Why Use It? ✅ Get quick responses from multiple sources ✅ Useful in timeout or failover situations ✅ Improves user experience by reacting faster 🔖 #JavaScript #PromiseRace #AsyncProgramming #WebDevelopment #Frontend #JSConcepts #CodingTips #100DaysOfCode #KishoreLearnsJS #WebDevCommunity #DeveloperJourney #AsyncAwait

🪝 Custom Hooks, Power, but with Discipline At some point, every React dev writes a custom hook. It starts with a simple useFetch or useForm, and before you know it, you’re managing your own mini framework. 😅 Over time, I’ve learned that creating custom hooks is less about code reuse and more about clarity. Here’s what I’ve found works best 👇 💡 When Custom Hooks Make Sense ✅ You want to extract repeated logic used across components. ✅ You’re handling complex state or side effects that clutter UI components. ✅ You need a clear abstraction layer between logic and presentation. ⚠️ When They Don’t 🚫 You’re creating a hook to “make it look cleaner.” 🚫 The hook ends up being used only once, and makes debugging harder. 🚫 You’re wrapping libraries (like React Query or Zustand) for no real reason. A good rule of thumb: “If your hook makes code simpler for the next person, keep it. If it hides clarity, rethink it.” What’s the most useful custom hook you’ve written recently? 👇 #ReactJS #TypeScript #FrontendDevelopment #CleanCode #SoftwareEngineering #ReactHooks #WebDev #VipinYadav

⚛️ Understanding `useState` Updates in React: Why They Seem Asynchronous and How to Handle It In React, `useState` is the most common way to manage state in functional components. But one thing that often confuses developers is that state updates via `setState` don’t happen immediately — they are batched and applied during the next render. This makes `useState` seem asynchronous. What’s really happening? • Calling `setState` schedules an update, but doesn’t instantly change the state variable. • On the current render, reading the state variable right after `setState` still gives the old value. • React batches multiple `setState` calls for performance and applies them together before the next render. Example of the issue: const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); console.log(count); // Logs old value, not updated one }; Clicking increment multiple times may not behave as expected because `count` inside the function is “stale” due to closure capturing the old value. How to safely update state based on the current value Use the functional update form of `setState`, which guarantees you get the latest state: setCount((prevCount) => prevCount + 1); This avoids stale closures and works well even if multiple updates happen quickly. Need to respond to state changes? Use `useEffect` to act when state changes: useEffect(() => { console.log('Count updated:', count); }, [count]); Key Takeaway • `setState` itself is synchronous internally, but React batches updates and re-renders asynchronously. • Don’t rely on updated state immediately after calling `setState` in the same render cycle. • Use functional updates and `useEffect` for reliable, up-to-date state management. Mastering this behavior is essential for avoiding bugs and writing predictable React components. #ReactJS #JavaScript #FrontendDevelopment #Hooks #WebDev

⚙️ Why package.json is the heartbeat of every React project from Vite to Next.js No matter how you start 👉 npx create-react-app 👉 npm create vite@latest 👉 npx create-next-app They all generate one core file: package.json This single file quietly powers everything your React project does. Here’s why it’s so important 👇 1️⃣ Dependency Map Lists every library React, Tailwind, Axios, Vite plugins, you name it. One npm install and your full environment is ready anywhere. 2️⃣ Project Identity Holds metadata like name, version, and scripts that describe your project to both humans and tools. 3️⃣ Script Center npm run dev, npm run build, npm run lint all wired here. It’s your command hub for local dev, testing, and deployment. 4️⃣ Version Stability Works with package-lock.json (or yarn.lock) to freeze dependencies and prevent “it works on my machine” issues. 5️⃣ Team & Environment Sync New dev joins? They just clone → npm install → npm run dev and boom, same environment. Whether you’re using Vite for speed, Next.js for SSR, or CRA for simplicity package.json remains the common backbone that keeps your React world running. 💡 Treat it like your project’s DNA small file, massive impact. #ReactJS #Vite #NextJS #Frontend #WebDevelopment #JavaScript #NPM #DeveloperTips #Coding

Let’s Talk About One of the Most Important React Hooks: useEffect When I first started using React Hooks, useEffect was the most confusing one 😅 It looked simple — but then I realized how a missing dependency can break everything! useEffect is one of the most powerful React Hooks. It allows your component to perform side effects — like fetching data, updating the DOM, setting up subscriptions, or syncing state with external systems. In short, it gives your component “life” beyond just rendering UI. Here’s what I learned: Always include all variables your effect depends on. Avoid using it for logic that should happen on every render. Clean up your effects (return a function). useEffect isn’t just for fetching data — it’s about managing side effects, lifecycle, and performance in a clean, declarative way. #React #Frontend #WebDevelopment #JavaScript #ReactHooks #Learning

🧩 Custom Hooks: The Hidden Superpower of React When React introduced hooks, it wasn’t just another API — it was a quiet revolution. ⚡ Before hooks, we wrote class components that grew like wild forests. Logic was tangled across lifecycles, duplicated, or hidden behind HOCs. Then came this little thing called useSomething(). Suddenly, we could extract logic like Lego blocks. 💡 The moment I truly understood React wasn’t when I learned useEffect. It was when I realized I could write my own. function useOnlineStatus() {  const [isOnline, setIsOnline] = useState(navigator.onLine);  useEffect(() => {   const updateStatus = () => setIsOnline(navigator.onLine);   window.addEventListener('online', updateStatus);   window.addEventListener('offline', updateStatus);   return () => {    window.removeEventListener('online', updateStatus);    window.removeEventListener('offline', updateStatus);   };  }, []);  return isOnline; } That’s not a utility — that’s architecture in disguise. Hooks make behavior composable, predictable, and testable. The biggest mistake developers make? Using built-in hooks forever but never writing their own. Once you start thinking in custom hooks, you stop building components — and start designing systems of logic. #ReactJS #Hooks #FrontendDevelopment #CleanCode #JavaScript #WebArchitecture #ReactDesignPatterns #SystemDesign

The Event Loop, Microtasks & Macrotasks — what really runs first? JavaScript runs one call stack and two key queues: Microtasks: Promise.then/catch/finally, queueMicrotask. Macrotasks: setTimeout, setInterval, DOM events, etc. Rules of thumb: Run all synchronous code. Flush the entire microtask queue (FIFO). Take one macrotask, then repeat. Quick demo: setTimeout(() => console.log('T'), 0);    // macrotask Promise.resolve().then(() => {         // microtask P1  console.log('P1');  queueMicrotask(() => console.log('M-from-P'));// microtask enqueued during P1 }); queueMicrotask(() => {             // microtask M1  console.log('M1');  Promise.resolve().then(() => console.log('P2')); // microtask enqueued during M1 }); console.log('Sync'); What prints (surprises many devs): Sync P1 M1 M-from-P P2 T Why? Both Promise.then and queueMicrotask are microtasks with the same priority. They run in the order they were queued (FIFO) before any setTimeout. Microtasks queued during a microtask are appended and will also run before the event loop picks up the next macrotask. Takeaway: If you need something to run immediately after the current call stack (and before timers), use a microtask (Promise.then or queueMicrotask). Use setTimeout when you truly want to yield to the next macrotask tick. #JavaScript #EventLoop #WebPerformance #Frontend #AsyncJS #Promises #CleanCode #WebDev #NodeJS #TechTips

⚛️ React Day 8 — Keys: The ID Cards of Your List Items 🔑 Yesterday we mapped lists… But React asked for one more thing: “Hey, where are the keys?” 😅 So what are keys? They're basically ID cards React uses to track each list item. When your UI updates, React checks these keys to know: which item changed which item moved which item got deleted 💡 Without keys → React gets confused 💡 With keys → React updates only what’s needed (super fast!) Example: {users.map(user => ( <h3 key={user.id}>{user.name}</h3> ))} Simple rule: Keys should be unique and stable. (Not random values. Definitely not array index 😉) Keys make React efficient, smart, and lightning fast. ⚡ #React #JavaScript #Frontend #LearnReact #TechSeries #WebDevelopment

Lets dive deeper into one of the most important hooks in React: useState — the memory keeper. I’ve broken down the core concepts with simple real-life analogies so you can remember them forever. ✨ Ever wondered why changing a let variable doesn’t update your React UI? 👉 Because React doesn’t know it changed. Each render is like calling your component from scratch: Local variables are recreated (and reset) But React’s internal state stays alive across renders That’s where useState comes in. When you call setState(), React: Updates that value in its own memory Schedules a re-render of the component Rebuilds the Virtual DOM Updates only what actually changed on the screen 🧠 Real-life analogy A let variable = a note in your pocket 🗒️ You can change it a hundred times, but no one else sees it. A useState variable = data stored in React’s control room 🖥️ Whenever it changes, the system knows and triggers a UI refresh for everyone. #React #ReactJS #JavaScript #WebDevelopment #Frontend #LearnReact #ReactHooks #useState #DevJourney #CodeNewbie #JSDeveloper #FrontendDeveloper