Fixing React UI Bugs: Canceling Previous Requests

Day 12: useEffect Hook in React If useState handles data, then useEffect handles side effects. Understanding this hook is key to building real-world React applications. 📌 What is useEffect? useEffect is a React Hook used to perform side effects in functional components. Side effects include: • API calls • Fetching data • Updating the DOM • Setting up subscriptions • Timers (setInterval, setTimeout) 📌 Basic Syntax useEffect(() => { // side effect code }, [dependencies]); 📌 Example: Run on Component Mount import { useEffect } from "react"; function App() { useEffect(() => { console.log("Component Mounted"); }, []); return <h1>Hello React</h1>; } 👉 Empty dependency array [] means it runs only once (like componentDidMount). 📌 Example: Run on State Change import { useState, useEffect } from "react"; function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log("Count changed:", count); }, [count]); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } 👉 Runs every time count changes. 📌 Cleanup Function (Very Important) useEffect(() => { const interval = setInterval(() => { console.log("Running..."); }, 1000); return () => clearInterval(interval); }, []); 👉 Prevents memory leaks by cleaning up effects. 📌 Why useEffect is powerful ✅ Handles API calls ✅ Syncs UI with data ✅ Manages lifecycle in functional components ✅ Keeps code clean and organized #ReactJS #useEffect #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney

React Performance Tip: Stop Overusing useEffect — Use useQuery Instead One mistake I often see (and made myself earlier) while working with React apps is overusing useEffect for API calls. 👉 Typical approach: Call API inside useEffect Manage loading state manually Handle errors separately Re-fetch logic becomes messy This works… but it doesn’t scale well. 🔁 Better approach: Use React Query (useQuery) When I started using useQuery, it simplified a lot of things: ✅ Automatic caching ✅ Built-in loading & error states ✅ Background refetching ✅ Cleaner and more readable code 👉 Example: Instead of this 👇 useEffect(() => { setLoading(true); axios.get('/api/data') .then(res => setData(res.data)) .catch(err => setError(err)) .finally(() => setLoading(false)); }, []); Use this 👇 const { data, isLoading, error } = useQuery({ queryKey: ['data'], queryFn: () => axios.get('/api/data').then(res => res.data), }); 🔥 Result: Less boilerplate Better performance (thanks to caching) Easier state management 📌 Takeaway: If you're building scalable React applications, tools like React Query are not optional anymore — they’re essential. What’s one React optimization you swear by? Drop it in the comments 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CleanCode #TechTips #Developers

🚀 useState in React 🧠 useState is one of the most important hooks in React. It lets your component remember and update data. 1️⃣ Basic Example import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } 2️⃣ What’s happening here? const [count, setCount] = useState(0); ✔ count → current state value ✔ setCount → function to update state ✔ 0 → initial value 3️⃣ Important Rule ⚠️ 👉 Never update state like this: count = count + 1 ❌ 👉 Always use setter: setCount(count + 1) ✅ 4️⃣ Why useState triggers re-render? When you call: setCount(5); 👉 React: Stores new value Re-renders component Updates UI 5️⃣ Real World Example function InputBox() { const [name, setName] = useState(""); return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } 👉 This is called a controlled component 6️⃣ Updating Based on Previous State setCount(prev => prev + 1); 👉 Best practice when new value depends on old value 7️⃣ Multiple States const [name, setName] = useState(""); const [age, setAge] = useState(20); 👉 Each state is independent 🔥 Key Takeaway useState = Store + Update + Re-render UI #React #JavaScript #Frontend #WebDevelopment #LearningByDoing

🚀 Understanding Props vs State in React — Simplified! In React, everything revolves around data. But there are two ways to handle it: 👉 Props 👉 State Understanding the difference is crucial for building scalable apps. 💡 What are Props? 👉 Props (short for properties) are used to pass data from parent to child function Greeting({ name }) { return <h1>Hello {name}</h1>; } <Greeting name="React" /> ✅ Read-only ✅ Passed from parent ✅ Cannot be modified by child 💡 What is State? 👉 State is data managed inside a component const [count, setCount] = useState(0); setCount(count + 1); ✅ Mutable ✅ Managed within component ✅ Triggers re-render ⚙️ How it works 🔹 Props: Flow: Parent → Child Immutable Used for communication 🔹 State: Local to component Can be updated Controls UI behavior 🧠 Real-world use cases ✔ Props: Passing data to components Reusable UI components Configuring child behavior ✔ State: Form inputs Toggle UI (modals, dropdowns) Dynamic data 🔥 Best Practices (Most developers miss this!) ✅ Use props for passing data ✅ Use state for managing UI ✅ Keep state minimal and local ❌ Don’t mutate props directly ❌ Don’t duplicate state unnecessarily ⚠️ Common Mistake // ❌ Mutating props props.name = "New Name"; 👉 Props are read-only → always treat them as immutable 💬 Pro Insight 👉 Props = External data (controlled by parent) 👉 State = Internal data (controlled by component) 📌 Save this post & follow for more deep frontend insights! 📅 Day 8/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

⚡ Stop Killing Performance — 3 Ways to Reduce React Rerenders React is fast. Bad code isn't. 1. React.memo for expensive components const ExpensiveComponent = React.memo(({ data }) => { // Only rerenders when data changes }); 2. useCallback for functions passed as props const handleClick = useCallback(() => { doSomething(id); }, [id]); // New function only when id changes 3. useMemo for expensive calculations const sortedData = useMemo(() => { return data.sort((a, b) => a.value - b.value); }, [data]); // Only recalculates when data changes The Impact: Cut rerenders by 60% on a recent dashboard. User interactions went from laggy to instant. What's your React performance tip? #ReactJS #WebPerformance #FrontendDeveloper #JavaScript #CodingTips

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

⚛️ React Performance Tip: Stop Recomputing on Every Render A common mistake in React is recalculating data on every render: ```javascript id="s7dh2k" const processedData = data.map(...); ``` ❌ This runs every time the component re-renders ❌ Leads to unnecessary computation and slower UI Instead, memoize it using `useMemo`: ```javascript id="k39xdl" const processedData = useMemo(() => { return data.map(...); }, [data]); ``` ✅ Runs only when `data` changes ✅ Prevents unnecessary recalculations ✅ Improves performance significantly 💡 Key takeaway: Use `useMemo` when: • Expensive computations • Large datasets • Avoiding repeated work 🚀 Small optimization = big performance boost What’s your go-to React performance trick? #ReactJS #JavaScript #Frontend #Performance #WebDevelopment #Coding

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 "setState" Trap in React If you think setState updates your value immediately… you’ve got a bug waiting to happen. 👀 🛑 The Scenario: A Simple Checkout A user clicks “Apply Discount” → the price updates → the order is sent to the API. The UI shows the discounted price ✅ The API receives the old price ❌ 🧐 Why does this happen? React state updates are asynchronous. When you call setOrder, React schedules a re-render; it doesn't change the value of your variable mid-execution. In the exact moment you call the setter, your order variable is still a snapshot of the old data. If you send that variable to an API immediately after, you're sending stale data. ✔️ The Solution: Use a Local Constant To ensure your API gets the correct data, create a local reference for the updated state. Use that constant for both the setter and the API call: JavaScript function applyDiscountAndSubmit() {  // 1. Create the "next" version of the data  const updatedOrder = {   ...order,   discount: 20,   total: order.total - 20  };  // 2. Update the UI  setOrder(updatedOrder);  // 3. Send the fresh data to the API  axios.post("/api/orders", updatedOrder); } 💡 The Takeaway setState doesn’t update your variable; it schedules the next render. If you need to use the "new" state immediately within the same function, don't rely on the state variable. Calculate the value once, store it in a constant, and use that as your source of truth. #React #Frontend #JavaScript #WebDevelopment #SoftwareEngineering

🚀 Stop treating Server State like UI State. As React developers, we’ve all been there: building "custom" fetching logic with useEffect and useState. It starts with one loading spinner and ends with a nightmare of manual cache-busting and race conditions. When I started migrating my data-fetching to TanStack Query, it wasn't just about "fewer lines of code"—it was about a shift in mindset. The Real Game Changers: Declarative vs. Imperative: Instead of telling React how to fetch (and handle errors/loading), you describe what the data is and when it should be considered stale. Focus Refetching: This is a huge UX win. Seeing data update automatically when a user switches back to the tab feels like magic to them, but it’s just one config line for us. Standardized Patterns: It forces the whole team to handle errors and loading states the same way, which makes code reviews much faster. The Win: In a recent refactor, I replaced a tangled mess of global state syncs and manual useEffect triggers with a few useQuery hooks. I was able to delete a significant chunk of boilerplate while fixing those "stale data" bugs that always seem to haunt client-side apps. The takeaway: Don't reinvent the cache. Use tools that let you focus on the product, not the plumbing. 👇 Question for the devs: Are you using TanStack Query for everything, or are you finding that Next.js Server Actions and the native fetch cache are enough for your use cases now? #reactjs #nextjs #frontend #webdev #tanstackquery #javascript