React Errors: Functions in JSX and Immutable State

Do you know the real difference between a State Update and a Key Change? 1. **State Update**: When state or props are updated, React keeps the component alive, only updating the new data. This means any internal state or form data remains intact. 2. **Key Change**: In contrast, changing the key causes React to destroy the component entirely and create a new one. As a result, all internal state is lost and resets to default. **Pro Tip**: Many developers believe keys are only for lists, but they can also be used to force a component to remount (reset). However, this action destroys the DOM, which can be costly if not approached with caution. For a practical demonstration, check out my code example: https://lnkd.in/gmtZYPnP #ReactJS #WebDevelopment #Frontend #JavaScript #ReactKey

React Optimization: useMemo() hook.. Why first code in the image fails: In JavaScript, objects are compared by reference, not value. Even though { color: 'red' } looks the same as the previous render, React sees a new memory address. 👉 Result: The useEffect thinks options has changed and fires on every single render. You just created an infinite loop or an API spammer. Why the code below works: useMemo tells React: "Keep this object at the same memory address unless dependencies change." 👉 Result: The useEffect sees the exact same reference and skips the re-run. 💡 The Lesson: Don't just ask "Is this function heavy?" Also ask: "Am I passing this object/array into a dependency array?" If the answer is yes, you need useMemo to stabilize it. #ReactJS #WebDevelopment #JavaScript #CodingTips #FrontendEngineering

Why does this confuse people in React? Because it behaves very differently in classes vs hooks. 🧠 In React Class Components this refers to the component instance class Counter extends React.Component { state = { count: 0 }; increment() { this.setState({ count: this.state.count + 1 }); } render() { return <button onClick={this.increment}>+</button>; } } ❌ This breaks because this is lost in callbacks Fix it by: binding in constructor or using arrow functions increment = () => { this.setState({ count: this.state.count + 1 }); }; So in classes: this exists this must be bound correctly 🧠 In React Hooks (Functional Components) There is no this function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>+</button>; } Why? Functions don’t create component instances State is handled via closures No binding issues Much simpler mental model Hooks removed this from React because this was a common source of bugs, confusion, and boilerplate. If you understand this, React suddenly feels… calmer 😌 #reactjs #javascript #frontend #interviewprep

✨📝JavaScript Event Loop vs Thread Pool — How Async Really Works In my previous post, I spoke about the Thread Pool. A natural follow-up question is: how does JavaScript handle async operations with a single thread? Here’s a simple breakdown 👇 🧠 JavaScript is single-threaded Only one call stack executes code at a time. 🔁 Event Loop Continuously checks: Is the call stack empty? Are there tasks waiting in the queue? 🧵 Thread Pool (behind the scenes) Heavy or blocking tasks are offloaded: 1.File system operations 2.Crypto tasks 3.DNS lookups (Handled by libuv in Node.js, not the JS thread) ⏳ Execution Flow 1.JS code runs on the call stack 2.Async task is delegated to Web APIs / 3.Thread Pool 4.Callback is pushed to task queue 5.Event loop moves it back to the stack when ready. ⚠️ Why this matters 1.Blocking the main thread = poor UI / slow APIs 2.Understanding this helps write better async code 3.Crucial for performance optimization in real apps This knowledge becomes very important when working with: ✔️ Promises & async/await ✔️ API-heavy applications ✔️ Performance-critical frontend & Node.js systems #JavaScript #EventLoop #ThreadPool #AsyncProgramming #FrontendDevelopment #NodeJS #ReactJS #WebPerformance

🚀 Spread vs Rest Operator — Most Developers Confuse This Both use ... Both look identical But they solve opposite problems 👀 🔹 Spread (...) → Expand things const user = { name: "Alex", age: 25 }; const updatedUser = { ...user, city: "Delhi" }; ✅ Used for: Immutable updates Object/array cloning Clean React state updates 🔹 Rest (...) → Collect things function greet(...names) { return `Hello ${names.join(", ")}`; } ✅ Used for: Handling unknown arguments Building flexible APIs Reusable utility functions 🧠 Rule of Thumb 👉 Spread = expand 👉 Rest = collect Same syntax. Different intent. Misunderstanding this often leads to messy React code ⚠️ #JavaScript #ReactJS #FrontendDeveloper #WebDevelopment #CodingTips #CleanCode #ReactHooks

Can you actually solve this Node.js event loop question? No running the code. No guessing. Just reasoning. I’m sharing a short Node.js snippet Your task is simple , but not easy 👇 Predict the exact output order Assume this runs in Node.js, not the browser Timers, Promises, nextTick, I/O, setImmediate are all involved One wrong assumption and the output breaks Most people get confident… then get it wrong The trick is not memorising order The trick is knowing when micro tasks interrupt phases And why poll vs check matters If you can explain why each line runs where it does, you actually understand the event loop. What’s the final output order? Drop it in the comments. #NodeJS #JavaScript #EventLoop #BackendInterviews #InterviewPrep #FullStack #SystemDesign

All React 19 Feature Explained in 8 minutes. This video explains React 19's key features in just eight minutes. Learn how the new compiler converts React code into regular JavaScript, improving performance and simplifying development. Explore new hooks that streamline data fetching and context management, alongside directives and actions for enhanced form handling. ----------------------------------------------- Please Watch Here: https://lnkd.in/gC6E2r-s And Subscribe my channel for more... ----------------------------------------------- Follow Rahul Choudhary for more. JavaScript Mastery w3schools.com #react | #frontend | #frontenddeveloper | #trending | #reactjs #new #js #ts #javascript

Closures are not a JavaScript concept you “learn once.” You understand them after debugging production issues. In React, closures quietly control: 🎯 Event handlers 🔄️ useEffect callbacks ⏳ Async logic 🧩 Custom hooks This is why many bugs initially feel random or out of sync. This carousel is not about definition. It’s about what closures actually do in real React code — and why missing this mental model leads to stale state, confusing logs, and unpredictable behavior. Every senior frontend developer I know didn’t master closures from tutorials. They learned them from code reviews, regressions, and late-night debugging sessions. If React has ever surprised you, there’s a good chance closures were involved. 👉 Swipe through the carousel 👉 Then tell me in the comments: Where did closures confuse you the most — `useEffect`, event handlers, or async logic? #JavaScript #ReactJS #FrontendDevelopment #SoftwareEngineering #WebDevelopment #CleanCode #DeveloperExperience #SeniorDeveloper #LearnWithKushal

I explored React's source code to understand why the ref value doesn't change after multiple re-renders. Let's discuss what happens under the hood in React. 1. React initializes the ref object with initialValue defined in the code. 2. The ref object is saved in the memoizeState property of the hook node in the linked list of hooks. 3. The hooks linked list is internally managed by React with the order in which we define hooks in the component's code. 4. If useRef is the first hook, its data will get saved on memoizedState property of an internal structure called currentlyRenderingFiber which refers to the fiber node of the component currently being rendered. 5. Otherwise, the work-in-progress pointer will add useRef to the hooks linked list as per the order of the hooks in the code. 6. WorkInProgress is an internal pointer to traverse the hooks linked list, add a new hook during the first render, or reuse/clone existing ones during re-rendering. 7. React maintains hooks in a linked list so that the order of hooks doesn't get changed. When rerender happens 1. The React updateRef method is called internally, and the WorkInProgress pointer traverses through the hooks linked list, finds, and returns the same memoizedState node against which ref was initially defined. Points no. 4, 5, and 6 might feel quite overwhelming; I will discuss these in the coming days. I do a deep dive into foundational concepts & how things work under the hood. You can consider connecting with or following me, Ali Raza, to get along with the journey. #react #javascript #frontend #nextjs

React19 introduces useActionState to standardize this entire flow 👇 . Handling form submissions in React used to be a ritual of boilerplate. We had to: 1. e.preventDefault() 2. Create useState for loading. 3. Create useState for errors. 4. Wrap the fetch in a try/catch block. ❌ The Old Way (Event Handlers): You manually manage the transition from "submitting" to "success" or "error." It’s imperative code that is easy to mess up (e.g., forgetting to reset the error state on the next attempt). ✅ The Modern Way (Action State): You pass an async function (Action) to the hook. React gives you: • state: The return value of the last action (e.g., validation errors or success message). • formAction: The function to pass to <form action={...}>. • isPending: A boolean telling you if the action is currently running. Why this is cleaner: 🧠 Declarative: You define what happens, not how to track the lifecycle. 🛡️ Progressive Enhancement: Works even if JavaScript hasn't loaded yet (if using a framework supporting SSR). 📉 Less Code: Deletes the onSubmit boilerplate entirely. Note: In previous Canary versions, this was called useFormState. It has been renamed to useActionState in the stable release. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #Hooks #Tips #ReactDev #JS #ReactForm #ReactTips #FrontendDeveloper