We have built the poimandres eco system on suspense. Our state managers use it (Jotai, Valtio), we have specific libraries for it like https://github.com/pmndrs/suspend-react, and practically everything in three-fiber bases on it. Suspense allows components to handle and orchestrate async tasks, it is as simple as that.

you need to integrate the loading into suspense. react-query for instance. for simple things, async tasks etc, use https://github.com/pmndrs/suspend-react

you will pretty much always end up with this: https://github.com/pmndrs/suspend-react a naive caching mechanism. but what you do there probably doesn't work because the components get unmounted, so you loose that flag state. currently the cache is kept in global space, a weakmap or a map, later react will take care of it.

Problems like caching or multiple promises are handled by whichever data fetching solution you use or something generic like suspend-react which will handle them for you.

you don't fetch api with redux. react has suspense, handling async ops is inbuilt into the framework itself. use redux alongside something like this https://github.com/pmndrs/suspend-react

as for request, you should use suspense for that, routing this through your state manager is a mistake. this is all inbuilt into react now, loading, fallbacks, and composition is better done by react. your state manager could hold a url, but he fetching is done by something like this: https://github.com/pmndrs/suspend-react

you can use this library: https://github.com/pmndrs/suspend-react

another thing is, this awful fetching and lifting up thing in react goes completely away with suspense. this will become the norm and code like above will vanish, but did you know that this has been a part of react since 16? for instance: https://github.com/pmndrs/suspend-react

the problem with this kind of code is that it always gets messy, there's an error or a race somewhere in there and it will only get worse in scale. you can safely remove 95% of that code if you used suspense: https://github.com/pmndrs/suspend-react

Link: https://swr.vercel.app/

Now, it's time to consume our API. We'll use React for this tutorail, but feel free to use any other framework you prefer; the process remains the same. Additionally, we'll utilize SWR to fetch data from the API and TypeScript to ensure type safety.

'use client'; import FormPostUpdate from './components/FormPostUpdate/FormPostUpdate'; import FormDelete from '../app/components/FormDelete/FormDelete'; import { useFetch } from './hooks/useFetch'; import { useFetchSWR } from './hooks/useFetchSWR'; import Chart from './components/Chart/Chart'; export default function Home() { // Uncomment the code below and comment out the "useFetch" code if your want to use SWR for data fetching --> https://swr.vercel.app/docs/with-nextjs // const { data, error, isLoading } = useFetchSWR( // 'http://127.0.0.1:8000/api/anime/' // ); // Uses the Fetch API for data fetching const { data, error, isLoading } = useFetch( 'http://127.0.0.1:8000/api/anime/' ); if (error) return

An error has occurred.

; if (isLoading) return

Loading...

; console.log(data); return ( <>

POST: Add Anime Form

UPDATE: Update Anime Form

Select an ID from the list. You can change the data for Anime ID, Name and Release.

DELETE: Delete Anime Form

GET: Anime Data List

{data.map((anime) => (

• {anime.anime_name}

• ID: {anime.id}
• Anime ID: {anime.anime_id}
• Anime Release Year: {anime.anime_release}

))}

); }

There are libraries like SWR, RTK Query, and React Query that simplify the data fetching process on the client and take care of the state, error handling, caching, and re-fetching for you.

Then install the package SWR into your application with the following command:

SWR

I would suggest taking a look at SWR [0]. I think it strikes a very nice balance between using fetch and something more heavy-handed like React Query.

[0] https://swr.vercel.app/

Check out the official documentation for SWR here

SWR: A React Hooks library for remote data fetching. It supports features like caching, revalidation, error handling, prefetching, pagination, and support for SSG and SSR. Its bundle size is 10kb minified and 4.4kb gzipped

SWR Library