React Hooks: useState and Batching Explained

Today I was working with React and noticed something interesting. Sometimes a single line of code can make things much simpler and cleaner. Here are 5 small React patterns that I find really useful: 1.Conditional rendering {isLoggedIn && } 2.Ternary rendering {isLoggedIn ? : } 3.Destructuring props const { title, description } = props 4.Rendering lists with map {items.map(item => {item.name})} 5.Passing props using spread <Component {...props} /> React has many features like this that make code shorter and easier to read. The more I explore it, the more I realize how powerful simple patterns can be. #reactjs #javascript #webdevelopment Sheryians Coding School

🚀 Learning React: Understanding Props Today, I learned an important concept in React called Props (Properties). Props allow us to pass data from one component to another, making our code more dynamic, reusable, and efficient. Instead of writing the same code again and again, we can create flexible components that adapt based on the data they receive. 🔑 Key Takeaways: Props are used to transfer data between components They make components reusable Props are read-only (cannot be modified inside the component) 📌 Example: We can pass values like names, images, or functions from a parent component to a child component using props. Learning props is a big step toward building real-world React applications 💻 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #LearnToCode #ReactLearning

useState() is a simple hook in React that updates its state using a set function, right? Yes… if you only look at it from the surface level. But under the hood, a lot more is happening when you use useState. Whenever you call setState, React doesn't simply replace the value immediately. Instead, several important things happen behind the scenes: 1️⃣ State Value Update When you call the setter function (like setCount()), React schedules a state update. It stores the new value in an internal update queue instead of updating it instantly. 2️⃣ Component Re-rendering After scheduling the update, React triggers a re-render of the component so the UI can reflect the new state. 3️⃣ Previous vs Current Value Check React compares the previous state with the new state. If both values are the same, React skips the re-render to avoid unnecessary work and improve performance. 4️⃣ Batching React groups multiple state updates together. If you call multiple setState functions inside the same event or function, React batches them and performs only one re-render instead of multiple renders. Example: setCount(1) setCount(2) setCount(3) React will process them together and the final state will be 3, with only one re-render. So useState is not just a variable with a setter. all these deep dive learning possible because of Sheryians Coding School and Devendra Dhote bhaiya so all thanks to them #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #ReactHooks #useState #LearnInPublic

📘 Today I Learned Form Handling in React Today I explored different ways of handling forms in React and learned how useRef and React Hook Form can simplify form management. 🔹 Using useRef With useRef, we can directly access DOM elements without re-rendering the component on every input change. This approach is useful for uncontrolled components and can improve performance when we don’t need React state for every field. 🔹 React Hook Form I also learned about React Hook Form, a powerful library that makes form handling easier by: Reducing unnecessary re-renders Providing built-in validation Keeping code clean and scalable Managing form state efficiently What I liked the most is how React Hook Form combines performance with simplicity, especially for larger forms. Sheryians Coding School Devendra Dhote #React #WebDevelopment #FrontendDevelopment #ReactHookForm #JavaScript #LearningInPublic

📅 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

🌐 What is DOM in React.js? Before understanding React deeply, it’s important to understand the DOM (Document Object Model). The DOM represents a web page as a tree structure, where every HTML element is a node that JavaScript can interact with. 🧠 In simple terms: 👉 DOM = Structure of your web page 👉 It allows you to read, update, style, and handle events ⚙️ How it works: When a browser loads a webpage: 1️⃣ HTML is parsed 2️⃣ Converted into a DOM tree 3️⃣ JavaScript can interact with it 🚀 Why it matters in React? Directly updating the DOM is slow and expensive. That’s why React uses: ✔ Virtual DOM ✔ Efficient updates ✔ Reconciliation to update only the changed parts of the UI 💡 Key Takeaway Understanding DOM is the first step to understanding how React actually works behind the scenes. Still learning. Still building. 🚀 — Anuj Pathak #reactjs #javascript #webdevelopment #frontenddevelopment #softwareengineering #developersoflinkedin #programming #techlearning #coding #learninginpublic

Props vs State in React Most beginners get confused between Props and State in React. At first, both seem similar because both store data. But the real difference is simple: * Props = Data received from another component * State = Data managed inside the component Example: function Parent() { return <Child name="Durgesh" />; } function Child(props) { return <h1>{props.name}</h1>; } Here, `name` is a prop because it comes from the Parent component. Now look at State: const [count, setCount] = useState(0); Here, `count` is managed inside the same component. Quick Difference 👇 • Props are read-only • State can be updated • Props come from parent to child • State belongs to the component itself Think like this: Props = Things you receive State = Things you control Once you understand this difference, React becomes much easier. What confused you more when learning React — Props or State? #react #javascript #frontend #webdevelopment #reactjs #coding

🚀Day 97 of Cohort2.0 Today's class was about More on Instagram clone project with Ankur Prajapati at Sheryians Coding School In This session, i implemented some more API's that will further be used while interacting frontend. i learned some crucial security related and error Handling related concepts that helps in better user experience and make the app more manageable. #responsiveness #responsivedesig #css #scss #html #Cohort2 #webdevelopment #Javascript #react #DOM #frontend

Day 20 of Learning JavaScript 🚀 Built my first mini project: Counter App Features: • Increase count • Decrease count Concepts used: • DOM • Events • Variables Simple project, but big confidence boost. #javascript #frontenddeveloper #projects

🚀 Diving into React Hooks: Mastering useState 🎣 Have you struggled with managing component state in React? Let's simplify it with useState - a powerful Hook that allows functional components to manage state! 🌟 ⚙️ Why it matters for developers: useState is a game-changer for React devs, providing a straightforward way to handle state within functional components. It streamlines code, enhances readability, and boosts development productivity. 🚀 🔍 Step by step breakdown: 1️⃣ Define the state variable 2️⃣ Set the initial state using useState 3️⃣ Update the state value as needed 💻 Full code example: ```jsx import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }; ``` 💡 Pro tip: Use object destructuring to manage multiple state variables efficiently. ❌ Common mistake: Forgetting to pass the correct initial state argument to useState. 🤔 Ready to level up your React skills with useState? Share your favorite use case below! 💬 🌐 View my full portfolio and more dev resources at tharindunipun.lk #ReactHooks #useState #ReactDevelopment #CodeNewbie #WebDevTips #JavaScript #FrontendDevelopment #StateManagement #LearnToCode #DeveloperCommunity