How to force React component re-creation with a unique key

In React, why does changing the ref value not trigger 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

💡 A powerful (and often underrated) use case for useRef in React useRef isn’t just about accessing DOM elements — it quietly solves one of the most important problems in React: preserving mutable values across re-renders without triggering re-renders. A classic example is a stopwatch ⏱️ const timerRef = useRef(null); const start = () => { timerRef.current = setInterval(() => { setSeconds((s) => s + 1); }, 1000); }; const stop = () => { clearInterval(timerRef.current); }; If we used a normal variable like let timer, React would reset it to null after every re-render (since the component function runs again). The result? Your “Stop” button wouldn’t actually stop the timer — the interval would keep running in the background. useRef prevents that by giving you a stable place to store such values — perfect for things like: Intervals / timeouts WebSocket or media stream instances Storing previous values Keeping track of imperative API references It’s one of those hooks that doesn’t re-render the UI, but silently keeps your logic rock solid. ⚙️✨ Sometimes, the most powerful tools are the quiet ones. #ReactJS #FrontendDevelopment #WebDev #JavaScript #useRef

💡React Tip💡 You don't need to use debouncing every time during search or filtering. React 18's useTransition hook offers a more seamless way to manage them. ⚡ 𝗪𝗵𝘆 𝗶𝘁'𝘀 𝗽𝗼𝘄𝗲𝗿𝗳𝘂𝗹: → Keeps your UI responsive during heavy updates → No need for setTimeout or debounce libraries → Built-in priority system for React rendering → Perfect for search filters, data tables, and complex lists 𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺: When filtering large lists, every keystroke can freeze your UI because React tries to update everything immediately. 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻: use useTransition hook from react. useTransition lets you mark certain updates as "low priority" so React can keep your UI smooth. In the code sample example, typing in the search box updates instantly (high priority), while filtering the huge list happens in the background (low priority) without blocking the input. The isPending flag tells you when the background work is still running, so you can show a loading indicator. 𝗞𝗲𝘆 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀: → Input stays responsive - no lag while typing → React automatically prioritizes user input over list updates → isPending gives you a loading state for free → Works seamlessly with Suspense boundaries 𝗖𝗵𝗲𝗰𝗸 𝗼𝘂𝘁 𝘁𝗵𝗲 𝗦𝘁𝗮𝗰𝗸𝗯𝗹𝗶𝘁𝘇 𝗱𝗲𝗺𝗼 𝗹𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁 𝘁𝗼 𝘀𝗲𝗲 𝗶𝘁 𝗶𝗻 𝗮𝗰𝘁𝗶𝗼𝗻. 𝘍𝘰𝘳 𝘮𝘰𝘳𝘦 𝘴𝘶𝘤𝘩 𝘶𝘴𝘦𝘧𝘶𝘭 𝘤𝘰𝘯𝘵𝘦𝘯𝘵, 𝘥𝘰𝘯'𝘵 𝘧𝘰𝘳𝘨𝘦𝘵 𝘵𝘰 𝘧𝘰𝘭𝘭𝘰𝘸 𝘮𝘦. #javascript #reactjs #nextjs #webdevelopment

Did you know that before React Fragments existed, developers had to wrap multiple JSX elements in an array just to render them side by side? Something like this 👇 return [ <Header key="header" />, <Main key="main" />, <Footer key="footer" /> ] We couldn’t return multiple elements directly from a component because JSX is syntactic sugar for React.createElement(), which returns a single React element tree. If you tried to return multiple siblings, React wouldn’t know what the “root” of that tree is — it needs one parent node to efficiently reconcile updates in the virtual DOM. So people started using unnecessary <div> wrappers — the infamous “div soup” — or arrays with keys to hack around it. Then came Fragments: return ( <> <Header /> <Main /> <Footer /> </> ) No extra DOM nodes. No extra noise. Just a clean, semantic structure. It’s a small feature, but one that made React components feel way more natural to write. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactTips

I used to always hear people say “React’s key prop helps React tell elements apart.” I kind of understood it… but it always felt like a vague explanation. Then I thought about how we do things in plain JavaScript. When you dynamically render elements in the DOM, you usually have to give each one a unique id or data-id — so you can update or delete that specific element later. That’s basically what React is doing behind the scenes with the key prop. It uses key to know which list items match between renders, so it can update, move, or remove elements without re-creating everything. So this: {items.map(item => <li key={item.id}>{item.name}</li>)} is kind of the React equivalent of this: li.dataset.id = item.id; Once I connected it to how we handle things in pure JS, the whole “key” concept suddenly made perfect sense 😄 #javascript #reactjs #frontend #webdevelopment

🚀 React Day 2 — The Power of { Curly Braces } ⚛️ Unlike plain HTML (which just sits there), React lets your UI breathe with live data. ✨ In JSX, we use { curly braces } to bring JavaScript to life inside your markup. ✅ Display dynamic values — strings, numbers, and variables ✅ Make attributes flexible and data-driven ✅ Style elements using JS objects wrapped in braces 🧠 Think of it like this: HTML = static photo React JSX = live video with JS controlling every frame 🎥 #React #JavaScript #Frontend #WebDevelopment #LearnReact

🚀 React 19.2 just made forms feel… modern. One of the coolest new things is built-in form actions. Now you can handle form submissions without useState, useEffect, or tons of boilerplate. That means: ✅ less code ✅ fewer bugs ✅ cleaner async logic Here’s the vibe 👇 <form action={async (formData) => { const res = await fetch('/api/send', { method: 'POST', body: formData, }) }}> <input name="email" placeholder="Enter your email" /> <button type="submit">Subscribe</button> </form> That’s it — no state, no handlers, no custom hooks. React automatically handles submission, loading, and even errors — while keeping the UI responsive. In 2025, this feels like React finally catching up with how we actually build products — fast, declarative, and server-first. #React #Frontend #JavaScript #Nextjs #WebDevelopment #React19

A clean To-Do List is more than just a list! I just wrapped up this project, and the key challenge was handling the task reordering logic using pure React state array manipulation (no third-party drag-and-drop library!). The moveTaskUpside and moveTaskDownside functions specifically use array destructuring for an efficient swap: [arr[index-1], arr[index]] = [arr[index], arr[index-1]]. This helped reinforce concepts like immutability when updating state with setTasks. Tech Stack: React (useState) and CSS for the responsive, gradient-based UI. See it live: [Insert your Netlify Link here: https://lnkd.in/giuiwv-i] Let me know your thoughts on the approach! 👇 #ReactDevelopment #JavaScript #StateManagement #CodingProjects #Developer

⚛️ How to Manage Component Re-renders Like a Pro in React One of the biggest challenges in React isn’t just building components — it’s making sure they don’t re-render unnecessarily. Here are a few techniques I use to keep things smooth and efficient 👇 1️⃣ Use React.memo() Wrap functional components to prevent re-renders unless props actually change. ➡️ Great for pure and reusable components. 2️⃣ Use useCallback() and useMemo() wisely Memoize functions and values to avoid creating new references on every render — but only when needed. ➡️ Don’t overuse them; optimization should be intentional. 3️⃣ Avoid passing new inline functions or objects as props ➡️ Instead, define them outside render or memoize them. 4️⃣ Use DevTools to track re-renders React Developer Tools can show which components re-render — it’s a goldmine for debugging performance. ⚡ Bonus Tip: Split large components into smaller ones - smaller re-renders mean better performance and easier debugging. Optimizing re-renders isn’t about doing everything at once — it’s about being aware and using the right tool for the job. How do you handle re-renders in your projects? 👇 #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #ReactTips #WebDevelopment

🧠 𝐖𝐡𝐲 𝐝𝐨 𝐰𝐞 𝐮𝐬𝐞 𝐭𝐰𝐨 𝐜𝐨𝐧𝐬𝐭𝐚𝐧𝐭𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭’𝐬 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞()? Ever noticed this pattern in React? 👉 const [name, setName] = useState(''); At first, it feels like — why not just one variable? 🤔 Here’s the secret 👇 👉 name → stores the current value of your state 👉 setName → is a special function that tells React:- “𝘏𝘦𝘺, 𝘴𝘰𝘮𝘦𝘵𝘩𝘪𝘯𝘨 𝘤𝘩𝘢𝘯𝘨𝘦𝘥 — 𝘳𝘦-𝘳𝘦𝘯𝘥𝘦𝘳 𝘵𝘩𝘪𝘴 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵!” React doesn’t automatically track variable changes like frameworks such as Vue or Svelte. It re-renders only when you call the setter function (𝐬𝐞𝐭𝐍𝐚𝐦𝐞 𝐢𝐧 𝐭𝐡𝐢𝐬 𝐜𝐚𝐬𝐞). So the pair works together: name → to 𝐫𝐞𝐚𝐝 the value setName → to 𝐮𝐩𝐝𝐚𝐭𝐞 + 𝐭𝐫𝐢𝐠𝐠𝐞𝐫 𝐔𝐈 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 That’s the magic of React’s declarative state. ⚡ #ReactJS #FrontendDevelopment #useState #WebDevelopment #JavaScript #LearnReact