“useSwr” The New React Hook for Fetching Remote Data.

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • vercel

    Develop. Preview. Ship.

  • We’ll be looking at a new way to fetch data in React projects in this post. This is a hook built by Vercel, called SWR used for remote data fetching with other features, such as caching, pagination, error handling, auto revalidation, mutation and so on. We’ll be building a Random Store App, using SWR hook to get data from FakeStore API.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • SWR

    React Hooks for Data Fetching

  • We’ll be looking at a new way to fetch data in React projects in this post. This is a hook built by Vercel, called SWR used for remote data fetching with other features, such as caching, pagination, error handling, auto revalidation, mutation and so on. We’ll be building a Random Store App, using SWR hook to get data from FakeStore API.

  • fake-store-api

    FakeStoreAPI is a free online REST API that provides you fake e-commerce JSON data

  • //Products.js import React from "react"; import axios from "axios"; import useSWR from "swr"; function Products({ count, setCount }) { const address = `https://fakestoreapi.com/products?limit=${count}`; const fetcher = async (url) => await axios.get(url).then((res) => res.data); const { data, error, mutate } = useSWR(address, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false, }); //check error and display corresponding UI if (error) return ( 404 Loading failed... ); //check loading and display corresponding UI if (!data) return ( Loading... ); //create loadMore function const LoadMore = () => { setCount(count + 4); mutate(); }; return ( ///check and display Items LoadMore()}>Load More ); } export default Products;

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Next.js: Crafting a Strict CSP

    3 projects | dev.to | 7 Mar 2024
  • SEO Optimization for Client Side Rendered Next.js Apps

    2 projects | dev.to | 1 Jan 2024
  • Effortlessly Schedule Meetings with a Custom Calendly Next.js Application

    3 projects | dev.to | 3 Mar 2023
  • Automating (and probably overengineering) my /now page

    2 projects | dev.to | 6 Feb 2023
  • Where to store gltf file online for codepen load?

    3 projects | /r/threejs | 7 Sep 2022