𝗚𝗼𝗼𝗱𝗯𝘆𝗲 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗳𝗼𝗿 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗦𝗽𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝘂𝘀𝗲𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻 𝗠𝗮𝗸𝗲𝘀 𝗔𝘀𝘆𝗻𝗰 𝗢𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝘀 𝗦𝗺𝗼𝗼𝘁𝗵𝗲𝗿!

Handling loading spinners during async operations is common, but the traditional approach using useState can lead to redundant re-renders and less organized code.

 const [loading, setLoading] = useState(false);

useEffect(() => {
 const fetchData = async () => {
 setLoading(true);
 try {
 const response = await fetch('/api/data');
 setLoading(false);
 return response;
 } catch (error) {
 setLoading(false);
 }
 }; 
 fetchData();
}, []);

While effective, this method requires manually toggling the state, increasing boilerplate and risking errors.

𝗪𝗵𝘆 𝗨𝘀𝗲 𝘂𝘀𝗲𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻 𝗜𝗻𝘀𝘁𝗲𝗮𝗱?

With useTransition, you can prioritize updates and streamline loading logic:

 const [isPending, startTransition] = useTransition();
 startTransition(async () => {
 try { 
const response = await axios.post('/api/endpoint', { title, content });
 if (response.data.responseCode === 201) { showSuccessToast(response.data.responseMessage); router.push('/dashboard');
 } 
} 
catch (error) { 
showErrorToast(error?.response|| "An error occurred"); }
 }
);  

𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀:

• No Manual State Management: React handles the isPending state for you.
• Fewer Re-Renders: Updates are deferred, improving performance.
• Cleaner Code: Focus on the logic, not the spinner.
• React’s useTransition is a great tool for enhancing performance and reducing complexity. Have you used it yet? Share your experience!

Comments

[Mike Stemle]

This article starts and finishes a bit abruptly, but the idea is good. I'd encourage you to talk more about how the code works, and better leverage the syntax highlighting capabilities of Markdown, but this isn't bad.

I'd also encourage you to look into the Fetch API built into browsers rather than using axios, too, as axios fails insecure if you forget to catch it, and it'll expose your HTTP headers (including authentication headers).

[haitham medhat]

thanks for your advice, next time i will clearfiy the topic in more words and with clear example, for axios part the code is just to give an idea about use transition it's not about axios i just focus on the hook it's self