Optimizing React Performance with Referential Equality and useCallback

`Date.now` is an impure function. Calling an impure function can produce unstable results. . . This error appears because React 19 is stricter about component purity. example: Your component is being rendered, and during render you call: >> Date.now() React considers that impure. What React Expects ? A React component should behave like a math function: >> f(input) = output - React wants your component to work the same way. Why Date.now() ? - 'Date.now()' Breaks This Rule Because every call gives a different value. So even if props didn't change, render output can change. This doesn’t mean you shouldn’t use non-idempotent functions like new Date() at all – you should just avoid using them during render. In this case, we can synchronize the latest date to this component using an Effect. By wrapping the non-idempotent new Date() call in an Effect, it moves that calculation outside of rendering. If you don’t need to synchronize some external state with React, you can also consider using an event handler if it only needs to be updated in response to a user interaction. Final truth React components are not templates. They are contracts with the rendering engine. Break the contract, and bugs appear. Respect the contract, and React becomes powerful. #ReactJS #Frontend #WebDevelopment #JavaScript #SoftwareEngineering #CleanCode #Programming #React19 #UIEngineering #TechLeadership

Another week, another lesson. Just wrapped up a Galaxy Generator for my Three.js sandbox. This build is all about particles and procedural generation. I used sine and cosine to calculate angles and bend straight lines into spiral arms, then applied power functions to naturally scatter the particles from a dense core to dispersed edges. To get the colors right, I used lerp to smoothly blend the hot inside with the cooler outside branches. I also wired up a control panel in the top right. You can mess with the particle count, branch structure, colors, and randomness to generate your own setup. Go tweak the settings and see what you can create here: https://lnkd.in/grJj9Azr #threejs #javascript #webgl #webdevelopment"

DAY 11 — useRef Isn't Just for DOM Elements USEREF ISN'T JUST FOR DOM ELEMENTS useRef can store any mutable value without triggering a re-render. Most devs use useRef to grab a DOM node. But useRef returns a mutable container — {current: value} — that persists across renders and never causes one when mutated. This makes it perfect for: storing previous state, tracking interval IDs, holding values in closures without stale reference issues, and caching expensive computed results that shouldn't drive UI updates. useRef = a secret drawer in your component. Values live there between renders but changes don't ring the doorbell. How else have you used useRef creatively? #useRef #ReactHooks #JavaScript #WebDevelopment

I thought useRef was only for accessing DOM… 😅 But I was wrong. 💡 For a long time, I used useRef like this: const inputRef = useRef(); 👉 Focus input, access DOM — that’s it. ⚠️ Then I faced a problem: I needed to store a value 👉 without causing re-render Using useState was triggering re-renders ❌ 💡 Then I discovered: useRef can store mutable values 👉 without re-rendering the component 🧠 Example: const countRef = useRef(0); countRef.current++; 👉 Value updates 👉 But component doesn’t re-render ✅ Result: • Better performance • No unnecessary re-renders • More control over values 🔥 What I learned: useRef is not just for DOM 👉 it’s for persisting values across renders #ReactJS #FrontendDeveloper #JavaScript #ReactInterview #CodingTips #WebDevelopment

Your useEffect is firing 6 times. It's probably not what's in the dependency array. I had [options] in mine. One dependency. Looked fine. The effect ran on every single render anyway — hammering my API with duplicate calls I couldn't explain. The problem wasn't the value. It was the reference. options was an object getting recreated fresh on every render, so React saw a "new" dependency every time — even when the actual data hadn't changed. React doesn't deep-compare objects in the dep array. It checks identity. Fix was wrapping options in useMemo. Two lines. Effect ran once. Done. But honestly, the bigger shift was realising I'd been thinking about dependencies wrong. It's not just what is in the array — it's whether the things in the array are actually stable between renders. If your effect fires more than it should, check the stability of your deps, not just the list. What kills you about useEffect? Curious if this one's common. #react #javascript #reacthooks #frontenddevelopment #webdev

🚀 Mastering the Sliding Window Pattern in JavaScript One of the most powerful techniques for solving array problems efficiently is the Sliding Window + Deque approach. Today, I implemented the classic “Maximum in Sliding Window” problem in O(n) time 👇 🔍 Problem: Given an array and a window size k, return the maximum value in each window as it slides from left to right. 💡 Key Insight: Instead of recomputing the max for each window (which is expensive), we maintain a Deque (double-ended queue) that: Stores indices (not values) Keeps elements in decreasing order Ensures the front always holds the max ⚡ Result: Efficient solution with linear time complexity — each element is processed once. 📚 I’m currently building a collection of algorithm patterns in JavaScript: 👉 https://lnkd.in/ej4fNeZs #JavaScript #Algorithms #DataStructures #CodingInterview #SoftwareEngineering #100DaysOfCode

Important Frontend Concepts Checklist- 1. Pagination 2. Infinite Scrollbar 3. Debouncing 4. Websocket 5. REST vs GraphQl APIs 6. Local Storage vs Cookies 7. Authentication vs Authorization 8. Redux 9. Lazy Loading 10. Code Splitting 11. Bundle Size Optimization 12. Tree Shaking 13. Memoization (useMemo, useCallback) 14. Caching (Client + Server) 15. CSR vs SSR vs SSG vs ISR 16. Core Web Vitals (LCP, INP, CLS) 17. Cross Browser Compatibility 18. Optimistic UI Updates 19. Suspense (React) 20. Image Optimization (WebP, AVIF) 21. Accessibility (a11y) 22. Webpack 23. Micro-frontend Architecture 24. Testing- RTL, Jest, Playwright 25. Polyfills, Babel #javascript #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

spent the last week going deep into React to understand how rendering actually works under the hood. turned it into a video , tracing what happens between writing JSX and seeing pixels on screen. every step, from createElement to fiber nodes to the one appendChild call that makes the page appear. this is part 1 covering the initial render. part 2 on re-renders and reconciliation is coming next. link : https://lnkd.in/dycpqavw if you've ever wondered what the "virtual DOM" actually is (spoiler: it's just plain objects that get thrown away every render), this one's for you. #react #javascript #frontend #webdev

Do you also see state living 𝟯 𝗼𝗿 𝟰 𝗹𝗲𝘃𝗲𝗹𝘀 𝗮𝗯𝗼𝘃𝗲 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘁𝗵𝗮𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘂𝘀𝗲𝘀 𝗶𝘁? A modal. A dropdown. A simple toggle. And to understand its behavior, you have to trace through a page, a layout, a section, and a container. We did that because we were taught to lift state up. And the reasoning is solid, i wont argue against this... But "lift state up when needed" and "lift state up by default" are not the same rule. One is a tool. The other is a habit. When state lives far from the thing it controls, the component stops being self-contained. You can't open it and understand it. You have to go hunting. We call that component "controlled." Sometimes it just feels remote-controlled. Three files away from the thing it's supposed to explain. I still lift state when two components genuinely need to coordinate. That's exactly what it's for. But a toggle that only one component cares about? That state belongs next to that component. Not because it's more clever. Because code you can understand in isolation is code you can trust. Where do you draw the line between lifting state and keeping it local? #frontend #javascript #react #vue #svelte

What actually happens inside React when you call setState? It starts with a single JavaScript object called a Fiber. I broke down how the Fiber tree is wired, how React walks through it, and what drives the whole render loop. No magic, just pointers and a while loop. Read more: https://lnkd.in/dFBiQQNz #React #Fiber #rendering #reconciliation #JavaScript #WebDev #SoftwareEngineering #BuildInPublic