Last active
September 3, 2024 11:27
-
-
Save Gaurav8757/9b085b1a02fd61a651b949b77e88011a to your computer and use it in GitHub Desktop.
A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| startTransition: | |
| 1. startTransition is a function in React that is used when you're about to update a particular state and its impact shouldn't heavily affect the UI. | |
| 2. Its primary purpose is to ensure that if you're running a long-running process, the user doesn't face significant delays in the UI. | |
| 3. It allows React to defer the update, making it non-blocking for the user interface. | |
| Suspense: | |
| 1. Suspense is a React component used to handle loading data or components. | |
| 2. It works at the time when your application code is being loaded and you need to show a "fallback" UI to the user. | |
| 3. If a specific component or data is being loaded and it will take some time to complete, Suspense displays a fallback UI, indicating to the user that they need to wait. | |
| import { useEffect, useState, lazy, startTransition, Suspense } from "react"; | |
| useEffect(() => { | |
| const fetchPayoutSlab = async () => { | |
| const token = sessionStorage.getItem("token"); | |
| if (!token) { | |
| toast.error("Not Authorized yet.. Try again! "); | |
| return; | |
| } | |
| try { | |
| const response = await axios.get(`${VITE_DATA}/lab/view`, { | |
| headers: { Authorization: `${token}` }, | |
| }); | |
| // SET TRANSITION CALLBACK TO | |
| startTransition(() => { | |
| setPayoutSlab(response.data); | |
| }); | |
| } catch (error) { | |
| console.error("Error fetching payout slab", error); | |
| } | |
| }; | |
| <Suspense fallback={<div>Loading...</div>}> | |
| <FaRegCircleDown size={20} /> | |
| </Suspense> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment