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

TL;DR; Today I saw my simple library use-local-storage-state has reached 2 million total downloads while my other ingenious* library main-thread-scheduling has only 8k. I explore why because: 1) it's curious, 2) I want to maximize my value in the open-source community by not making the same mistake twice.

No bloat. I am inspired by Sindre Sorhus. I aim to create small and focused modules. I commonly decline feature requests and propose an alternative ad-hoc solution to the user. When the request is valid and can't be implemented outside the library, I usually refactor enough so the bundle size remains almost the same. Take a look at the history of use-local-storage-state through the last versions. The size got smaller! If the feature is too big, I may consider splitting the problems into two repos.

For example, I just searched for "local storage react hook npm" and it didn't show my own library use-local-storage-state. For context, my library is the most downloaded and most maintained local storage react hook library on npm.

This looks a lot like one of the issues I have in the library — https://github.com/astoilkov/use-local-storage-state/issues/24.

use-local-storage-state - the prime example that inspired me to write this blog post.