React Optimization: 2.5s to 0.2s with useEffect, useMemo, and React.memo

🚀 Day 15/30 – Lifting State Up (Deep Dive) Struggling to sync data between components? 🤔 Today I learned one of the most important React concepts ⚡ 👉 Lifting State Up Today I learned: ✅ Move state to the closest common parent ✅ Share data via props ✅ Maintain single source of truth 💻 Real Example: function Parent() { const [name, setName] = useState(""); return ( <> </> ); } function ChildInput({ name, setName }) { return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } function ChildDisplay({ name }) { return Hello {name}; } 🔥 What actually happens: 1️⃣ User types in ChildInput 2️⃣ setName updates parent state 3️⃣ Parent re-renders 4️⃣ ChildDisplay gets updated value 👉 Both components stay perfectly in sync 💡 Wrong Approach (Common Mistake): ❌ Separate state in each component function ChildA() { const [name, setName] = useState(""); } function ChildB() { const [name, setName] = useState(""); } 👉 This creates inconsistent UI 😵 ⚡ Real Use Cases: Shared form data Cart state across components Filters + product list sync ⚡ Advanced Insight: React enforces one-way data flow 👉 Parent → Child (via props) 🔥 Key Takeaway: If multiple components depend on same data → lift it up. Are you still duplicating state or managing it correctly? 👇 #React #StateManagement #FrontendDevelopment #JavaScript #WebDevelopment

Fetching data is easy. Handling it like a pro is the hard part. 🔄📡 In the early days of React, we all got used to the "useEffect and Fetch" pattern. But as applications grow, simple fetching isn't enough. Modern users expect zero-latency, instant feedback, and seamless synchronization. Whether I'm using Next.js Server Actions or React Query, these are the 3 principles I follow to manage data like a Senior Developer: 1️⃣ Loading States & Skeletons: Never leave your user staring at a blank screen. I use Suspense and Skeleton Screens to provide immediate visual feedback, making the app feel faster even while the data is still traveling. 2️⃣ Caching & Revalidation: Don't waste your user's data or your server's resources. Implementing smart caching (like stale-while-revalidate) ensures that your UI is updated instantly with "stale" data while the "fresh" data fetches in the background. 3️⃣ Optimistic UI Updates: Why wait for the server to say "Success" before updating a Like button or a Todo item? By using Optimistic Updates, we update the UI immediately and roll back only if the request fails. This creates a "light-speed" user experience. The best apps don't just display data—they manage the flow of data effortlessly. What’s your go-to tool for data fetching in 2026? Are you team React Query, or are you moving everything to Next.js Server Actions? Let’s debate! 👇 #ReactJS #NextJS #WebDev #DataFetching #JavaScript #FrontendArchitecture #CodingTips

In this post, I focused on visualizing how data moves within a React application using a Data Flow Diagram (DFD). Understanding data flow allows developers to: • Build more organized and scalable applications • Avoid unnecessary complexity and bugs • Clearly separate logic from UI • Improve maintainability and readability This approach helped me move beyond writing components to truly understanding how data drives the entire application. #React #Frontend #WebDevelopment #JavaScript #SoftwareArchitecture #CleanCode

🚀 React Hooks — From Basics to Advanced (With Real Understanding) 🔥 If you still think Hooks are just "useState" and "useEffect"… 👉 You’re missing the real power of React 👀 --- ⚡ 1. useState (Local State) const [count, setCount] = useState(0); ✔ Manage UI state easily --- ⚡ 2. useEffect (MOST IMPORTANT 🔥) 👉 Controls when side effects run --- 🧠 3 Ways to Use useEffect --- 🔹 1. Without Dependency Array useEffect(() => { console.log('Runs on every render'); }); 👉 Runs after every render ❌ Can cause performance issues --- 🔹 2. Empty Dependency Array [] useEffect(() => { fetchData(); }, []); 👉 Runs only once (on mount) ✔ Best for API calls --- 🔹 3. With Dependency [value] useEffect(() => { console.log('Runs when count changes'); }, [count]); 👉 Runs when specific value changes ✔ Controlled execution --- ⚠️ Important Concept 👉 Cleanup function useEffect(() => { const interval = setInterval(() => { console.log('Running...'); }, 1000); return () => clearInterval(interval); }, []); ✔ Prevent memory leaks --- ⚡ 3. useRef const inputRef = useRef(null); ✔ Store values without re-render --- ⚡ 4. useMemo const value = useMemo(() => heavyCalc(data), [data]); ✔ Optimize expensive calculations --- ⚡ 5. useCallback const fn = useCallback(() => doSomething(), []); ✔ Prevent unnecessary re-renders --- ⚡ 6. useContext const value = useContext(MyContext); ✔ Avoid prop drilling --- ⚡ 7. Custom Hooks 🔥 👉 Reusable logic function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; } --- ⚠️ Common Mistakes ❌ Missing dependencies ❌ Infinite loops ❌ Overusing useMemo/useCallback --- 🎯 Real-world Use 👉 API calls 👉 Forms 👉 Auth logic 👉 Reusable UI logic --- 🧠 Interview Answer (10 sec) 👉 “useEffect runs side effects based on dependency array — no array runs on every render, empty array runs once, and dependencies trigger on value change.” --- 🔥 Final Thought 👉 Mastering "useEffect" = mastering React --- 💾 Save this post for interviews & real projects --- 💬 Which useEffect case confused you earlier? 👇 --- © Dhrubajyoti Das #React #ReactHooks #Frontend #WebDevelopment #JavaScript #ReactJS #FrontendDevelopment #SoftwareEngineering #CleanCode #PerformanceOptimization #CodingTips #TechCommunity #DevCommunity #LearnToCode

For the longest time, my pattern looked like this: • useEffect → call API • useState → store data • loading + error states manually handled It worked… until the app grew. Then came the problems: • duplicate API calls • inconsistent loading states • manual caching (or no caching at all) • refetching logic scattered everywhere That’s when I switched to React Query. — What changed? Server state ≠ UI state React Query made this distinction clear. Caching became automatic Data stays fresh without unnecessary refetching. Background updates UI stays responsive while data syncs silently. Built-in loading & error handling No more boilerplate in every component. Refetching is declarative Not tied to lifecycle hacks anymore. — The biggest mindset shift: Stop thinking: “Where should I fetch this data?” Start thinking: “How should this data behave over time?” — Final takeaway: React Query is not just a library. It’s a different way of thinking about data in frontend. And once you get it, going back to useEffect feels… painful 😅 #reactjs #frontend #javascript #webdevelopment #reactquery #softwareengineering

🚨 The “Invisible” Update: Why Your React UI Might Be Stuck Ever faced a bug where you know the data is there… but your UI just refuses to show it? I recently ran into this while working on a table: Data was fetched successfully ✅ Most columns rendered fine ✅ But one column kept showing empty/null ❌ 🕵️♂️ The Culprit: useRef We were storing incoming async data in useRef. At first glance, everything looked correct: Data was arriving ✔ Ref was updating ✔ But here’s the catch 👇 👉 The column that depended on slightly delayed data never re-rendered 👉 So the UI stayed stuck in its initial empty state ⚠️ Why This Happens useRef: Persists values across renders ✅ Does NOT trigger re-render on update ❌ So even when the data eventually arrived, React had no reason to update the UI. ✅ The Fix: Use useState Switched from useRef → useState const [data, setData] = useState(null); Now: As soon as data updates → component re-renders 🔁 Table updates automatically → no more empty column 🎯 #React #FrontendDevelopment #JavaScript #WebDev #SoftwareEngineering

Most React developers use data fetching libraries. Very few actually understand what’s happening under the hood. So I built something to fix that. 🚀 React Fetch Playground A visual lab to see how data fetching really works. 🔗 https://lnkd.in/gsahNcJi --- 💭 You’ve probably used things like: - caching - staleTime - background refetch - retries - optimistic updates But have you ever seen them happen? This tool makes it visible 👇 --- 🧠 What makes it different Instead of docs or theory, you get a real-time visual timeline: → request starts → data loads → cache becomes stale → background refetch kicks in All happening live. --- ⚡ Play with it like a lab - Switch between fetch / axios / custom hooks / TanStack Query - Simulate failures and retries - Control stale time and refetch intervals - Inspect cache, query state, and network behavior It’s basically DevTools for learning data fetching. --- 🔥 Why this matters (especially for senior FE roles) Understanding this deeply helps you: - avoid unnecessary re-renders - design better caching strategies - improve perceived performance - debug production issues faster This is the difference between using a library and thinking like a system designer. --- 📦 What’s next - Extracting reusable hooks as a package - Plugin system for other data libraries - More advanced visualizations (cache graphs, render impact) --- If you're preparing for frontend interviews or working on large-scale apps, this might be useful. Would love your thoughts 👇 #React #FrontendEngineering #JavaScript #WebPerformance #SystemDesign #OpenSource #TanStackQuery #DevTools

🚀 Stop Managing API State Manually in React! If you're still using `useEffect` + `useState` for API calls… you're doing extra work 😅 Let’s talk about React Query (TanStack Query) 👇 --- 🧠 What is React Query? A powerful library to **fetch, cache, and manage server state (API data)** in React apps. --- ❌ Traditional Way (Problem) * Manual loading & error handling * Repeated API calls * No caching * Complex & messy code --- ✅ With React Query (Solution) * Automatic caching ⚡ * Background refetching 🔄 * Shared data across components 🔗 * Cleaner code 🧹 * Better performance 🚀 --- ⚙️ How it works? 1️⃣ Fetch data 2️⃣ Store in cache 3️⃣ Return instantly on next request 4️⃣ Refetch in background if stale 5️⃣ UI updates automatically --- 🔥 Key Benefits ✔️ Auto caching (no duplicate API calls) ✔️ Faster performance ✔️ Less boilerplate code ✔️ Built-in mutation support (POST/PUT/DELETE) ✔️ Smart retry & error handling ✔️ Data sync across components --- ⚠️ Disadvantages * Learning curve (staleTime, cacheTime) * Not needed for small apps * Slight increase in bundle size --- 🧩 When to Use React Query? ✅ API-heavy applications ✅ Dashboards / Admin panels ✅ Shared data across components ✅ Need performance optimization --- 🚫 When NOT to Use? ❌ Static or simple apps ❌ No backend/API usage ❌ Minimal state management #ReactJS #WebDevelopment #Frontend #JavaScript #ReactQuery #TanStackQuery #SoftwareDevelopment

If you're copying and pasting the same useState + useEffect logic across multiple components, you need a custom hook. Example — a reusable data fetching hook: ```js function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let cancelled = false; fetch(url) .then(r => r.json()) .then(data => { if (!cancelled) setData(data); }) .catch(err => { if (!cancelled) setError(err); }) .finally(() => { if (!cancelled) setLoading(false); }); return () => { cancelled = true; }; }, [url]); return { data, loading, error }; } // Usage — clean and consistent everywhere const { data: users, loading } = useFetch('/api/users'); const { data: products } = useFetch('/api/products'); ``` Custom hooks keep components focused on rendering and move logic to where it can be tested and reused. #ReactJS #JavaScript #Frontend #WebDevelopment

The "Ghost in the API": How I fixed a major rendering lag 👻 While working on a complex user dashboard at Codes Thinker, I encountered a frustrating performance bottleneck. Every time a user triggered a data fetch, the entire UI would "freeze" for a split second before updating. Even with a fast backend API, the user experience felt "heavy" and unprofessional. The Challenge: We were fetching large, nested JSON objects directly inside a parent component. Every time the API responded, the entire component tree re-rendered, causing a visible performance lag during data transformation. The Solution: React Query: I implemented React Query to handle caching. This ensured that if a user requested the same data twice, the result was instant. Data Transformation: Instead of passing the raw "heavy" object to components, I mapped the data into a lighter format immediately after fetching. Optimistic UI: I used Tailwind CSS to create smooth skeleton loaders, making the app feel faster while the data was still loading. The Result: The rendering lag disappeared, and the user experience became fluid. Sometimes, being a Senior Frontend Developer is about knowing when not to fetch data as much as how to fetch it. Have you ever faced a stubborn API lag? How did you tackle it? Let’s share some dev stories! 👇 #RESTAPI #NextJS #PerformanceOptimization #MERNStack #WebDevelopment #CleanCode #ReactJS #TailwindCSS