useState Hook in React Explained with Examples

One React topic that gets messy fast: forms. Not because inputs are hard. Because real-world forms are. Validation, async errors, dynamic fields, reusable logic: that’s where clean React patterns matter. I broke it down here 👇 https://lnkd.in/dFWB3Phc #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering #buildinpublic

Day [7] of 111 days challenge Code for Change useSearchParams() (Client Component) This is a hook used inside client components .for example, a search bar that updates as the user types. "use client" import { useSearchParams } from "next/navigation" export default function SearchBar() { const searchParams = useSearchParams() const query = searchParams.get("q") } So when should you use which? Fetching/filtering data on the server? => use searchParams (prop) Building interactive UI that updates the URL? => use useSearchParams() (hook) #NextJS #WebDevelopment #React #LearningInPublic #JavaScript #BeginnerDeveloper #AppRouter #111DaysOfCode

The React pattern that eliminated 80% of my useEffect calls Most useEffect calls are just bad data derivation. Here is the derived state pattern that cleaned up years of accumulated complexity in my React components. Full breakdown (6 min read) → https://lnkd.in/gsS5RKC4 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering

Why do we need the 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 hook when we can perform heavy calculations inside 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲, which runs only once? The key difference is flexibility and reactivity. 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 can run once or re-run when specific values change. It accepts two arguments: 1. A callback function 2. A dependency array You can pass values in the dependency array, and whenever any of those values change, React re-invokes the callback function. This ensures you always have the latest values inside the callback. Real-world use case: Validating edit form values on initial load and re-validating when certain conditions or inputs change. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #PerformanceOptimization #CodingTips

The React pattern that has saved me the most time: custom hooks for shared logic. Not parts. Hooks. This is what kept happening to me: Several parts needed the same logic, like getting data, keeping track of the window size, and managing form state. I was copying and pasting useEffect and useState blocks all over the place. The solution is to put the logic into a custom hook. function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handler = () => setWidth(window.innerWidth); window.addEventListener('resize', handler); return () => window.removeEventListener('resize', handler); }, []); return width; } Now any component that needs the window width just calls: const width = useWindowWidth(); All of the cleanup logic, the event listener, and the state are taken care of in one place. What gets different: - Bugs are fixed once, not in five places. - Components are easier to read and understand. - It's easier and more isolated to test the logic. React becomes truly compositional when you utilize custom hooks. What is a custom hook you've made that you use all the time? #React #FrontendDeveloper #JavaScript #WebDev #ReactHooks

🔹 “Just a small UI change…” Developer: “I’ll update one component… should be quick.” After change → another component breaks Fix that → state updates stop working Fix state → API call behaves differently Fix API → UI re-renders unexpectedly And suddenly… a “small change” becomes a full debugging session 😄 💡 React is simple… until everything is connected #React #DeveloperLife #FrontendDevelopment #JavaScript #FullStackDeveloper

Can you cancel a Promise in JavaScript? Short answer: No — but you can cancel the work behind it. A Promise is just a result container, not the async operation itself. Once created, it will resolve or reject — you can’t “stop” it directly. What you can do instead: • Use AbortController → cancels APIs like fetch • Use cancellation flags/tokens → for custom async logic • Clear timers → if work is scheduled (setTimeout) • Ignore results → soft cancel pattern Real-world takeaway: Design your async code to be cancel-aware, not Promise-dependent. This is exactly how modern tools like React Query handle requests under the hood. #JavaScript #Frontend #AsyncProgramming #WebDevelopment #ReactJS #CleanCode

I built the same simple form in two ways: - React Hook Form + MUI → 136 lines - Dashforge → 74 lines Same result. This is a simple case… imagine when it gets complex. Curious to hear how others are handling forms in React. #react #reacthookform #mui #frontend #webdevelopment #javascript #typescript #developerexperience

JavaScript is single-threaded. But somehow it handles API calls, timers, promises, user clicks, and UI updates—all at the same time. That magic is called the Event Loop. Many frontend bugs are not caused by React. They happen because developers don’t fully understand how JavaScript handles async operations. Example: Promise callbacks run before setTimeout callbacks. That’s why this: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start End Promise Timeout Why? Because Promises go to the Microtask Queue, which gets priority over the Macrotask Queue like setTimeout. Understanding this helps with: ✔ Avoiding race conditions ✔ Writing better async code ✔ Debugging production issues faster ✔ Improving frontend performance ✔ Understanding React behavior better The Event Loop is not just an interview topic. It explains how your entire frontend application actually works. Master this once, and debugging becomes much easier. #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #AsyncJavaScript #Programming #SoftwareEngineering

"Why does your API call run multiple times in React?" 🤯 Chances are… you're not using useEffect correctly. Let’s fix that 👇 🔹 What is useEffect? "useEffect" lets you perform side effects in React: - API calls 🌐 - Event listeners 🎧 - Timers ⏱️ 🔹 Basic Syntax useEffect(() => { // side effect code }, []); 🔹 Dependency Array (IMPORTANT) 👉 "[]" → Runs only once (on mount) 👉 "[value]" → Runs when value changes 👉 No dependency → Runs on every render ❌ 💻 Example: useEffect(() => { fetchData(); }, []); 🔹 Common Mistake Forgetting dependency array → leads to multiple API calls 😵 🚀 Pro Tip: Always think: “When should this effect run?” Then set dependencies accordingly. 💬 What mistake did you make when learning useEffect? 😄 #reactjs #javascript #webdevelopment #mern #developers