Switch to React Query for Cleaner API Calls

Using useEffect for every API call in React. It worked. But it was a mess. 😅 This is what my code looked like: const UserList = () => { const [users, setUsers] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(() => { setLoading(true) fetchUsers() .then(data => setUsers(data)) .catch(err => setError(err)) .finally(() => setLoading(false)) }, []) if (loading) return <div>Loading...</div> if (error) return <div>Error!</div> return users.map(user => <UserCard user={user} />) } 3 useState calls. Manual loading/error handling. No caching. No refetching. Code repeated in every component. 😔 Then I discovered React Query: const UserList = () => { const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers }) if (isLoading) return <div>Loading...</div> if (error) return <div>Error!</div> return data.map(user => <UserCard user={user} />) } Same result. But: ✅ No manual loading state ✅ No manual error handling ✅ Automatic caching ✅ Background refetching ✅ 70% less code Rule I follow now: → Server state = React Query → UI state = useState → Complex state = useReducer Wish I knew this earlier. 🚀 Are you still using useEffect for API calls? Comment below! 👇 #ReactJS #JavaScript #Frontend #WebDevelopment #ReactQuery #CleanCode

𝐈𝐬 𝐲𝐨𝐮𝐫 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐭𝐨𝐨 𝐨𝐟𝐭𝐞𝐧, 𝐨𝐫 𝐧𝐨𝐭 𝐚𝐭 𝐚𝐥𝐥 𝐰𝐡𝐞𝐧 𝐲𝐨𝐮 𝐞𝐱𝐩𝐞𝐜𝐭 𝐢𝐭 𝐭𝐨? 𝐘𝐨𝐮'𝐫𝐞 𝐩𝐫𝐨𝐛𝐚𝐛𝐥𝐲 𝐟𝐚𝐥𝐥𝐢𝐧𝐠 𝐟𝐨𝐫 𝐭𝐡𝐢𝐬 𝐜𝐨𝐦𝐦𝐨𝐧 𝐭𝐫𝐚𝐩. One of the sneakiest `useEffect` issues comes from non-primitive values in its dependency array. If you declare a function or object directly inside your component and include it in `useEffect`'s dependencies without memoizing it, React sees a "new" function/object on every render. This means your effect will re-run endlessly, or worse, refer to stale data if you're trying to optimize with an empty array. **Bad Example:** ```jsx function MyComponent() { const fetchData = async () => { /* ... */ }; // New function on every render useEffect(() => { fetchData(); }, [fetchData]); // fetchData changes every render, so effect re-runs } ``` **The Fix:** Memoize your functions with `useCallback` and objects with `useMemo`. This tells React to only create a new instance if its dependencies change. ```jsx import React, { useCallback, useEffect } from 'react'; function MyComponent() { const fetchData = useCallback(async () => { // Your actual data fetching logic console.log("Fetching data..."); }, []); // Depend on nothing if the logic itself doesn't change useEffect(() => { fetchData(); }, [fetchData]); // fetchData only changes if its own dependencies change } ``` This ensures your effect runs only when `fetchData` actually changes (which, in this `useCallback` example, is never after the initial mount, making it efficient). It's a subtle distinction, but mastering `useCallback` and `useMemo` for `useEffect` dependencies is key to stable and performant React apps. Have you ever battled an infinite `useEffect` loop because of this? What was your debugging "aha!" moment? #React #JavaScript #Frontend #WebDevelopment #ReactHooks

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

I noticed I was repeating the same API logic in multiple React components. useEffect, useState, loading state, error handling… again and again. It worked, but it didn’t feel right. So I tried moving that logic into a custom hook. Example: function useUserData() {  const [data, setData] = useState(null);  const [loading, setLoading] = useState(true);  useEffect(() => {   fetch('/api/user')    .then(res => res.json())    .then(data => {     setData(data);     setLoading(false);    });  }, []); return { data, loading }; } Now I can reuse it anywhere: const { data, loading } = useUserData(); -No repeated logic. -Cleaner components. -Easier to maintain. Still learning, but custom hooks made my code feel much more structured. #reactjs #webdevelopment #frontend #javascript

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

🚨 Why your React component re-renders (even when nothing changes) A lot of times we feel like: “Nothing changed… but my component re-rendered.” Actually, React always has a reason. Here are the real triggers 👇 🔁 What causes re-renders? • State change (useState) • Parent component re-render • Context value change • Props reference change ⚠️ The most ignored one: Reference change React does NOT check deep values. It only checks references. So even if data looks same, React treats it as new. Example: const obj = { name: "Dhana" }; This creates a new object every time → new reference → re-render ❌ Common mistake <MyComponent data={{ name: "Dhana" }} /> Looks fine, but this creates a new object on every render. ✅ Better way const data = useMemo(() => ({ name: "Dhana" }), []); <MyComponent data={data} /> Now reference stays same → no unnecessary re-render Don’t overuse useMemo/useCallback. Use them only when: 👉 re-renders are actually causing performance issues Understanding this one concept can level up your React skills a lot. #ReactJS #Frontend #WebDevelopment #JavaScript #Performance

Stop using headers() to force dynamic rendering in Next.js. 👇 Let’s be honest: we have all used the "dummy headers" hack. If you were building a component that fetched live database metrics, you didn't want Next.js to statically generate it at build time. But if you weren't actively reading a cookie or a URL parameter, Next.js would aggressively cache it anyway. To break the cache, we would drop headers() or cookies() at the top of our component just to trick the framework into Server-Side Rendering (SSR). It was a duct-tape solution that confused junior developers reading the codebase. Next.js 15 finally introduces the connection() API. ❌ The Legacy Hack: Calling request-specific APIs you don't actually need. Creates confusing, unreadable code intentions. Feels like fighting the framework. ✅ The Modern Standard: Just await connection(). • Explicit Intent: It clearly communicates to other developers (and the compiler) that this code must wait for an active user request to execute. • Zero Hacks: You no longer need to import unused cookies or headers. • Future Proof: It aligns perfectly with the new React Server Components asynchronous rendering model. The Shift: We are moving away from framework "hacks" and embracing explicit, native APIs to control our rendering boundaries. Learn how to use the Next.js 15 connection() API from next/server to explicitly opt into dynamic rendering. Discover how to replace the legacy headers() and cookies() hacks to force Server-Side Rendering (SSR) for real-time database queries in React Server Components. #NextJS #NextJS15 #ReactJS #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebArchitecture #WebDev #fblifestyle #code.withsr

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

🚨 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

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