Optimizing React Components for Performance

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

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

📌 Today I learned: useReducer — React's powerful alternative to useState When state logic gets complex, useReducer brings structure and clarity. The core concept: ``` const [state, dispatch] = useReducer(reducer, initialState); ``` Instead of directly updating state, you dispatch **actions**. The reducer — a pure function — takes the current state + action and returns the next state. 🔑 Key benefits I discovered: → Centralised logic — all state transitions live in one function → Easier debugging — every state change has an explicit action → Scales better — perfect for complex UI with multiple transitions → More testable — reducers are just pure functions! UseReducer shines when: • You have 3+ related state variables • State updates depend on previous state • Multiple actions affect the same piece of state Think of it like Redux — but built right into React, no extra libraries needed. One day of learning, but the concept already feels foundational. Excited to keep building with it! 🚀 #ReactJS #useReducer #StateManagement #JavaScript #WebDevelopment #FrontendDev #LearningInPublic

📘 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

React Under the Hood: Virtual DOM & Reconciliation Ever wonder why React is so fast? It’s all about Reconciliation—the smart way React updates the UI without the "heavy lifting" of the Real DOM. 🚀 The 3-Step Process: The Virtual DOM (VDOM): React creates a lightweight "blueprint" (a JS object) of your UI in memory. Updating this is nearly instantaneous. The Render Phase (Diffing): When state changes, React creates a new VDOM and compares it with the old one. This "Diffing Algorithm" pinpoint exactly what changed. The Commit Phase: Only the identified changes are applied to the Real DOM. This ensures the browser only repaints what is absolutely necessary. 💡 The Big Win: By using an interruptible Asynchronous Render Phase, React keeps the UI responsive even during complex updates. 🎓 Learning at Sheryians Grateful to my mentors for these deep dives into framework internals. Special thanks to @Ritik Rajput, @Devendra Dhote, @Daneshwar Verma, and @Sarthak Sharma at @Sheryians Coding School. 🚀 #ReactJS #FrontendDevelopment #WebDev #VirtualDOM #JavaScript #SheryiansCodingSchool

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

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

🌐 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

If Javascript is single-threaded, how can 'await' wait? 🤔 If it actually waited, the whole app would freeze !! Actually, await pauses the function, not the thread. 1. In an async function, when 'await getSomePromise()' is encountered, the rest of the function is scheduled as a microtask (pausing for "awaited" promise) 2. The thread returns to the caller of async function. 3. Once the Promise resolves it enters the microtask queue, to get executed by javascript engine once the call stack becomes empty. 🧠 Mental model: Think of a function as a chapter in a book 📕, Within a chapter, 'await' simply places a bookmark, moves on to other chapters, and comes back later. 📝 I wrote a short blog explaining this step-by-step with code and execution flow here👇🏻 https://lnkd.in/g5q2CjWU #javascript #asyncawait #webdevelopment #promises #frontend #softwareengineering #eventloop #javascriptinternals #programming #coding #microtasks

🚀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