Creando una aplicación con React y SWR

SWR se trata de una biblioteca de React Hooks para la búsqueda remota de datos.

El nombre SWR deriva de stale-while-revalidate una estrategia de invalidación de caché HTTP popularizada por RFC 5861.

SWR en su primer lugar, devuelve los datos de la caché que se encuentran obsoletos, luego envía la solicitud de recuperación (revalidación) y finalmente vuelve con los datos actualizados.

Esta acción sucede cuando vuelve a enfocar una página o cambia entre pestañas, SWR revalida automáticamente los datos.

Crear aplicación

npx create-react-app dummy

cd dummy

Instalación de dependencias

npm i axios

npm i swr

Uso de SWR

import useSWR from 'swr';
import axios from 'axios';

function App() {

  const apiUrl = 'https://randomuser.me/api/';

  const fetcher = (url) => (
    axios.get(url).then(res => res.data)
  );

  const { data, error } = useSWR(apiUrl, fetcher)

  if (error) {
    return <div>Error, {error}</div>
  }
  if (!data) {
    return <div>Extrayendo datos</div>
  }

  return (
    <div>Email: {data.results[0].email}</div>
  )
}

export default App;

Ejecutar la aplicación

npm start

http://localhost:3000