React Fundamentals: From XHP to Virtual DOM

I recently revisited the React countdown timer. It reminded me of a mistake many of us have made at least once. Two common problems with timers in React - Memory leaks - Stale state caused by JavaScript closures The closure problem: When we create setInterval, the callback captures variables at creation time. So setInterval(() => {     setRemainingMs(remainingMs - 1000) }, 1000) This looks okay, but it is incorrect. Because remainingMs inside a closuer is frozen. The interval keeps the old value even after React re-renders. So this leads to - Frozen timers - Skipped seconds - Incorrect UI state The correct fix: use functional state update:     setRemainingMs(prev => Max.max(prev-1000, 0)) Preventing Memory Leaks: If we create something in useEffect (intervals, listeners, subscriptions), we must clean it up: return () => clearInterval(interval) Otherwise, the timer keeps running even after the component unmounts. How I remember: - If state depends on previous state -> use functional updates - If I create side effects -> I must clean them up So, React did not break my timer; JavaScript closures did, React just made them visible. If this saved you from a future bug, it was worth sharing #React #JavaScript #Frontend #WebDevelopment #CleanCode #development #devnote

Stop writing e.preventDefault() in React ⚛️ 👇 . For a decade, "The React Way" to build a form was verbose. You needed useState for every input. You needed onChange handlers for every keystroke. You needed to manually prevent the browser refresh. It turned simple HTML forms into complex state management problems. React 19 brings back the power of HTML with Actions. ❌ The Old Way (Controlled): Micro-managing the value of every input. If you had 10 inputs, you had 10 state variables (or one giant object) and a massive onSubmit handler. ✅ The Modern Way (Actions): Pass a function to the action prop of your <form>. React automatically captures the submission. • No State: Read values directly from FormData in your action. • No Handlers: Delete your onChange props. • Progressive: Works even before JavaScript loads (if using Server Actions). The Shift: We are moving from "managing inputs" to "handling submissions." Note: You can still use controlled inputs if you need instant validation (like password strength), but for submission, they are no longer required. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactHooks #Hooks #ReactTips #FrontrendDeveloper #DevloperTips

𝐃𝐚𝐲 #5 — 𝐇𝐨𝐰 𝐑𝐞𝐚𝐜𝐭 𝐇𝐚𝐧𝐝𝐥𝐞𝐬 <input> Many developers think React or JavaScript fully controls the <input> element but that’s not completely true. By default, the browser manages the input UI, updating it on every keystroke. This is known as an uncontrolled component. React can take control by storing the value using state or refs, turning it into a controlled component. 📌 Simple idea: Browser controls input by default. React controls it when needed. A small concept, but powerful for understanding: ✓ Forms ✓ Controlled vs Uncontrolled Components ✓ DOM vs Virtual DOM Learning React one concept at a time. #ReactJS #JavaScript #WebDevelopment #LearningInPublic #Frontend #ReactConcepts

Ever wondered why people say “React is declarative”? 🤔 Here’s the simplest way I understand it 👇 In traditional JavaScript, we tell the browser HOW to do things step by step: 👉 find this element 👉 update its text 👉 change its color 👉 handle edge cases React flips this mindset. In React, we just say WHAT the UI should look like for a given state. 🧠 “If the state is this → UI should look like this.” And React handles the how internally. This declarative approach makes code: ✅ easier to read ✅ easier to debug ✅ easier to scale Instead of fighting the DOM, we focus on logic and state, and React takes care of updating the UI efficiently using the Virtual DOM. Once this clicked for me, React started making a lot more sense 💡 If you’re learning React — this mindset shift is a game changer. #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #DeveloperJourney

🚀 React User Form Project Built a User Form using React to practice controlled components and state management. ✨ Key Features: Used useState to manage form inputs Real-time data preview Input validation (name without numbers, phone number handling) Checkbox state management Clean UI with CSS Flexbox This project helped me strengthen my understanding of React hooks, form handling, and component structure. 🔧 Tech Stack: React | JavaScript | CSS #ReactJS #WebDevelopment #Frontend #JavaScript #LearningByDoing

It is important to do a CSS reset. ❌Because browsers apply different default styles to elements, this leads to inconsistent UI. ✅ CSS reset *, *::before, *::after {   box-sizing: border-box; } body {   margin: 0;   font-family: system-ui, sans-serif; } ➡️ If you are using any framework or library(like Angular or React), we can use the main style to handle it. ➡️ A lightweight CSS reset helps you start from a predictable base: • Reset margins • Use border-box sizing • Define a default font ➡️ So resetting the css is to “neutralise” browser default styles so we start from a consistent baseline across Chrome, Firefox, Safari, Edge, #Angular #Signals #RxJS #Reactivity #FrontendTips #WebDevelopment #JavaScript #FullStackDeveloper #CleanCode #CodingJourney #CSS #Frontend #ResponsiveDesign #UIDesign #NodeJS #ExpressJS #PostgreSQL #pgAdmin #Backend #API #FullStack

React State Is a Snapshot — Not a Variable (A Concept Every React Dev Should Know) One of the most misunderstood concepts in React is that state is a snapshot in time, not a mutable variable. When React renders a component, it gives you a snapshot of: props state event handlers That snapshot is fixed for that render. setCount(count + 1); setCount(count + 1); setCount(count + 1); You might expect count to increase by 3 — but it doesn’t. Why? Because all three updates read the same snapshot of count. The Correct Mental Model State updates are queued React re-renders later with a new snapshot Code inside the same render never sees updated state The Fix: Functional Updates setCount(prev => prev + 1); setCount(prev => prev + 1); setCount(prev => prev + 1); Now React applies each update to the latest value, not the old snapshot. Why This Matters Understanding state as a snapshot helps you: Avoid stale state bugs Write predictable event handlers Fix issues with async logic, debouncing, and batching Reason better about concurrent rendering in React 18+ Key Takeaway State doesn’t change inside a render. React gives you a snapshot — and the next render gives you a new one. Once this clicks, many “weird” React bugs suddenly make sense. #ReactJS #Frontend #JavaScript #WebDevelopment #ReactHooks #React18

So React's speed is all about the Virtual DOM. It's like a lightweight clone of your UI, but in JavaScript - and that's what makes it fast. Very simple concept, really: it minimizes expensive updates. But let's dive deeper - the Virtual DOM is basically a representation of your UI, and React uses it to compare the old and new versions, figure out what's changed, and then update the real DOM in one go, which is way more efficient. Here's how it all goes down: React renders your component, creates a new Virtual DOM tree, and then compares it to the previous one using this smart diffing algorithm - it's like a game of spot the difference, but for code. And then, React applies the changes to the real DOM, all at once, in a single batch - which is why it's so fast. Now, when it comes to lists, the key prop is crucial. It's all about efficiency. Use unique IDs, not array indexes - that way, React can keep track of which items have changed, even if they get reordered or removed. To take your React apps to the next level, try using React.memo - it prevents unnecessary re-renders of child components, which can be a huge performance boost. And don't forget about useMemo - it helps stabilize object references, so you don't end up with a bunch of unnecessary updates. Check out this article for more info: https://lnkd.in/gFmibcv2 #React #VirtualDOM #JavaScript

𝗥𝗲𝗮𝗰𝘁 𝗸𝗲𝘆𝘀: 𝗶𝗻𝗱𝗲𝘅 𝘄𝗼𝗿𝗸𝘀… 𝘂𝗻𝘁𝗶𝗹 𝗶𝘁 𝗱𝗼𝗲𝘀𝗻’𝘁. A lot of weird UI bugs in production come from this: ❌ Problem: ``` items.map((item, index) => <Row key={index} />) ``` React doesn’t track list items by “data”. It tracks component identity using keys and reuses DOM/state based on that reference. So when you: • sort • filter • insert • delete the index changes, and React reuses the wrong DOM/state. Result: • inputs swap values • checkbox state mismatches • selected item jumps • animations glitch ✅ Fix: ``` items.map((item) => <Row key={item.id} />) ``` Rule: If the order can change → keys must be stable. Have you ever debugged this bug and later found it was the key? 👀 #ReactJS #Frontend #JavaScript #WebDev #Nextjs

🚀 useImperativeHandle in React – Practical Use Case In React, data usually flows from parent to child via props. But sometimes the parent needs to call a function inside the child. That’s where useImperativeHandle helps. ✅ When to use it Focus an input from parent Reset a form Trigger validation Control modal open/close 🧠 Example import { forwardRef, useImperativeHandle, useRef } from "react"; const InputBox = forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focusInput() { inputRef.current.focus(); } })); return <input ref={inputRef} />; }); export default function App() { const ref = useRef(); return ( <> <InputBox ref={ref} /> <button onClick={() => ref.current.focusInput()}> Focus Input </button> </> ); } 🔐 Why not expose everything? useImperativeHandle lets you expose only what’s needed, keeping the component clean and encapsulated. ⚠️ Use it sparingly — prefer props/state first. #ReactJS #useImperativeHandle #ReactHooks #FrontendDevelopment #JavaScript #WebDev