React Controlled vs Uncontrolled Inputs: Understanding the Difference

## What actually happens when you call an API in React? They call an API… and don’t realize it’s running multiple times. I made the same mistake. At first, I thought: “Just fetch data inside the component and display it.” But React doesn’t work like that. Every time your component re-renders, your API call can run again. And again. And again. That means: • Unnecessary network requests • Slower performance • Confusing bugs The fix? useEffect(). It controls when your API runs — not just how. Here’s the actual flow: Component renders useEffect triggers API call is made Data returns State updates Component re-renders (once, correctly) My biggest realization: React isn’t just about writing code — It’s about understanding the lifecycle behind it. If you ignore that, small mistakes become big problems. #reactjs #javascript #webdevelopment

Stop disabling the exhaustive-deps linter in your React Effects ⚛️. we all did the same dirty hack: // eslint-disable-next-line 👇. It is the most common frustrating scenario in React development: You write a useEffect to connect to a websocket or track an analytics event. Inside that effect, you need to read the current value of a state variable—like a shopping cart count or a UI theme. But the moment you read that state, the React linter screams at you to add it to the dependency array. If you add it, your effect re-runs every time the state changes (destroying your websocket connection!). If you don't add it, your build fails. So, we all did the same dirty hack: // eslint-disable-next-line. React finally solves this permanently with useEffectEvent. ❌ The Legacy Way (eslint-disable): Forces you to break the rules of React. Creates a massive risk for stale closures and hidden bugs. Makes your code harder to maintain and review. ✅ The Modern Way (useEffectEvent): Extracts your "event" logic cleanly out of your "lifecycle" logic! • Always Fresh: It guarantees your callback will always read the absolute latest props and state. • Non-Reactive: It is intentionally ignored by the dependency array. It will never cause your useEffect to re-run. • Clean Code: You can finally turn your linter rules back on and trust your dependencies again. The Shift: We are moving away from fighting the framework and using dedicated primitives to separate reactive synchronization from non-reactive events. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebDev #WebPerf #Tips #DevTips #ReactTips #FrontendDeveloper #DeveloperTips

⚛️ A Small React Technique That Can Improve Performance – Debouncing While building a React search feature, I noticed something interesting. Every time a user typed a letter, the application was making an API request immediately. That means if someone typed “React”, the API was called *5 times*. This is where *debouncing* becomes very useful. 💡 Debouncing delays the function execution until the user *stops typing for a short time*. This helps to: ⚡ Reduce unnecessary API calls 🚀 Improve application performance 😊 Provide a smoother user experience Small optimizations like this make a *big difference in real-world applications*. Sometimes improving performance is not about writing more code — it’s about writing *smarter code*. #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #Performance

🚀 Stop Managing State Manually — Let React Do the Heavy Lifting For a long time in React (especially React 17/18), handling form submissions meant writing extra logic: managing loading state, preventing default behavior, handling async calls manually… and repeating this pattern again and again. It worked — but it wasn’t elegant. Now with React 19, things are changing in a powerful way. ✨ With hooks like useActionState, React introduces a more declarative and streamlined approach: No more manual loading state management No need for repetitive event handling Cleaner and more readable components Built-in handling of async actions Instead of telling React how to handle everything step-by-step, we now focus on what we want — and let React take care of the rest. 👉 This shift is not just about writing less code. It’s about writing better code. Code that is: ✔ Easier to maintain ✔ Less error-prone ✔ More scalable ✔ More aligned with modern frontend architecture As developers, growth comes from unlearning old patterns and embracing better ones. 💡 The real question is: Are we just writing code that works… or are we writing code that evolves? #React19 #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #CodingJourney #SoftwareEngineering

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

Async/Await vs Promises — When to Use What? Both handle async operations, but here's my rule: Use Promises when: You need to run multiple operations in parallel Using .all() or .race() Use Async/Await when: You need sequential execution Readability matters (and it always does!) Error handling with try/catch is cleaner Example: // Clean sequential flow async function getData() { try { const user = await getUser(); const posts = await getPosts(user.id); return posts; } catch (error) { console.error(error); } } What's your preference? Async/await or Promises? #JavaScript #NodeJS #AsyncProgramming #CodingTips #WebDev

Why do we specifically pass 'props' into 'super(props)' in a React component constructor? It is one of those things many developers do out of habit without realizing the actual mechanism behind it. While calling 'super()' is a JavaScript requirement to initialize the 'this' keyword, passing 'props' is a very specific React requirement for the constructor phase. The reason is simple: visibility. When you call 'super(props)', you are telling the parent 'React.Component' class to initialize 'this.props' for you immediately. If you only call 'super()' without the argument, 'this.props' will be undefined inside the constructor. React eventually assigns props to the instance anyway, but that happens after the constructor has finished running. If your logic requires you to access a property or compute a state based on a prop right inside the constructor, forgetting the 'props' argument will crash your logic. You would be trying to read from a variable that hasn't been wired up to the instance yet. Even though modern React code bases have shifted to Functional Components where this ceremony is gone, the underlying logic of when data becomes available to an instance is a core part of the library’s history. It is a small detail that perfectly illustrates how React works under the hood. #ReactJS #Javascript #SoftwareEngineering #FrontendDevelopment #WebDev #CodingTips

Most developers don’t misunderstand JavaScript. They misunderstand time. . Take setTimeout vs setImmediate. On the surface, they look interchangeable. “Just run this later,” right? That’s the lie. Here’s the reality: setTimeout(fn, 0) → runs after the current call stack + timers phase setImmediate(fn) → runs in the check phase, right after I/O So under load or inside I/O cycles… they don’t behave the same at all. Example: You’re handling a heavy I/O operation (like reading a file or API response). setTimeout → might delay execution unpredictably setImmediate → executes right after the I/O completes One is scheduled. The other is strategically placed in the event loop. That difference? It’s the kind that causes race conditions no one can reproduce. Most people write async code. Very few understand when it actually runs. And that’s where bugs live. #JavaScript #NodeJS #Async #SoftwareEngineering #Backend

🧠 Dev Tip #2 – Lightweight Global State Instead of using heavy state libraries, I often use Zustand for global state. Why I like it: ✔ Minimal boilerplate ✔ Simple API ✔ Works great with React and Next.js Example use cases in my projects: • Auth state • Call state • Shared UI state across dashboards Simple and powerful. Sometimes the best tool is the simplest one. #reactjs #zustand #javascript #frontenddeveloper #webdevelopment