Handling Forms in React: Controlled vs Uncontrolled Components

🚀 Day 964 of #1000DaysOfCode ✨ useState & useEffect — What They Are & When to Use Them These are the most used hooks in React… yet many developers don’t fully understand when to use each one. In today’s post, I’ve explained `useState` and `useEffect` in a simple and practical way — not just what they are, but when you should actually use them in real-world scenarios. `useState` helps you manage and update state inside your components, while `useEffect` is used to handle side effects like API calls, subscriptions, and syncing data. The confusion usually comes when developers mix their responsibilities — leading to unnecessary re-renders or messy logic. Understanding the clear separation between state and side effects can make your React code much cleaner and easier to reason about. If you’re working with React daily, mastering these two hooks is absolutely essential. 👇 What confuses you more — managing state or handling side effects? #Day964 #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #ReactJS

## 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

One React Hook changed the way I build dynamic forms. And honestly, it saved me from a lot of messy code. Before using useFieldArray in React Hook Form, I used manual state for dynamic fields. At first, it looked manageable. But as the form started growing, the logic became messy very quickly. Adding fields, removing fields, keeping values in sync, and handling validation started taking more effort than expected. The feature was simple, but the code was not. Then I started using useFieldArray. That is when I understood how useful this hook is in real projects. It makes dynamic form handling much cleaner. Add and remove actions become easier. The structure feels more organized. And the code becomes easier to maintain. For me, the biggest lesson was simple: Sometimes a problem feels difficult not because it is truly hard, but because we are solving it in a harder way. If you work with dynamic forms in React, this hook is worth understanding deeply. What React Hook made your code noticeably cleaner? #ReactJS #JavaScript #FrontendDevelopment #ReactHookForm #SoftwareEngineering #WebDevelopment #NextJS

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

A lot of developers get confused between controlled and uncontrolled inputs in React — the difference is small, but it changes everything. 🔹 Controlled Inputs Here, React controls the input using state (useState). Every change goes through React, which makes validation, real-time updates, and data handling much easier. 🔹 Uncontrolled Inputs Here, the DOM manages the input state. You access the value using useRef only when needed, which can be useful in simpler or less interactive scenarios. 📌 The difference is just about who controls the data — React or the DOM. But this small difference impacts how you handle validation, performance, and overall form behavior in real-world applications. Understanding this properly makes form handling much more predictable and scalable. #ReactJS #FrontendDevelopment #JavaScript #MERNStack #SoftwareDevelopment #WebDevelopment #FullStackDeveloper #LearningInPublic #CodingJourney #DevelopersLife

React 19 is changing how we think about state, async flows, and data handling. 👉 Explore the full comparison guide 🔗 https://shorturl.at/8VO3v 📌 What you’ll discover: ➜ What React 19 Actions actually are and how they work ➜ How Actions simplify async logic, forms, and state updates ➜ Where Redux still makes sense and where it doesn’t ➜ Key differences in complexity, scalability, and developer experience ➜ When to choose Actions, Redux, or a hybrid approach React 19 Actions reduce the need for heavy state management ⚡ ✍ Written by Pruthvi Darji and Utsav Khatri #ReactJS #Redux #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #React19 #DeveloperTools

🚀 React State Management — Learned Today! Built a dynamic product list in React where users can add new items through a form — and the UI updates instantly! ⚡ What I implemented: ✅ Controlled components with useState ✅ Props drilling — passing functions from parent to child ✅ Spreading state to add new objects in array ✅ Form handling with e.preventDefault() Key lesson learned: Always pass state variable (newitem) to child components — not the static array (item) — otherwise UI won't re-render! 🧠 jsx setNewitem([...newitem, { name: data.title, date: new Date(data.date) }]); Slowly but steadily building my React fundamentals! 💪 🔗 GitHub: https://lnkd.in/g_7SwfZm #React #JavaScript #MERN #WebDevelopment #100DaysOfCode #Frontend #AccioJob

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

🧠 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