React useState Hook: Behind the Scenes

Today I learned how form handling works in React using React Hook Form, which makes managing multiple input fields and validations super easy! 🔹 What is React Hook Form? React Hook Form is a library that simplifies form handling in React. Instead of manually managing state for every input, it lets React handle forms efficiently with minimal re-renders. 🔹 Managing Multiple Inputs All input fields can be registered using the register function, and validations can be added easily. Example idea: import { useForm } from "react-hook-form"; const { register, handleSubmit, formState: { errors } } = useForm(); <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name", { required: "Name is required" })} /> {errors.name && <p>{errors.name.message}</p>} <input {...register("email", { required: "Email is required" })} /> {errors.email && <p>{errors.email.message}</p>} <input type="submit" /> </form> 🔹 Handling Validations & Errors register connects inputs to React Hook Form errors object shows validation errors Works well with external validation libraries like Yup 💡 Key Takeaway Using React Hook Form helps us: ✔ Reduce boilerplate and re-renders ✔ Manage multiple inputs efficiently ✔ Handle validations easily ✔ Build scalable and maintainable forms Special thanks to Devendra Dhote and Sheryians Coding School for the insights! 📌 Day 17 of my 21 Days React Learning Challenge #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #ReactForms

Today I learned about React Hooks, especially the useState hook and Batching. 🔹 Hooks allow functional components to use React features like state and lifecycle. 🔹 useState is used to store and update data inside a component. const [count, setCount] = useState(0) • count → current state • setCount → function to update state When the state changes, React re-renders the component and updates the UI. 🔹 Batching means React groups multiple state updates together and performs a single re-render, which improves performance. 💡 Key idea: Hooks make React code simpler, cleaner, and more powerful. Big thanks to Devendra Dhote and Sheryians Coding School for explaining these concepts clearly 🙌 📌 Day 12 of my 21 Days JavaScript / React Challenge #ReactJS #JavaScript #ReactHooks #LearningInPublic #WebDevelopment

📅 Day 21/21 – React Hook Form & Validation (Final Day 🎯) ⚛️ On the final day of my challenge, I learned how to handle forms and validation efficiently using React Hook Form. 🔹 What is React Hook Form? It is a library that simplifies form handling in React with: ✔ Less code ✔ Better performance ✔ Built-in validation support 🔹 Why use it? Instead of managing multiple states manually: • It uses refs internally • Reduces unnecessary re-renders • Makes forms cleaner and scalable 🔹 Basic Example import { useForm } from "react-hook-form"; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <button type="submit">Submit</button> </form> ); } 🔹 Validation Example <input {...register("email", { required: "Email is required" })} /> 💡 Final Takeaway from 21 Days Over the last 21 days, I learned: ✔ Core JavaScript concepts ✔ React fundamentals ✔ Real-world development thinking ✔ Consistency and discipline This journey helped me grow from learning concepts → building projects → understanding how things work internally. 🙏 Thanks to Devendra Dhote and Sheryians Coding School for the guidance throughout this journey. 🚀 This is not the end… just the beginning. #ReactJS #JavaScript #FrontendDeveloper #LearningInPublic #Consistency #WebDevelopment

React Re-rendering Is NOT What You Think… When I started React, I thought: “State changes → Component re-renders → Done” Simple… right? But I was completely WRONG Truth: React doesn’t just re-render that one variable It re-renders the ENTIRE component Example: const [count, setCount] = useState(0); console.log("Component Rendered"); Every click → Whole component runs again All functions re-created All calculations re-execute The Mistake I Made: I was doing heavy work inside components like: const filteredData = data.filter(...) So every render → Expensive calculations again Performance drop The Fix (Game Changer): useMemo() const filteredData = useMemo(() => { return data.filter(...) }, [data]); -----Now it only runs when needed Another Hidden Issue: Functions inside components const handleClick = () => {} Re-created on EVERY render Fix? useCallback() Golden Rule: If something is: Expensive → useMemo Function passed to child → useCallback My Learning: React is not about writing code It’s about controlling re-renders What about you? Did you know your whole component re-renders every time? Devendra Dhote Daneshwar Verma Ritik Rajput #reactjs #javascript #webdevelopment #frontend #performance #coding #reactdeveloper #learninpublic

Today I explored an important concept in React — Form Handling using useState vs useRef 🚀 While working on forms, I understood how these two hooks behave very differently and when to use each of them. 🔹 useState Used when we want the UI to update Triggers re-render on every change Best for controlled components (like input fields) 🔹 useRef Does NOT trigger re-render Stores a mutable value across renders Helps in directly accessing DOM elements One key learning for me was how React allows us to access the DOM using the ref attribute. Instead of using traditional DOM methods like querySelector, we can attach a reference and access it through .current. Example: Creating a reference using useRef Attaching it to an input using ref Accessing the DOM element using inputRef.current This made me understand how React bridges the gap between the Virtual DOM and the Real DOM using refs and synthetic events. 💡 Key takeaway: useState → when UI needs to update useRef → when you need to store values or access DOM without re-render Learning these small differences is helping me build a stronger foundation in React and understand how things work under the hood. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #LearningInPublic

🔴 Why NestJS is not just a framework, it’s an architecture Most people see NestJS as “Express with decorators”. That’s a mistake ❌ NestJS is not about HTTP. It’s about structure 🧱 When used properly, you’re not just creating endpoints — you’re defining boundaries: • Modules → domain separation • Providers → dependency injection • Controllers → entry points • Guards / Pipes / Interceptors → cross-cutting concerns This is intentional 🎯 NestJS pushes you toward scalable patterns: Clean Architecture, SOLID, DDD 🚀 In small apps, it may feel like overengineering. In large systems, it’s what keeps things maintainable. The biggest mistake? Using NestJS like Express ⚠️ Flat structure. No boundaries. Services doing everything. If you’re using NestJS, don’t think: “How do I create an endpoint?” Think: “How do I design a system that scales?” 🧠 Because NestJS is not just a framework. It’s an architectural decision. #nestjs #nodejs #backend #softwarearchitecture #cleanarchitecture #ddd #webdevelopment #fullstack #typescript #api #scalable #backenddeveloper #softwareengineering #devcommunity #programming #techlead #systemdesign #coding #developers #javascript

React fundamentals to get right early Understanding onClick and onChange is key to handling events correctly in React A common pattern to be aware of: onClick={handleClick(id)} This executes immediately during render --- Correct approach: onClick={() => handleClick(id)} This runs only when the user clicks --- Why? React expects a function reference, not a function call - handleClick → correct - handleClick() → executes immediately --- Same concept applies to onChange: onChange={handleChange(value)} // executes immediately Better: onChange={(e) => handleChange(e.target.value)} --- Simple rule: If you need to pass arguments → use an arrow function --- Things to watch out for: - Functions running on every render - Unintended API calls - Difficult-to-debug behavior --- Benefits of correct usage: - Runs only on user interaction - More predictable component behavior - Cleaner and maintainable code --- Additional note: onClick={handleClick} (if your function expects arguments) This may result in "undefined" --- Example: {users.map(user => ( <button onClick={() => handleClick(user.id)}> Click </button> ))} --- Focusing on fundamentals like this helps build more reliable React applications #ReactJS #JavaScript #Frontend #WebDevelopment

Today I explored some important concepts in React that help in building interactive and efficient user interfaces. ** Event Delegation React uses event delegation, which means events are handled at a higher level (root) instead of attaching them to each element. This improves performance. ** Synthetic Events & Base Events React uses Synthetic Events, which are wrappers around native browser events. They provide a consistent behavior across all browsers. These are based on native (base) events but are optimized for React. ** JSX (JavaScript XML) JSX allows us to write HTML-like code inside JavaScript. It makes React components more readable and easier to design. ** Form Handling in React I also learned how to handle forms in React using state. It allows us to control input fields and manage user data efficiently. Example: function Form() { const [name, setName] = useState(""); return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } @Sheryians Coding School @Sarthak Sharma @Ritik Rajput @Daneshwar Verma @Devendra Dhote #ReactJS #WebDevelopment #FullStackDeveloper #CodingJourney

✨ Just wrapped a class on React — and my perspective on frontend dev has completely shifted. Before class, I thought React was just "fancy JavaScript." After class? I realize it's a whole new way of thinking about UIs. 🧠 Here's what clicked for me: 🔹 Components are like LEGO blocks Everything in React is a reusable piece — buttons, navbars, cards. You build once, use everywhere. No more copy-pasting the same HTML 10 times. 🔹 The Virtual DOM is React's superpower Instead of updating the entire page on every change, React creates a virtual copy of the DOM, compares it, and only updates what changed. Blazing fast. Incredibly smart. 🔹 State = the memory of your UI useState taught me that UI is just a function of data. Change the data → UI updates automatically. No manual DOM manipulation. No document.getElementById headaches. 🙌 🔹 Props make components talk to each other Data flows down through props, and events bubble up through callbacks. Once you get this parent-child relationship, React just makes sense. 🔹 JSX is not scary — it's beautiful HTML inside JavaScript? Sounds weird. But JSX lets you co-locate your logic and markup, making components self-contained and readable. 💡 The biggest lesson? React teaches you to think in components, not in pages. It's not just a library — it's a mental model for building modern UIs. If you're learning web development, don't skip React. It will change how you think about code. 🚀 What was YOUR "aha moment" with React? Drop it in the comments 👇 #React #WebDevelopment #Frontend #JavaScript #Learning #TechEducation #100DaysOfCode #ReactJS #CodingJourney

A very common React mistake I see developers make: Mutating State When I was learning React, one concept that changed the way I write code was this rule: 👉 React state must never be mutated.its always immutable. But why? React does not deeply compare objects or arrays when state updates. Instead, it performs a reference(memory) comparison. That means React checks: Old State === New State ? If the reference is the same, React assumes nothing changed and skips re-rendering. Example of a mistake: cart.push(product) // ❌ Mutating state setCart(cart) Here we modified the same array in memory, so React may not detect the change because the memory location is same.so no re-render..no UI update. The correct approach is immutability: setCart([...cart, product]) // ✅ Creating a new array Now React sees a new reference, triggers reconciliation, and updates the UI correctly. 💡 Why React prefers immutability: • Faster change detection • Predictable state updates • Easier debugging • Better performance This small concept explains why patterns like: map() filter() spread operator (...) are used so frequently in React. because all this returns new object or array... Understanding this helped me write cleaner and more reliable React components. What React concept took you the longest to understand? 🤔 #React #Frontend #JavaScript #WebDevelopment #ReactJS