React Data Fetching: useEffect vs SWR

🚨 Debouncing won’t fix this React bug You already fixed: ❌ Too many API calls (debounce) But there’s another hidden problem. Even with debounce… Your UI can still show wrong data. Example: useEffect(() => { fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => setResults(data)) }, [query]) User types: a → ap → app → apple Now imagine: Request 1 → slow Request 2 → fast Result: ❌ Old data overrides new data ❌ UI shows incorrect results This is a race condition. --- 💡 Fix: cancel previous requests useEffect(() => { const controller = new AbortController() fetch(`/api/search?q=${query}`, { signal: controller.signal }) .then(res => res.json()) .then(data => setResults(data)) return () => controller.abort() }, [query]) Now only the latest request updates the UI. --- 💡 Good React engineers don’t just reduce API calls. They ensure correct data is shown. #reactjs #frontend #javascript #webdevelopment

⚛️ React "useMemo" Hook — Why & When to Use It? In modern apps built with , performance matters. That’s where "useMemo" comes in 🚀 💡 What is "useMemo"? "useMemo" is a hook that memoizes (caches) the result of a computation so it doesn’t get recalculated on every render. 📌 Syntax: const memoizedValue = useMemo(() => { return expensiveFunction(data); }, [data]); ⚡ Why use "useMemo"? ✔ Prevents unnecessary recalculations ✔ Improves performance in heavy computations ✔ Avoids re-render slowdowns 🧠 When should you use it? - Expensive calculations (e.g., filtering, sorting large data) - Derived state that doesn’t need recalculation every render - Preventing unnecessary re-renders in child components ❌ When NOT to use it? - For simple calculations (it adds overhead) - Everywhere “just in case” — use it only when needed 🔍 Example: const sortedList = useMemo(() => { return items.sort((a, b) => a.price - b.price); }, [items]); 🚀 Pro Tip: Use "useMemo" together with "React.memo" to optimize component re-rendering effectively. 💬 Final Thought: Optimization is powerful — but only when used wisely. 👉 Do you use "useMemo" in your projects? Share your experience! #ReactJS #JavaScript #WebDevelopment #Frontend #PerformanceOptimization #CodingTips

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

💻 Built a Nested Checkboxes Component using React Worked on a Nested Checkboxes UI where parent-child selection stays perfectly in sync across multiple levels. Features: • Checking a parent selects all its child checkboxes • Unchecking a parent clears all nested children • If all children are checked → parent auto-checks • If any child is unchecked → parent updates accordingly • Supports deeply nested structures What I learned: • Implementing top-down (state propagation) and bottom-up (state aggregation) approaches in a tree • Building recursive components to render hierarchical data • Managing complex state updates for nested structures in React • Keeping UI and data consistent across multiple levels • Writing optimized logic to avoid unnecessary re-renders This was a great exercise in understanding how to handle tree-like data structures in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

"WebAssembly for compute-heavy web apps?" Everyone's jumping on the bandwagon without understanding the real deal. Here's where they miss the point. 1. **Optimize Performance**: Use WebAssembly to run CPU-intensive tasks like image processing directly in the browser. I've seen apps achieve near-native speed, reducing server load significantly. 2. **Enhance User Experience**: Build applications that can handle real-time data manipulation without breaking a sweat. WebAssembly enables smoother animations and interactions by offloading heavy computations from JavaScript. 3. **Boost Compatibility**: Integrate existing C/C++ libraries into web apps seamlessly. This lets you leverage mature, battle-tested code while developing in a modern web environment. 4. **Improve Security**: Avoid common JavaScript pitfalls with WebAssembly's sandboxed execution. It inherently minimizes attack surfaces and offers a more secure option for sensitive computations. 5. **Streamline Development**: Try vibe coding to quickly prototype features with AI assistance. WebAssembly allows faster iterations by decoupling heavy logic from the main application flow. 6. **Scale Applications**: Avoid bottlenecks during peak loads by distributing compute tasks efficiently. WebAssembly helps in parallelizing tasks to take full advantage of multicore processors. ```typescript const importWasm = async (path: string) => { const response = await fetch(path); const buffer = await response.arrayBuffer(); const module = await WebAssembly.compile(buffer); const instance = await WebAssembly.instantiate(module); return instance.exports; }; (async () => { const wasmModule = await importWasm('path/to/module.wasm'); console.log(wasmModule.someHeavyFunction()); })(); ``` How are you integrating WebAssembly in your projects? What real-world challenges have you faced? Looking forward to hearing your experiences. #WebDevelopment #TypeScript #Frontend #JavaScript

Day 11: useState Hook in Depth If you understand useState, you understand how React handles dynamic data. It’s one of the most important hooks in React. 📌 What is useState? useState is a React Hook that allows functional components to manage state (data that changes over time). 📌 Basic Syntax const [state, setState] = useState(initialValue); • state → current value • setState → function to update value • initialValue → starting value 📌 Example: Counter import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}> Increase </button> </div> ); } Each click updates the state and React re-renders the UI automatically. 📌 Updating State Correctly State updates are asynchronous, so always use the previous state when needed: setCount(prevCount => prevCount + 1); 📌 useState with Objects const [user, setUser] = useState({ name: "", age: 0 }); setUser({ ...user, name: "John" }); Always use spread operator to avoid losing other values. 📌 Multiple States const [name, setName] = useState(""); const [age, setAge] = useState(0); You can create multiple state variables in one component. 📌 Why useState is powerful ✅ Makes UI dynamic ✅ Triggers re-render automatically ✅ Simple and easy to use ✅ Core of modern React apps #ReactJS #useState #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney

⚛️ 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

Here is a real-world debugging question asked during a JavaScript/React discussion. import { useEffect, useState } from "react"; export default function App() { const [data, setData] = useState(null); useEffect(() => { fetch("https://lnkd.in/gGnJ7utj") .then((res) => res.json()) .then((result) => { setData(result); console.log("Data:", data); }); }, []); return ( <div> <h1>{data?.title}</h1> </div> ); } ❓ Question: Why does console.log("Data:", data) print null even after calling setData(result)? Think about how React state updates work and when re-renders happen. 💡 Bonus: How would you correctly log the updated data? Drop your answers in the comments 👇 #Debugging #ReactJS #JavaScript #FrontendDevelopment #CodingInterview #ReactHooks #WebDevelopment #Developers

🚀 Props in React + Is There 2-Way Binding? 🤔 In React, Props are used to pass data from Parent → Child. 1️⃣ Basic Props Example function Welcome(props) { return <h1>Hello {props.name}</h1>; } <Welcome name="Ravi" /> 👉 Output: Hello Ravi Props are read-only (cannot be changed inside child). 2️⃣ Important Concept React follows ONE-WAY DATA FLOW 👉 Parent → Child ✅ 👉 Child → Parent ❌ (directly not possible) 3️⃣ But what about 2-way binding? 🤯 In frameworks like Vue, we have two-way binding. In React, we achieve similar behavior using: 👉 State + Callback Function 4️⃣ Example: Simulating 2-Way Binding function Parent() { const [name, setName] = useState(""); return <Child value={name} onChange={setName} />; } function Child({ value, onChange }) { return ( <input value={value} onChange={(e) => onChange(e.target.value)} /> ); } 5️⃣ How This Works ✔ Parent sends data → value (Props) ✔ Child sends data back → onChange (Function) ✔ Parent updates state → UI updates 👉 Looks like 2-way binding, but internally still one-way flow 6️⃣ Key Takeaways React does NOT have true 2-way binding ❌ #React #JavaScript #Frontend #WebDevelopment #LearningByDoing

💡 Understanding Different Types of State in React When working with React, mastering state management is key to building scalable and maintainable applications. Not all state is the same — and knowing the different types can help you design better components and avoid unnecessary complexity. Here’s a quick breakdown 👇 🔹 1. Local State (Component State) Managed within a single component using useState or useReducer. 👉 Best for UI-specific data like form inputs, toggles, or counters. 🔹 2. Global State Shared across multiple components. 👉 Managed using tools like Context API, Redux, or Zustand. 👉 Useful for themes, authentication, user data, etc. 🔹 3. Server State Data that comes from external APIs. 👉 Managed using libraries like React Query or SWR. 👉 Handles caching, syncing, and background updates efficiently. 🔹 4. URL State State stored in the URL (query params, route params). 👉 Useful for filters, pagination, and sharable app states. 🔹 5. Form State Dedicated state for managing forms. 👉 Libraries like React Hook Form or Formik simplify validation and handling. 🔹 6. Derived State State computed from existing state or props. 👉 Avoid storing it separately unless necessary — derive it when needed. 🔹 7. UI State Controls visual aspects like modals, dropdowns, loaders, etc. 👉 Usually local but can be global depending on use case. ⚡ Key Takeaway: Not every piece of data needs to be global. Choosing the right type of state improves performance, readability, and maintainability. 📌 Ask yourself: “Where should this state live?” — The answer often defines the architecture of your app. #React #FrontendDevelopment #JavaScript #WebDevelopment #StateManagement #ReactJS