Beyond useState and useEffect: useReducer, useRef, useMemo and more

A visual guide on React component useEffect lifecycle. How components mount and re-render in React and their relation with the useEffect hook is one of the most important concepts in React. To summarize, 1. When first-time components are inserted in the DOM, they're referred to as "mounted," then updated via rendering, and later "unmounted." 2. While mounting, a component initializes. 3. In the render stage, a virtual DOM gets created and compared, and in the commit stage, it gets painted to the browser. 4. Any effect gets executed during the commit. If the state changes, the component re-renders with vDOM creation during rendering, painting, and attaching to real DOM during the commit phase. Would you be interested in learning React/JavaScript with visuals and to-the-point explanations of how things work under the hood? 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. Thanks. #react #javascript #frontend

I've been experimenting with custom route transitions to make navigating between pages feel a bit more native and alive. To build this, I used Next.js and next-transition-router to handle the actual page rendering logic, custom SVGs for the wave layers, and GSAP to animate the sweeps. Getting the animations to sync perfectly with the route changes took a bit of fine-tuning, but the final result makes the whole site feel much more cohesive. I've opened up the source code for anyone who wants to check it out. You're welcome to refer to the logic or just copy the setup straight into your own builds: https://lnkd.in/gM7GDChZ #nextjs #gsap #frontenddevelopment #webdevelopment #reactjs #uiengineering #webanimation #javascript #frontend #css #softwareengineering

Just shipped my new portfolio — built from scratch with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion 🚀 Took it from a 3,000-line static HTML file to a proper component-driven Next.js app over a weekend. Server-side email handling, custom domain, fully responsive, dark/light mode — the whole package. A few things I picked up along the way: • Data separation matters — moving content to typed config files made everything 10x easier • Animation libraries (Framer Motion) beat hand-rolled CSS keyframes for maintainability • Proper architecture > clever tricks • Ship > perfect — iterate after going live Live: usamazafar.me #WebDevelopment #NextJS #TypeScript #Portfolio #SoftwareEngineering #FullStackDeveloper

DAY 7 — Every Render Creates New Functions EVERY RENDER CREATES NEW FUNCTIONS You're passing a callback to a child. It re-renders every time. Here's why. In JavaScript, () => {} === () => {} is false. Every render, your component creates brand-new function references. When you pass these as props, child components see "new" props on every render — even if the logic is identical. This is where useCallback saves you: it memoizes a function reference across renders, only changing when its dependencies change. Pair it with React.memo on the child for maximum effect. Functions are objects. New render = new reference. useCallback stabilizes references so children don't re-render unnecessarily. How do you handle this in your projects? #useCallback #Performance #ReactJS #WebDevelopment

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day61 Project: Mood Vibe Generator What I built Today I built a Mood Vibe Generator where users can select their mood and get a curated visual vibe experience. Technologies Used HTML5 CSS3 JavaScript (DOM, Dynamic Rendering) Challenge I faced Designing a clean and aesthetic UI while keeping it interactive and responsive. How I solved it Used modern CSS effects (blobs, gradients) and dynamic rendering using JavaScript arrays. Features Multiple mood options Beautiful UI with ambient effects Smooth animations Live Demo: https://lnkd.in/d4WqXGQ3 Note: This project is not fully completed yet — more features coming soon Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

If you build things with React and care about how they look and feel, you need to know about React Bits. It's a free, open-source library of 110+ animated, interactive UI components built specifically for creative developers. Think polished text animations, dynamic backgrounds, glowing borders, and all the little details that make a site feel alive rather than just functional. What makes it genuinely useful (not just pretty) is how it's set up. Every component comes in 4 variants: JavaScript or TypeScript, CSS or Tailwind, so it just slots into however you already work. No fighting with the stack, just copy, paste, tweak props, and you're done. On top of the components, there are free creative tools built in: a Background Studio for generating and exporting animated backgrounds, a Shape Magic tool for those satisfying inner-rounded corner effects, and a Texture Lab that applies noise, dithering, and ASCII effects to images and video. The project is maintained by David Haz and has picked up 38k+ GitHub stars, which honestly says a lot about how much people actually find it useful vs. just starring and forgetting. Whether you're building a portfolio, a SaaS landing page, or just want your side project to stop looking like a template, this is a solid starting point. Tool: reactbits.dev Repo: https://lnkd.in/gu9eTHD6 #WebDevelopment #Frontend #React #UIDesign

Exploring 3D on the web — implemented a scroll-based interaction where elements respond dynamically to user movement. Built using JavaScript, Three.js, and Sketchfab integration to create a smooth and interactive experience. Check it out: https://lnkd.in/geSieFS8 #WebDevelopment #ThreeJS #JavaScript #FrontendDevelopment #3DWeb #CreativeCoding #UIUX”

Understanding React at a deeper level isn’t about knowing more hooks — it’s about knowing when to use them correctly. useEffect and useLayoutEffect may look similar, but their timing can directly impact performance and user experience. 🔹 useEffect Runs after the component renders and the browser paints the UI. It’s non-blocking and ideal for side effects like API calls, subscriptions, event listeners, and async operations. 🔹 useLayoutEffect Runs synchronously after DOM updates but before the browser paints. It blocks rendering, making it useful for DOM measurements, layout adjustments, and preventing visual flickers. Mastering these small details is what separates clean code from truly optimized applications. #React #ReactNative #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment

I spent 7 years working around a wall React Native built into itself. Every time I tried to animate a layout prop with useNativeDriver: true - width, height, flex, position - the framework threw it back at me. React Native 0.85 just tore that wall down. And it's bigger than just one fix. Swipe to see what changed → Here's the full breakdown of what dropped: 🔥 New Shared Animation Backend - Animated and Reanimated now share a single unified engine inside RN core. Layout props like width, height, flex, and position can finally be animated with the native driver. No workarounds. No compromises. 🔌 Multi-tool CDP connections - React Native DevTools, VS Code, and AI agents can now all connect simultaneously. No more sessions killing each other mid-debug. 📦 Jest Preset extracted - Moved to its own package for a leaner core and cleaner test setup. 🔍 Network panel restored on Android - Request body previews are back after a regression had silently disabled them. 604 commits. 58 contributors. The Bridge is gone. The New Architecture is now the foundation - not a migration path. If you're still on 0.82.x, note that it just hit end of support with this release. The era of compromising on animations because of framework limitations? That chapter is officially closed. 👇 What version are you on right now - and what's your upgrade path to 0.85? #ReactNative #MobileDevelopment #ReactNative085 #FrontendEngineering #JavaScript #OpenSource #NewArchitecture #SoftwareDevelopment

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