How to use React Suspense for async data fetching

Error Handling in Async/Await (try...catch in JavaScript) When using Async/Await, handling errors properly is just as important as handling data. That’s where the try...catch block shines It helps you catch and manage errors without crashing your app. Definition: try — contains the code that may throw an error. catch — handles the error gracefully when something goes wrong. Example: function fetchData(success) { return new Promise((resolve, reject) => { setTimeout(() => { if (success) resolve("✅ Data fetched successfully"); else reject("❌ Failed to fetch data"); }, 1000); }); } async function getData() { try { console.log("Fetching data..."); const result = await fetchData(false); // change to true to test success console.log(result); } catch (error) { console.error("Error caught:", error); } finally { console.log("Operation completed ✅"); } } getData(); Output (if failed): Fetching data... Error caught: ❌ Failed to fetch data Operation completed ✅ ⚙️ Why it’s useful: ✅ Prevents app crashes ✅ Keeps async code clean ✅ Helps in debugging network/API issues ✅ Works beautifully with multiple awaits 🔖 #JavaScript #AsyncAwait #ErrorHandling #TryCatch #WebDevelopment #Frontend #CodingTips #AsyncProgramming #JSConcepts #100DaysOfCode #LearnsJS #DeveloperJourney #WebDevCommunity

🚀 Handling Async Data In React Today while building my Customer Segmentation page, I ran into a classic React issue: My child component was getting undefined props… because the data hadn’t loaded yet. Why? React doesn’t wait for data—it renders fast, sometimes too fast for your async calls. The simple fix I used: {Array.isArray(users) && users.map((elem) => (...))} ✅ Render only when data is ready ✅ Prevent runtime errors ✅ Keep your UI stable In larger projects, this problem is usually handled with: -Loading states (spinners, skeletons) ->State management tools like Redux or React Query ->TypeScript to catch undefined/null data ->Error handling for network issues 💡 Takeaway: React renders fast—your data might not. Always handle async safely. Thinking about scalability and stability now makes a huge difference in industrial projects. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #CustomerSegmentation #LearningInPublic

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐥𝐞𝐯𝐞𝐥𝐞𝐝 𝐮𝐩 𝐦𝐲 𝐑𝐞𝐚𝐜𝐭 𝐬𝐤𝐢𝐥𝐥𝐬 𝐛𝐲 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐢𝐧𝐠 𝐬𝐦𝐨𝐨𝐭𝐡, 𝐟𝐥𝐢𝐜𝐤𝐞𝐫-𝐟𝐫𝐞𝐞 𝐩𝐚𝐠𝐢𝐧𝐚𝐭𝐢𝐨𝐧 𝐮𝐬𝐢𝐧𝐠 𝐑𝐞𝐚𝐜𝐭 𝐐𝐮𝐞𝐫𝐲! I was exploring how to load API data page-by-page without the UI blinking or resetting and React Query’s 𝒌𝒆𝒆𝒑𝑷𝒓𝒆𝒗𝒊𝒐𝒖𝒔𝑫𝒂𝒕𝒂 feature completely changed the game for me. 🔥 What I Built - Dynamic Pagination using useState - Data Fetching with useQuery - Personalized API calls using pageNumber - Smooth transitions using keepPreviousData - Clean, minimal UI for posts + pagination buttons - Proper error & loading handling What I Learned 🔹 React Query refetches only when queryKey changes → ["posts", pageNumber] 🔹 queryFn should always be a function → () => FetchPosts(pageNumber) 🔹 API must receive the correct page number to return limited results 🔹 keepPreviousData helps avoid UI jumps and blank screens 🔹 Good CSS structure matters — it prevents overlapping and maintains layout 🎯 Outcome A smooth, modern, user-friendly pagination UI where: ✨ No flickering ✨ No layout shifting ✨ Old data stays visible while new data loads ✨ Perfect experience for users 🛠️ 𝑻𝒆𝒄𝒉 𝑺𝒕𝒂𝒄𝒌 : React.js, React Query, Axios, JSONPlaceholder API, Custom CSS I’m really enjoying diving deeper into React Query — the amount of control it gives over data fetching is incredible! Excited to keep building and learning more every day! #react #reactjs #reactquery #webdevelopment #frontenddeveloper #learningjourney #javascript

🧠 Deep Dive: Why useSyncExternalStore matters (even if you never use it directly) When React 18 introduced concurrent rendering, one subtle problem appeared: How can React safely read from an external store (like Redux, Zustand, or a custom event emitter) without tearing — where your UI shows inconsistent data between renders? That’s why React introduced useSyncExternalStore. It ensures React always reads a consistent snapshot of external state — even during concurrent updates. Here’s a minimal example 👇 import { useSyncExternalStore } from 'react'; const store = { value: 0, listeners: new Set(), subscribe: (l) => { store.listeners.add(l); return () => store.listeners.delete(l); }, getSnapshot: () => store.value, setValue: (v) => { store.value = v; store.listeners.forEach(l => l()); } }; function Counter() { const value = useSyncExternalStore(store.subscribe, store.getSnapshot); return <button onClick={() => store.setValue(value + 1)}>{value}</button>; } This tiny hook keeps React and your store in perfect sync — with no tearing, no stale data, and full concurrency safety. It’s also what modern state libraries like Zustand and Redux Toolkit use under the hood. Understanding this helps you design custom stores that play nicely with React’s concurrent architecture — a step closer to truly React-native data flow. #React #JavaScript #Frontend #WebDevelopment #ReactJS #Performance #useSyncExternalStore #ConcurrentRendering #StateManagement #CleanCode #SoftwareEngineering #React18

𝐒𝐭𝐢𝐥𝐥 𝐮𝐬𝐢𝐧𝐠 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞 𝐚𝐧𝐝 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐭𝐨 𝐟𝐞𝐭𝐜𝐡 𝐝𝐚𝐭𝐚? 𝐘𝐨𝐮'𝐫𝐞 𝐝𝐨𝐢𝐧𝐠 𝐢𝐭 𝐭𝐡𝐞 𝐡𝐚𝐫𝐝 𝐰𝐚𝐲. Every React developer has written this code a hundred times: create loading state, create error state, create data state, useEffect with fetch, handle errors, add loading spinners, somehow manage cache, deal with race conditions... Fifty lines of boilerplate just to fetch a user profile. Then you need to refetch when the data changes. Or handle pagination. Or invalidate cache. Or retry failed requests. Or show stale data while refetching. Each feature adds more complexity until your component is 80% state management and 20% actual UI. 𝐓𝐚𝐧𝐒𝐭𝐚𝐜𝐤 𝐐𝐮𝐞𝐫𝐲 𝐞𝐥𝐢𝐦𝐢𝐧𝐚𝐭𝐞𝐬 𝐚𝐥𝐥 𝐨𝐟 𝐭𝐡𝐢𝐬. Instead of managing loading, error, and data states manually, you get: → Automatic caching and background refetching → Loading and error states built-in → Stale data strategies handled for you → Automatic retries on failed requests → Request deduplication out of the box → Optimistic updates made simple One hook replaces 50+ lines of boilerplate. Your components become readable again. Data fetching actually works the way users expect—fast, reliable, and smart. No more useState soup. No more useEffect dependency arrays breaking everything. No more manually tracking loading states across your app. Building React apps that fetch data? TanStack Query turns complex data fetching into one simple hook. 💬 𝐇𝐨𝐰 𝐝𝐨 𝐲𝐨𝐮 𝐡𝐚𝐧𝐝𝐥𝐞 𝐀𝐏𝐈 𝐜𝐚𝐥𝐥𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭? 𝐒𝐭𝐢𝐥𝐥 𝐮𝐬𝐢𝐧𝐠 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐨𝐫 𝐬𝐰𝐢𝐭𝐜𝐡𝐞𝐝 𝐭𝐨 𝐚 𝐥𝐢𝐛𝐫𝐚𝐫𝐲? #ReactJS #TanStackQuery #ReactQuery #Frontend #JavaScript #TypeScript #WebDevelopment #StateManagement #Programming #DeveloperTools #NexaLabsagency

💡 𝙒𝙝𝙚𝙣 𝙩𝙤 𝙪𝙨𝙚 𝙎𝙚𝙧𝙫𝙚𝙧 𝘼𝙘𝙩𝙞𝙤𝙣𝙨 𝙫𝙨 𝘼𝙋𝙄 𝙍𝙤𝙪𝙩𝙚𝙨 𝙞𝙣 𝙉𝙚𝙭𝙩.𝙟𝙨 If you’ve moved to Next.js 14+, you’ve probably wondered — “Should I use a Server Action or an API Route for this?” 🤔 Here’s the simple rule I follow 👇 ⚙️ 𝙎𝙚𝙧𝙫𝙚𝙧 𝘼𝙘𝙩𝙞𝙤𝙣𝙨 → 𝘾𝙐𝘿 (Create / Update / Delete) ✅ Ideal for server-side mutations directly from your components ✅ No need for manual fetch() — just call the async action ✅ Automatically runs securely on the server ✅ Handles form submissions, mutations, and cache revalidation seamlessly 💡 Example: Creating a user from a form Updating profile details Deleting a record 🌍 𝘼𝙋𝙄 𝙍𝙤𝙪𝙩𝙚𝙨 → 𝙍 (Read / Fetch) ✅ Perfect for data fetching — you can call them from clients, servers, or external systems ✅ Clean separation for GET endpoints ✅ Can be cached, paginated, and integrated across apps ✅ Works great for dashboards, mobile apps, and other consumers 💡 Example: Fetching data for charts or tables Public endpoints Mobile / external integrations 🚀 𝙎𝙪𝙢𝙢𝙖𝙧𝙮: 🧩 Use Server Actions for mutations (CUD) 🌐 Use API Routes for fetching data (R) Together, they create a clean and scalable pattern — mutations stay within Next, and reads stay reusable and sharable. 🧠 Next.js is slowly redefining the full-stack boundary — use Server Actions to simplify internal logic, and APIs to power everything beyond the UI. #NextJS #React #FullStack #ServerActions #API #JavaScript #WebDevelopment #TypeScript

React : Ever Hit That “Stale Context in Effects” Bug? If you’ve ever needed to log analytics or track a page visit using context and useEffect, let me know if this sounds familiar: “I want to log the latest number of cart items every time a user navigates—but my effect always gets the old value unless I add everything in the dependency array...” Now, in React 19.2, the useEffectEvent hook makes this way easier! import { useEffect, useContext, useEffectEvent } from 'react'; function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; const onNavigate = useEffectEvent((visitedUrl) => { logVisit(visitedUrl, numberOfItems); }); useEffect(() => { onNavigate(url); }, [url]); } What’s different? With classic useEffect, you’d have to put numberOfItems in the dependency array, rerunning every time it changed. With useEffectEvent, the function always sees the latest context, props, and state - no extra dependencies, no rerun headaches. Perfect for logging, analytics, or event-like side effects where you just want the latest value at call time, and not trigger new effect runs! Ever built a page log or analytics with context in React? Did you hit the old “stale value in effects” issue? React 19.2’s useEffectEvent is designed exactly for this! Ref Doc https://lnkd.in/g45256v2 #React192 #useEffectEvent #ReactJS #WebDev #Context #CodeSample

I build a simple JSON Viewer and here's how it can help you. Many devs complain that they don't have a simple JSON viewer tool that can show them how their data is structured. I got tired of that too. Why I built this: Every developer I know (including me) deals with JSON daily. But we're all using random websites that: ❌ Send our data who-knows-where ❌ Have terrible UX ❌ Crash on large files So I built something just for that but better → https://lnkd.in/d8K7j3BT What it does: Paste messy JSON → Click Parse → Get beautiful formatted output → Copy it That's literally it. No ads, no tracking, nothing. If the data is missing a comma or } somewhere, it will return an error telling you the line so you can quickly adjust My solution runs 100% in your browser or you can use my live github page and your data never leaves your machine. Tech I used: React (because components) CSS3 animations (design focused 🌊 easy on the eyes) GitHub Pages (lite, simple and free hosting FTW - every developer knows it) The best part? I kept it simple. No feature creep. No "enterprise" bloat. Just one tool that does one thing really, really well. Try it → https://lnkd.in/d8K7j3BT Question for you: What's the most annoying dev tool you use regularly? Drop it below - maybe I'll build a better version 👇 P.S. It's open source. Star it, fork it, roast my code - I'm here for all of it 😄 #WebDevelopment #React #JavaScript #DevTools #BuildInPublic

Stop trapping business logic in your components. It kills testability, reuse, and migrations. Symptoms • 500-line components with handlers doing auth, validation, uploads, DB writes • Tests that need a full tree + 10 mocks just to check one rule • Hooks full of pricing/eligibility math that don’t need React at all The 15-minute fix Extract a pure function for the use case (e.g., replyToShout(input, deps)). Inject dependencies (getUser, saveImage, createPost) instead of importing singletons. Keep the component thin: read form values, call the function, render states. Test the function with simple mocks—no DOM, no rendering. Reuse the same logic on web + React Native. Rules of thumb • If it doesn’t need state/effects/DOM, make it a pure function. • Hooks orchestrate, they don’t calculate core business rules. • Services handle I/O (API, storage, analytics) behind small interfaces. • Prefer plain objects in/out for serialization and boundaries. What you get Faster unit tests (milliseconds). Smaller components. Clear ownership by layer. Easy portability between frameworks. #ReactJS #ReactNative #CleanArchitecture #TypeScript #WebDevelopment #Testing

Ever felt stuck juggling multiple API calls in your frontend app, only to realize the UI feels sluggish or unresponsive? Enter **React Query**—a game-changer that’s quietly reshaping the way we handle asynchronous data fetching in React apps. If you haven’t heard of it yet, React Query is a powerful library that simplifies server state management. Unlike traditional methods where you manually handle loading states, caching, error handling, and refetching logic, React Query automates a lot of that for you *out of the box*. The result? Cleaner code and snappier user experiences. Here’s why it’s gaining serious traction: 🔥 **Automatic Caching:** React Query caches data by default. That means if you revisit the same API endpoint, your app instantly shows cached data while fetching updates in the background—no more spinners unless you really need them. ⚡ **Background Updates:** Stale data? React Query refetches data invisibly to keep your UI fresh without disrupting users. 🔄 **Out-of-the-box Retries:** Network flakiness? React Query gracefully retries failed requests, reducing error noise and improving reliability with almost zero code. 🧹 **Simple Cache Invalidation:** When you update data (like submitting a form), you can easily invalidate and refetch relevant queries. Fewer bugs related to stale UI and synchronization headaches. In short, React Query shifts you from a *request-driven* mindset to a *state-driven* one, where your UI simply reflects the freshest data React Query manages for you. I’ve been integrating React Query into several projects lately, and it’s dramatically cut down boilerplate code and bugs. If you’re still juggling custom hooks and tons of loading/error state flags, give it a try—weirdly satisfying to set it up and watch data flows just work. Curious? Start with the docs or this great walkthrough here: https://lnkd.in/eExPsSd5 What data-fetching frustrations do you see in your apps? Drop a comment, and let’s talk modern async state management! #ReactQuery #JavaScript #WebDevelopment #FrontendEngineering #CodingTips #TechTrends #DeveloperExperience #AsyncProgramming