React Hooks: State, Queue, and Linked List Explained

Why Array Comparison in React State Is Tricky? If you’ve ever updated an array in React and your component didn’t re-render, you’re not alone. The reason? React compares state by reference, not by value. So if you modify the same array instead of creating a new one, React thinks nothing changed — even if the data inside it did. Never mutate state directly. Always create a new array or object when updating state. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment

Today I learned about the useRef hook in React, and it’s actually very useful! What is useRef? It allows us to create a reference that persists across renders without causing re-renders. Key Uses: Access DOM elements directly Store mutable values without re-rendering Useful for focus, timers, and previous values Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); } What I learned: Unlike state, updating useRef does NOT trigger a re-render. Excited to explore more React hooks! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #90DaysOfCode

JavaScript Event Loop – Quick Example Understanding the Event Loop is important for writing efficient asynchronous JavaScript. Example: console.log("Start") const prom = new Promise((res) => res(true)) setTimeout(() => console.log("setTimeout"), 0) process.nextTick(() => console.log("nextTick")) queueMicrotask(() => console.log("microtask")) console.log(prom) Output order will be: Start Promise { true } nextTick microtask setTimeout Why? Because JavaScript processes tasks in this order: 1. Synchronous code 2. Microtasks (nextTick, Promises, queueMicrotask) 3. Macrotasks (setTimeout, setImmediate) Understanding this helps when debugging async issues in frontend apps. #javascript #webdevelopment #frontend #vuejs #eventloop

Controlled Components in React Today I learned about Controlled Components in React. A controlled component is a form element whose value is controlled by React state instead of the DOM. This means React manages the input values using state and updates them through event handlers. 📌 How It Works The input value is stored in state The input field uses that state as its value When the user types, an onChange event updates the state This way React fully controls the form data. Understanding controlled components helped me see how React manages form inputs efficiently. Continuing to build strong React fundamentals step by step 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Day 82 / 365 👨💻 Started understanding React state. 🧠 Problem that useState solves ⚙️ How useState works step by step 🔄 Why re-rendering happens ⏳ Why state updates aren’t immediate 🔁 Updater function vs direct value #365DaysOfCode #React #JavaScript #Frontend

Built a Password Generator using React while learning React Hooks in depth. Worked with useState, useEffect, useCallback, and useRef to understand state management, DOM access, and performance optimization in a practical way. #ReactJS #WebDevelopment #Frontend #LearningInPublic #JavaScript

React Hooks: useState vs useRef — Know the Difference When working with React functional components, two commonly used hooks are useState and useRef. While they may seem similar at first, they serve different purposes. -- useState * Used to store and manage component state * When the state updates, React re-renders the component * Ideal for data that affects the UI Example: const [count, setCount] = useState(0); -- useRef * Used to store mutable values that persist across renders * Updating a ref does NOT trigger a re-render * Commonly used for accessing DOM elements or storing previous values Example: const inputRef = useRef(null); -- Simple Rule to Remember: * If the value affects the UI → useState * If the value should persist but not trigger re-render → useRef Mastering these hooks helps you write cleaner and more efficient React components. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #ReactHooks #SoftwareDevelopment

I used to think React loads everything at once… until I learned lazy loading. 🤯 Now I understand how apps become faster and more efficient. ⚡ 💠Load only what is needed 💠 Improve performance 💠 Reduce bundle size Here are my notes for revision. ✍️ #React #JavaScript #LearningInPublic #FrontendDeveloper

🔒 React sanitizes user input automatically. But one line can break everything. Normal rendering? You're safe. <p>{userInput}</p> // React escapes this. Always . The moment you do this — you're on your own: dangerouslySetInnerHTML={{ __html: userInput }} The word "dangerous" is literally in the name. React is warning you. Always pair it with DOMPurify. And never trust user-controlled URLs — a javascript: href executes on click. React is secure by default. Just don't fight against it. Ever used dangerouslySetInnerHTML in production? 👇 #ReactJS #WebSecurity #Frontend #JavaScript