React's useEffect vs. useSWR: Exploring Data Fetching in React.

1. axios

   1 481 107,512 9.0 JavaScript

   Promise based HTTP client for the browser and node.js

   

   The concept of data fetching in React applications is of high importance as it is often necessary to fetch data from an external source, such as an API or a database, and use that data to render components. React provides several ways to fetch data, including the built-in fetch method and popular third-party library Axios. One popular approach to data fetching in React is to use hooks like useEffect and useSWR from the swr third-party npm package. These hooks allow developers to fetch data and manage its state within a component, making it easy to update the UI in response to changes in the data.

2. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

3. Randomuser.me-Node

   2 32 1,426 0.0 JavaScript

   Source code that powers randomuser.me

   

   import { useEffect, useState } from 'react'; import './App.css'; import { ResultsProperties } from './types'; function App() { const [user, setUser] = useState(null); const apiUrl = 'https://randomuser.me/api/'; const fetcher = async (url: string) => { const response = await fetch(url); const data = await response.json(); setUser(data.results[0] as ResultsProperties); }; useEffect(() => { fetcher(apiUrl); }, []); const avatar = user?.picture; const largeAvatar = avatar?.large; const name = user?.name; const fullName = `${name?.title} ${name?.first} ${name?.last}`; return (

   {user === null ? (

   Loading...

   ) : ( <>

   {fullName}

   )}

   ); } export default App;

4. swr-datafetching

   3 1 0 - TypeScript

   

   You can check out the finished code of the project built in this article here

Suggest a related project