[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

Por qué debería usar useSWR en lugar de useState al llamar a las API

Primero comencemos con qué es el SWR y cómo usarlo…

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

¿Qué es SWR?

SWR (State While Revalidate) es un enlace de React que se utiliza para obtener datos del servidor. El SWR proporciona los datos de la caché y luego crea un servidor para validar, una vez que lo ha hecho, combina los datos para la consistencia de los datos.

Podemos instalarlo usando el comando de instalación de NPM.

npm install swr

¿Cómo usarlo SWR ?

El SWR es un simple gancho de React y devuelve datos y errores en el modelo de objetos.

Aquí está el ejemplo tomado del sitio web oficial.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Características ofrecidas por SWR

SWR proporciona muchas funciones de rendimiento, corrección y estabilidad para crear su aplicación con mejores experiencias de usuario.

Performance

El SWR está construido por el equipo de Next.JS con un alto rendimiento en mente. Ha construido un sistema de almacenamiento en caché y sistemas de deduplicación, que se saltan las redes innecesarias. Dado que es un gancho de React, puede evitar una repetición innecesaria debido a las llamadas de red.

Entonces el beneficio sería:

sin solicitudes innecesarias
sin repeticiones innecesarias
no se importa código innecesario

Precarga de datos

Puede precargar los datos agregando el <link ref="preload" href="..."/>. Pero en algunos, es necesario obtener previamente los datos mediante programación.

SWR proporciona una opción para obtener previamente los datos mediante programación.

import { mutate } from 'swr'

function prefetch () {
  mutate('/api/data', fetch('/api/data').then(res => res.json()))
  // the second parameter is a Promise
  // SWR will use the result when it resolves
}

Manejo de errores

El manejo de errores es crucial para que cualquier aplicación proporcione una mejor experiencia de usuario. SWR proporciona una opción para manejar el error globalmente, lo que reduce muchos códigos en la compilación final.

import React from "react";
import { SWRConfig } from "swr";

const App = () => {
  return (
    <SWRConfig
      value={{
        onError: (error, key) => {
          if (error.status !== 403 && error.status !== 404) {
            // We can send the error to Sentry,
            // or show a notification UI.
          }
        }
      }}
    >
      <MyApp />
    </SWRConfig>
  );
};

Pruébelo para usar SWR, mejorará el rendimiento de su aplicación de muchas maneras.

En una aplicación React, usualmente usamos useState y fetch para obtener los datos y representar el contenido. Si usamos useSWR, proporciona un mejor rendimiento al proporcionar los datos de la caché, luego envía una llamada para verificar y finalmente combina las dos fuentes de datos para la coherencia de los datos.

Sitio oficial: https://swr.vercel.app/

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

SWR: ¿Por qué usarlo en lugar de useState?