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

1. axios

   1 481 107,336 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. Civic Auth

   www.civic.com featured

   Web2 & Web3 login in a simple SDK. Drop Civic Auth into your app with native TS/JS support. Email login, SSO options, embedded wallets, and full session management. Minimal config. Deploy in under 5 minutes.

   

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