Nicky Christensen’s Post

🐌 Your React list has 10,000 items… …and scrolling feels like loading a 2009 Flash game. There’s a fix most juniors aren’t told about 👇 ✨ Virtualization 💡 The idea is simple: Only render what the user can actually see. Instead of 10,000 DOM nodes, you keep ~50 visible ones …and dynamically swap content as the user scrolls. 🧰 Libraries to use: → react-window ▫️ Lightweight ▫️ Best for fixed-height items → react-virtual ▫️ More flexible ▫️ Supports dynamic heights 💻 Example: import { FixedSizeList } from 'react-window'; <FixedSizeList height={600} itemCount={10000} itemSize={50} width="100%" > {({ index, style }) => ( <div style={style}>Item {index}</div> )} </FixedSizeList> ⚡ Result: ✔️ Lean DOM ✔️ Smooth performance ✔️ Massive speed boost This one change can take you from ⏳ ~3s render → under 100ms 📌 Next time someone says: "Just paginate it" …you know what to show them 😉 #ReactJS #WebPerformance #FrontendDev #JavaScript

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

Everyone loves arrow functions. They’re concise, "modern," and they solve the 'this' binding issue without breaking a sweat. But if you’re building for scale, you need to look under the hood. The secret of inline arrow functions in your JSX? Referential Equality. Every single time your component re-renders, that arrow function is a brand-new object in memory. If you’re passing that function to a child component optimized with 'React.memo', you’ve just killed your optimization. The child sees a "new" prop, triggers a re-render, and your performance goes out the window. This is where the 'bind' method, specifically when used in a constructor or a stable context, historically won. It allowed you to create a stable reference. By binding once, you ensured that the function identity remained the same across every render, keeping your component tree lean. In the era of Hooks, we’ve moved toward 'useCallback' to achieve this same stability, but the fundamental engineering principle remains same, that is, stop creating throwaway functions in your render path. #ReactJS #WebPerformance #SoftwareEngineering #Javascript #CodingTips

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

Stop rewriting your React components. 🛑 You’re wasting time duplicating logic when you should be decorating. Think of the Decorator Pattern like your morning routine: 👕 Base: You (The Component) 🧣 Layer 1: Sweater (Adds withWarmth) 🧥 Layer 2: Raincoat (Adds withWaterproofing) You’re still the same person, but you’ve dynamically gained new powers. 🦸♂️ In React, we do this using Higher-Order Components (HOCs). Instead of baking "Logged In" logic into every page, you wrap it: 🔸 const ProtectedProfile = withAuth(UserProfile); 🔸 Why this wins: ✅ Clean Code: Your core component stays "pure." ✅ Scalability: Swap "clothes" (logic) in seconds. ✅ OCP: Open for extension, closed for modification. Are you still using HOCs, or have you moved entirely to Custom Hooks? . . . . #ReactJS #SoftwareArchitecture #Coding #WebDevelopment #CleanCode #LinkedIn #Frontend #DRY

I built infinite grass in the browser. And you can drive a Jeep through it. No, seriously. Open it on your phone right now and drive around. Here is what is actually happening under the hood: A 250x250 grid of grass instances rendered with InstancedMesh. As the Jeep moves, tiles at the back get recycled to the front. The grass never ends. The memory stays flat. The framerate holds. This technique is sometimes called a scrolling tile grid or infinite terrain chunking. It is the same idea behind open-world games where the world "loads" around the player. I just brought it to the browser with React Three Fiber and TSL (Three.js Shading Language). Big thanks to Bruno Simon whose video gave me the initial direction. I watched it, understood the concept, then built the whole thing myself (with a lot of AI assistance for the shader math, not going to lie). But the architecture decisions, the debugging, the "why is every blade of grass pointing straight up" moments at 2am? That was me. If you have been sleeping on React Three Fiber + TSL, this combo is genuinely exciting right now. TSL in particular makes writing custom shaders feel like actual JavaScript instead of a different language. https://lnkd.in/gDxisWsV #webdev #tsl #react #typescript

I just put together a complete Vue 3 guide — from absolute basics to expert-level patterns. Whether you're just starting out or looking to level up, here's what's covered: 🟢 BASIC → Vite setup & project structure → ref, reactive, computed, watch → Components, props, emits, slots & lifecycle hooks → All template directives (v-model, v-for, v-if...) 🟠 ADVANCED → Composables & custom hooks (bye bye mixins 👋) → Pinia state management with plugins → Vue Router 4: guards, lazy routes, typed navigation → TypeScript: generic components, typed provide/inject → Performance: v-memo, shallowRef, code splitting 🟣 EXPERT → effectScope, customRef, markRaw internals → Render functions & JSX → Custom directives & writing plugins → SSR with renderToString + Nuxt 3 → Testing with Vitest + Vue Test Utils + Playwright → Web Components with defineCustomElement → Security, XSS prevention & Vite build tuning The Vue ecosystem has matured beautifully. The Composition API alone changed how I think about reusable logic — composables are cleaner than anything mixins ever gave us. If you're a React dev curious about Vue 3, now is genuinely a great time to explore it. The DX is excellent. 🎯 ♻️ Repost if this helps someone on your feed! #Vue3 #VueJS #JavaScript #TypeScript #FrontendDevelopment #WebDevelopment #Programming

🎨 Fresh Project: Building a Color Scheme Generator with Vanilla JS! I’m excited to share my latest frontend project: a Color Scheme Generator! 🚀 As I continue to sharpen my responsive design and JavaScript skills, I wanted to build something that solves a common problem for creators—finding the perfect palette. Whether you need a complementary contrast or a subtle monochrome vibe, this tool fetches it all in real-time using Vanilla JS and TheColorAPI. demo : https://lnkd.in/dk74nWT5 Git repo: https://lnkd.in/d9rhtt47 #WebDevelopment #Frontend #JavaScript #CodingJourney #CSS #ResponsiveDesign #LearnToCode

Instead of constantly asking ""Are you on screen yet?"", the Intersection Observer tells the browser: ""Wake me up ONLY when this element enters the screen."" // 1. Define what happens when it enters the screen const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in'); // Optional: Stop observing once loaded! observer.unobserve(entry.target); } }); }); // 2. Tell it which elements to watch const cards = document.querySelectorAll('.card'); cards.forEach(card => observer.observe(card)); Use this for lazy loading images, trigger-on-scroll animations, and infinite scrolling. Your website will hit 60FPS effortlessly. #WebPerformance #JavaScript #FrontendDev #WebDesign #IntersectionObserver #Coding