Choosing between useEffect and useLayoutEffect in React

🧠 How useRef keeps the previous state value in React In React, components re-render when state changes, but not everything is recreated on every render. useRef gives you a persistent container whose value survives across renders without causing re-renders. 🔑 Important rules to remember useState Triggers a re-render when updated Values are recalculated on every render useRef Persists the same object between renders Updating .current does not trigger a re-render useEffect Runs after the render is committed to the DOM Never runs during rendering 🔄 Step-by-step render lifecycle Initial render count = 0 prevCountRef.current = undefined UI renders: Now: 0 Before: undefined After render useEffect runs prevCountRef.current = 0 After clicking the button setCount(1) is called React schedules a re-render Component re-renders: count = 1 prevCountRef.current = 0 (previous value) UI displays: Now: 1 Before: 0 After this render useEffect runs again prevCountRef.current = 1 (stored for next render) 🧩 Why this works Because the effect runs after rendering, the ref is updated after the UI has already used the old value. This timing allows the ref to act as a “memory” of the previous render. 💡 Mental model State = causes renders Render = reads refs Effect = writes refs ⚠️ Why not use state for this? Using state to store the previous value would: Trigger another re-render Risk infinite render loops Add unnecessary complexity useRef avoids all of that ✅ Final takeaway useRef persists data across renders without re-rendering, and useEffect updates it after render — making it perfect for tracking previous values. #React #ReactJS #JavaScript #ReactHooks #useRef #useEffect #useState #FrontendDevelopment #WebDevelopment #SoftwareEngineering

Ever opened your project in a code editor… And thought everything was fine? Then you resize the browser. And chaos begins. Here’s what I learned the hard way about CSS 👇 💻 Media Queries control WHEN styles apply @media (max-width: 768px) { .sidebar { display: none; } } On mobile, I removed the sidebar completely. Not hidden. Removed. That’s what display: none; does. 👻 display: none; • Element disappears • Takes up NO space • Removed from layout flow It’s like the element never existed. 🫥 visibility: hidden; .button { visibility: hidden; } • Element is invisible • BUT still takes up space • Layout stays intact It’s there… just not visible. Think of it like a ghost in your DOM. 🎯 The Real Lesson: Media queries decide when something changes. display and visibility decide how it disappears. If your layout is breaking on mobile… Maybe it’s not your flexbox. Maybe it’s the wrong hiding method. Responsive design isn’t just about shrinking things. It’s about making intentional decisions. What stays. What goes. And what simply hides. Quick question for developers 👇 When building mobile layouts, do you prefer: A) display: none; B) visibility: hidden; C) Conditional rendering (JS/Framework) Let’s talk. #WebDevelopment #CSS #Frontend #ResponsiveDesign #CodingLife

Stop using getBoundingClientRect() for tooltips. For years, positioning a tooltip meant: ∙ Measure the target with getBoundingClientRect() ∙ Calculate top/left manually ∙ Add scroll listeners, resize observers ∙ Handle edge cases: zoom, RTL, container transforms, font size changes ∙ Ship a library (Popper.js, Floating UI) just for this All of that for something the browser should handle natively. Now it does. CSS Anchor Positioning just hit Baseline across all major browsers (Chrome, Safari, Firefox 147+). Four lines of CSS replace hundreds of lines of JS: .button { anchor-name: –btn; } .tooltip { position-anchor: –btn; position: absolute; top: anchor(bottom); left: anchor(left); } No event listeners. No resize observers. No scroll handlers. No reflow hacks. The browser repositions automatically when layout changes – font size, zoom, container resize, viewport shift. And with position-try-fallbacks, the browser flips the tooltip to a fallback position when it runs out of space. Something that took an entire library to solve. This isn’t a “nice to have.” This is a paradigm shift in how we build UI components. Tooltips, dropdowns, popovers, autocompletes, context menus – all natively positioned by the browser. 200+ lines of JS → 4 lines of CSS. Docs and 1st comment links below. #CSS #WebDevelopment #Frontend #JavaScript #WebPlatform

𝐄𝐧𝐡𝐚𝐧𝐜𝐢𝐧𝐠 𝐔𝐬𝐞𝐫 𝐅𝐨𝐜𝐮𝐬 𝐰𝐢𝐭𝐡 𝐁𝐚𝐜𝐤𝐝𝐫𝐨𝐩 𝐁𝐥𝐮𝐫 𝐢𝐧 𝐒𝐡𝐞𝐩𝐡𝐞𝐫𝐝.𝐣𝐬 𝐓𝐨𝐮𝐫𝐬 Guiding users effectively through new features is key for adoption. We found that adding a backdrop blur to our Shepherd.js tours dramatically improved focus. By inserting a full-screen blurred div behind the tour overlay, we dimmed distractions and spotlighted the target element. This simple change made a noticeable difference in user engagement and comprehension. Implementing this involved creating a div with CSS for background color and blur, then toggling its visibility with the tour's start and end events. The key was ensuring the highlighted element remained crisp with a high z-index. What small tweaks have significantly enhanced the user experience in your projects? https://lnkd.in/dDDVMxFi #JavaScript

Dealing with dynamic brand colors and their hover states? - You often end up with complex JavaScript just to darken or lighten a color programmatically. - Manually calculating HSL values for every variant is time-consuming and prone to errors. - Keeping design system colors consistent across interactive elements becomes a significant challenge. How are you handling dynamic color adjustments in your projects today? #CSS #Frontend #WebDevelopment #DesignSystem

Most developers know what Reflow and Repaint are.Very few know when they silently kill performance. Here’s the real breakdown 👇 🔁 Reflow — the expensive one Occurs when the browser recalculates layout, sometimes affecting the entire page, not just one element. Triggered by: • Reading offsetWidth, scrollTop, getBoundingClientRect() inside loops • Adding or removing DOM elements • Changing width, height, font-size • Window resize ⚠️ The silent killer: Layout Thrashing When you alternate DOM reads and writes in the same loop, the browser repeatedly forces layout recalculation, leading to major performance issues. 🎨 Repaint — the cheaper cousin Only redraws pixels while layout stays unchanged. Triggered by: • color • background-color • box-shadow • visibility Repaint is cheaper than reflow — but still not free on complex pages. 🚀 What actually improves performance • Batch DOM reads first, then writes • Use transform & opacity for animations (GPU-composited) • Use will-change: transform for frequently animated elements • Use Chrome DevTools Performance tab — large Layout blocks indicate costly reflows Reflow isn’t always avoidable, but triggering it blindly can hurt performance. The best frontend engineers don’t just write correct code — they write browser-aware code. #Frontend #WebPerformance #JavaScript #BrowserInternals #WebDevelopment #CSS

🚨 React Effects That Run at Different Times (and Why It Matters) Many developers use useEffect by default — but React provides three different effect hooks, each designed for a specific timing in the rendering cycle. Understanding them can prevent flickering UI, layout bugs, and performance issues. 🔹 useEffect ✅ Runs after the browser paints ✅ Does not block rendering ✅ Best for async & side effects Use for: ✔ API calls ✔ Event listeners ✔ Analytics ✔ Timers 👉 Runs after the UI is visible. 🔹 useLayoutEffect ⚠ Runs before paint (synchronous) ⚠ Blocks painting until finished Use for: ✔ Measuring element size/position ✔ Preventing layout shifts ✔ Scroll positioning 👉 Fix layout before the user sees it. 🔹 useInsertionEffect (Advanced) ⚡ Runs before layout effects ⚡ Designed for styling engines Use for: ✔ Injecting styles dynamically ✔ Preventing style recalculation issues 👉 Ensure styles exist before layout calculation. ⚠ Rarely needed in everyday apps. Execution Order - 1️⃣ useInsertionEffect 2️⃣ useLayoutEffect 3️⃣ Browser paints 4️⃣ useEffect ⚡ Quick Rule ✔ Default → useEffect ✔ Layout measurement → useLayoutEffect ✔ CSS engine work → useInsertionEffect 💬 Have you ever faced layout flicker or timing issues while working with React effects? Would love to hear your experience 👇 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #Performance #CleanCode #LearnInPublic

𝐄𝐯𝐞𝐫 𝐧𝐨𝐭𝐢𝐜𝐞 𝐚 𝐪𝐮𝐢𝐜𝐤 𝐟𝐥𝐢𝐜𝐤𝐞𝐫 𝐨𝐫 𝐣𝐮𝐦𝐩 𝐢𝐧 𝐲𝐨𝐮𝐫 𝐑𝐞𝐚𝐜𝐭 𝐔𝐈 𝐫𝐢𝐠𝐡𝐭 𝐛𝐞𝐟𝐨𝐫𝐞 𝐞𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠 𝐬𝐞𝐭𝐭𝐥𝐞𝐬? Chances are, you might be dealing with a `useEffect` that's trying to make DOM measurements or modifications after the browser has already painted the initial layout. This is exactly where `useLayoutEffect` shines. Unlike `useEffect`, which runs asynchronously after the browser has finished painting, `useLayoutEffect` runs synchronously immediately after all DOM mutations but critically, before the browser repaints the screen. Think of it as React giving you a chance to "fix" the DOM layout just before the user sees it, ensuring a smoother visual experience. When to reach for it: * Measuring DOM elements: If you need an element's width, height, or position right after render to calculate and set the position of something else (like a tooltip or modal), `useLayoutEffect` is your friend. * Preventing visual flickers: Any time you're setting an initial style or position based on a measurement that would otherwise cause a flash of unstyled content or a sudden layout shift, `useLayoutEffect` can eliminate that jank. Example scenario: You're building a custom dropdown that needs to know its exact height to perfectly position its menu below. If you calculate this in `useEffect`, the dropdown might briefly appear misaligned before snapping into place. `useLayoutEffect` solves this by making the adjustment before the first paint. It's a powerful tool for certain edge cases, but use it sparingly! Its synchronous nature means it can block visual updates, so if your logic is heavy, it can introduce performance bottlenecks. Stick to `useEffect` for most side effects that don't directly impact the visual layout before the browser paints. What's the trickiest visual flicker you've debugged in a React app? Share your war stories! #React #FrontendDevelopment #WebPerformance #JavaScript #Hooks

play here-https://lnkd.in/gKvrQzzT Built a 2048 Mini Game from Scratch Today 🚀 No frameworks. No libraries. Just pure HTML, CSS, and JavaScript. Features I implemented: • 4x4 dynamic grid • Arrow key + swipe controls • Tile compression + merge logic • Score tracking • Undo functionality (Z key) • Win, Game Over & Max Tile overlays • Responsive UI with smooth animations Key Learnings 👇 1️⃣ Matrix Manipulation Managing a 2D array for the board and applying row/column transformations for each direction (left, right, up, down). 2️⃣ Separation of Concerns Game logic (compress → merge → compress) separated cleanly from rendering logic. 3️⃣ State Management Used deep cloning to store previous state for undo functionality. Small feature, big logic clarity. 4️⃣ Efficient DOM Updates Pre-created grid tiles and reused them instead of re-rendering the entire board every move. 5️⃣ Edge Case Handling • Preventing multiple merges in one move • Detecting game-over properly • Detecting win only once • Blocking invalid moves 6️⃣ Touch Event Handling Implemented swipe detection with threshold control and active touch tracking. 7️⃣ UX Details Matter Animations for new tiles, responsive sizing using CSS variables, and visual scaling for larger numbers. This project reinforced one thing: Small games are brutal logic trainers. You don’t need a “big” project to grow. You need tight logic and clean structure. #JavaScript #WebDevelopment #Frontend #GameDevelopment #2048 #Coding #Projects #LearningInPublic #BuildInPublic

We didn’t fully understand useEffect vs useLayoutEffect — until we had to debug a strange UI flicker. The logic was correct. The state was correct. But something still felt… off. It wasn’t the code. It was timing. Both hooks run after render. But they don’t run at the same moment. • useEffect runs after the browser paints. • useLayoutEffect runs before the paint. That small difference changes everything. If your effect doesn’t impact layout → useEffect is usually the right choice. If you need to measure or adjust the DOM before the user sees it → useLayoutEffect. The real mistake isn’t choosing the wrong hook once. It’s not realizing that one blocks paint — and that directly affects performance. React hooks aren’t just about logic. They’re about understanding the rendering cycle. Once that clicks, many UI “mysteries” stop being mysterious. #React #FrontendEngineering #JavaScript #SoftwareEngineering