React useState Hook: Updates and Batching Explained

Built a Product Sorting Feature in React! I implemented dynamic sorting using useState and an array.sort() now products reorder instantly based on user selection. 🔹 Sort by Price (Low → High, High → Low) 🔹 Sort by Name (A → Z) 🔹 Used the spread operator to avoid mutating the original array This helped me understand how state + sorting works in real projects. 💻 Tech: React.js, JavaScript #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney

A common React issue that can silently hurt performance ⚠️ While working on a React application, I came across a case where an API was being called multiple times without any clear reason. At first glance, everything looked fine. The component logic was simple and the API integration was correct. But after debugging, the root cause turned out to be related to useEffect. The effect was running on every render because the dependency array was not properly managed. Once the dependencies were corrected, the API calls were reduced to exactly when they were needed. This kind of issue is easy to miss, but it can lead to: 🔹 Unnecessary API load 🔹 Performance degradation 🔹 Unexpected UI behavior In React, always be intentional with your useEffect dependencies. Small oversights can lead to bigger performance problems. #reactjs #frontenddevelopment #javascript #webdevelopment #performance

🚀 useState vs useReducer — When to use what in React? If you’ve worked with React, you’ve probably used useState a lot. But at some point, things start getting messy… and that’s where useReducer steps in. Let’s break it down 👇 🔹 useState Best for simple state Easy to read and quick to implement Great for inputs, toggles, counters Example: const [count, setCount] = useState(0); 👉 Use it when your state logic is straightforward. 🔹 useReducer Best for complex state logic Handles multiple related state updates Keeps logic predictable and organized Example: const [state, dispatch] = useReducer(reducer, initialState); 👉 Use it when: State depends on previous state You have multiple sub-values Logic gets complicated 💡 Think of it this way: useState = Simple & quick 🟢 useReducer = Structured & scalable 🔵 ✨ Pro Tip: If you find yourself writing too many setState calls or nested updates… it’s probably time to switch to useReducer. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips #ReactHooks

⏱️ Built a Todo List with Timer using React Tried building a Todo List where each task has its own timer control — small idea but interesting state handling. Features: • Add todos dynamically • Start timer for each task individually • Reset timer per task • Delete tasks • Independent timer state for every item What I learned: • Managing multiple independent states in a list • Handling setInterval / timers safely in React • Avoiding memory leaks with proper cleanup • Structuring components for better state isolation • Updating UI efficiently without affecting other items This was a great exercise in understanding how to handle time-based state and side effects in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

What I Learned Today: Routing in React Today I learned how routing works in React and how we can navigate between different pages without reloading the browser 🔥 Key Concepts I Explored: 1. BrowserRouter – Enables routing across the entire application 2. Routes – Acts as a container for multiple routes 3. Route – Maps a specific URL path to a component 4. Navigation using useNavigate() and Link 🎯 This helped me understand how real-world applications handle navigation smoothly and efficiently. * I also implemented this in my project: * Created a Home page * Added navigation to a Weather page using React Router Learning something new every day and building step by step! #ReactJS #ReactRouter #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #100DaysOfCode

react 19 has a new use() api and it breaks one of the oldest rules in react hooks must be called at the top level. always. no conditions, no loops. use() doesn't care. you can call it inside if statements, loops, conditionals - things that were never allowed before. it does two things: - reads a promise (integrates with suspense automatically) - reads context (like useContext, but more flexible) function UserCard({ userPromise }) { const user = use(userPromise); // suspends until resolved return <p>{user.name}</p>; } the catch? create your promises in server components and pass them down - not inside the client component itself, or you'll get an infinite loop on every re-render. it's a small api with a big mental shift. react is clearly moving toward a world where async is first-class - not something you bolt on with useEffect + useState + loading flags. #react #react19 #frontend #javascript #webdev

Routing in React - Today I explored how navigation works in React using React Router. Routing allows us to switch between pages without reloading the entire website, making applications faster and smoother. Key Concepts I Learned: • Setting up routes using BrowserRouter • Navigating using Link • Dynamic routing using parameters • Redirecting with useNavigate One important takeaway: React applications are Single Page Applications (SPA), where components change instead of full page reloads. #ReactJs #webdevelopment #javascript #coding

Today I learned about the useRef hook in React, and it’s actually very useful! What is useRef? It allows us to create a reference that persists across renders without causing re-renders. Key Uses: Access DOM elements directly Store mutable values without re-rendering Useful for focus, timers, and previous values Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); } What I learned: Unlike state, updating useRef does NOT trigger a re-render. Excited to explore more React hooks! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #90DaysOfCode

Most React developers use this pattern every day: setCount(prev => prev + 1) But very few can clearly explain why it’s necessary. In React, state updates are not immediate. They can be batched and executed later, which means the value you’re using (count) might already be outdated when the update actually runs. The functional update avoids this problem. Instead of relying on a potentially stale value, it receives the latest state at the exact moment React processes the update. So instead of saying: “set the value to this” you’re saying: “update based on whatever the current value is” That’s the key difference. This pattern isn’t just syntax, it’s how you avoid subtle bugs when your next state depends on the previous one. #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering