I was building a UI recently and something felt off. I added a console.log out of habit. Clicked a button once. Watched the same API call fire 10 to 11 times in a row. One click. Ten requests. I knew React re-renders components when state changes. What I didn't fully appreciate was how easy it is to accidentally create a chain reaction. A state update triggers a render, something inside that render looks "new" to React even when it isn't, and suddenly your useEffect is firing over and over. The fix came down to being more precise: stabilising object references with useMemo, wrapping functions in useCallback, and being honest about what my useEffect actually needed to watch. After fixing it: one click, one API call. It sounds obvious in hindsight. It always does. If you've hit this before, how did you catch it? Console.log is how I found mine. I'm told the React DevTools Profiler is better. That's what I'm learning next. React developers, how do you debug unexpected re-renders in production? #React #Frontend #FrontendDevelopment #ReactJS #WebDevelopment #JavaScript #SoftwareEngineering

🚀 React.memo — Prevent Unnecessary Re-renders Like a Pro In React, re-renders are normal… 👉 But unnecessary re-renders = performance issues That’s where React.memo helps. 💡 What is React.memo? React.memo is a higher-order component (HOC) 👉 It memoizes a component 👉 Prevents re-render if props haven’t changed ⚙️ Basic Example const Child = React.memo(({ name }) => { console.log("Child rendered"); return <h1>{name}</h1>; }); 👉 Now it only re-renders when name changes 🧠 How it works 👉 React compares previous props vs new props If same: ✅ Skips re-render If changed: 🔁 Re-renders component 🔥 The Real Problem Without memo: <Child name="Priyank" /> 👉 Even if parent re-renders 👉 Child also re-renders ❌ With React.memo: ✅ Child re-renders only when needed 🧩 Real-world use cases ✔ Large component trees ✔ Expensive UI rendering ✔ Lists with many items ✔ Components receiving stable props 🔥 Best Practices (Most developers miss this!) ✅ Use with stable props ✅ Combine with useCallback / useMemo ✅ Use in performance-critical components ❌ Don’t wrap every component blindly ⚠️ Common Mistake // ❌ Passing new function each render <Child onClick={() => console.log("Click")} /> 👉 Breaks memoization → causes re-render 💬 Pro Insight (Senior-Level Thinking) 👉 React.memo is not magic 👉 It works only if: Props are stable Reference doesn’t change 📌 Save this post & follow for more deep frontend insights! 📅 Day 21/100 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

Mistake #1: I used useEffect for almost everything. Fetching data, syncing props to state, deriving values, even handling basic logic. At one point, my components had more useEffect than actual UI. Things worked… but they were fragile. Small changes broke unexpected parts. The realisation came later: useEffect is meant for side effects, not general logic. If you’re calculating something from props or state, you probably don’t need an effect at all. Once I reduced unnecessary useEffect usage, my components became predictable and easier to debug. Follow for Day 2. Repost if you’ve ever been stuck debugging useEffect. #reactjs #frontend #javascript #webdevelopment #cleanCode #softwareengineering

I'm going to talk about two things in it: Activity and useEffectEvent. Both were experimental for two-plus years. Both are now stable. Activity You know the drill with conditional rendering. Works fine until users complain that switching tabs clears their form. The component unmounts, state goes with it. Activity mode="hidden" keeps the component alive but out of sight. Effects get unmounted, so nothing runs in the background. Updates pause until React clears its queue. State stays. The mental model that clicked for me: you're parking the component, not deleting it. Tabbed UIs, back navigation that remembers scroll and input state, pre-loading a page while the user is still on another one — these all make sense now without reaching for manual state hoisting. useEffectEvent This one fixed something that's been annoying me for a long time. Say you have an effect that opens a WebSocket. When the connection is established, you show a notification. The notification reads from a theme prop. If you add theme to the dependency array, the socket reconnects every time the theme changes. If you leave it out, the linter is unhappy. useEffectEvent lets you pull the notification logic into a separate function. That function always reads the latest theme but doesn't count as a reactive dependency. The socket reconnects when the room changes. Not when the theme does. A few rules to know: don't put useEffectEvent functions in dependency arrays, don't call them during render, don't pass them to child components. They're not a general escape hatch. They're for logic that behaves like an event — something that fires from inside an effect but shouldn't control when that effect runs. What actually changed For me, both of these reduce the number of cases where the right answer was "hoist the state up" or "add an eslint-disable comment and move on." That's not nothing. #react #frontend #javascript #webdev #reactjs #frontenddevelopment #softwaredevelopment

Day 26 #100DaysOfCode 💻 Today I learned about Function, Component, State & Event in Next.js. 🔹 Function Functions are reusable blocks of code used to perform specific tasks. 🔹 Component In Next.js, everything is a component. It helps to break UI into reusable pieces. 🔹 State State is used to store dynamic data inside a component and re-render UI when data changes. 🔹 Event Events handle user interactions like clicks, input, form submission, etc. 💻 Code Snippet: "use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increase</button> </div> ); } 🚀 Small reflection: Understanding these core concepts makes building dynamic and interactive apps much easier. #NextJS #ReactJS #WebDevelopment #JavaScript #Frontend #CodingJourney #Akbiplob

useEffect can cause you side effects. I've seen people with months of React experience still getting burned by it. This is Post 8 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. 🔹 It doesn't run when you think it does. Most devs assume useEffect runs during render. It doesn't. It fires AFTER the render and AFTER the browser paints. React keeps the render phase pure and side-effect free on purpose. 🔹 The dependency array controls everything. This one argument decides when your effect runs. No array → runs after EVERY render [ ] empty → runs once on mount [dep] → runs when that value changes Get this wrong → bugs that are nearly impossible to debug. 🔹 [ ] is often a lie. Everyone slaps [] thinking "run once and forget." But if you're using any variable from inside the component and not declaring it as a dep — that's a stale closure. A hidden bug that silently uses outdated data. 🔹 Missing deps → infinite loops. useEffect with no dep array + a setState inside? That's: render → effect fires → state updates → re-render → effect fires again… Infinite loop. Your app crashes. You panic. 🔹 Cleanup is NOT optional. Every event listener, timer, interval, or subscription you create inside useEffect needs to be cleaned up. No cleanup → memory leaks grow silently in the background. 🔹 Stop overusing it. useEffect is for syncing with external systems. Not for everything. Deriving state, transforming data, computing values. None of that needs useEffect. Ask yourself before writing it: "Is this syncing with something outside React?" If no → you probably don't need it. Next post : State vs Ref vs Variable Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: React hooks hate you for this: https://lnkd.in/d7ySVnJA #React #ReactJS #WebDevelopment #Frontend #JavaScript #useEffect #BuildInPublic #LearnInPublic #FrontendDevelopment #ReactUnderTheHood #DevTips #WebDev #Programming

🚀 Intersection Observer in React — Boost Performance Without Scroll Events Handling scroll-based features in React can get messy… 👉 Scroll listeners = heavy + inefficient ⚠️ That’s where Intersection Observer comes in 👇 🧩 What is Intersection Observer? 👉 A browser API that detects when an element enters or leaves the viewport ✔ No manual scroll tracking ✔ Better performance ✔ Runs asynchronously ⚙️ How It Works 1️⃣ You select a target element 2️⃣ Browser observes its visibility 3️⃣ When it enters/leaves viewport → callback triggers 👉 No continuous scroll events needed ⚡ Why It Matters ✔ Reduces unnecessary re-renders ✔ Improves performance ✔ Cleaner implementation 🔥 Real Use Cases ✔ Lazy loading images ✔ Infinite scrolling ✔ Scroll-based animations ✔ Ad visibility tracking ✔ Reading progress bars 💻 Simple React Example import { useEffect, useRef, useState } from "react"; function useInView(options = {}) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { setInView(entry.isIntersecting); }, options); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, [options]); return [ref, inView]; } 🧠 Important Options ✔ `root` → viewport/container ✔ `rootMargin` → margin around viewport ✔ `threshold` → visibility percentage ⚠️ Best Practices ✔ Avoid observing too many elements ✔ Disconnect observer when not needed ✔ Use proper threshold for performance 🧠 Simple Way to Understand • Scroll event → checks continuously ❌ • Intersection Observer → triggers only when needed ✅ 🔥 Takeaway 👉 Observe visibility, not scroll 👉 Build faster & smarter React apps 💬 Have you used Intersection Observer in your projects? #React #Frontend #WebPerformance #JavaScript #WebDevelopment #Optimization #Coding #SoftwareEngineering

🚀 Just Built a Modern UI Card in React! Excited to share my latest mini project! 🎉 I designed a modern UI card component in React where I focused on clean design and reusable code. 💡 What I implemented: - Used Array of Objects to manage dynamic data - Passed data using Props for better component structure - Applied the Spread Operator to make code cleaner and scalable - Integrated Lucide Icons (via npm) for a modern and professional look This project really helped me understand how to make components more reusable and organized. Small steps, but moving forward every day 💪 🎥 Check out the video below to see how it works! #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #UIUX #LearningJourney #MERNStack #Coding