Frontender Libs - обзор библиотек JS / CSS

Хук useSWR для удаленной выборки данных

useSWR – это хук React, который помогает управлять данными, полученными с сервера. Он основан на паттерне "stale-while-revalidate" (SWR).

Как это работает:

SWR возвращает данные из кэша, если они есть (даже если они устарели). Далее отправляет запрос на сервер, чтобы получить свежие данные. Наконец, обновляет данные в компоненте, когда они будут получены.

Пример:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/users');

  if (error) return <div>Error loading users</div>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

В этом примере useSWR используется для получения данных с сервера по адресу /api/users, data содержит объект с данными, полученными с сервера., а error содержит сообщение об ошибке, если запрос на сервер не удался.

👉 @sWebDev

👍5

www.tgoop.com/sWebDev/2770

2.05K viewsMar 25, 2024 at 07:45

Хук useSWR для удаленной выборки данных

useSWR – это хук React, который помогает управлять данными, полученными с сервера. Он основан на паттерне "stale-while-revalidate" (SWR).

Как это работает:

SWR возвращает данные из кэша, если они есть (даже если они устарели). Далее отправляет запрос на сервер, чтобы получить свежие данные. Наконец, обновляет данные в компоненте, когда они будут получены.

Пример:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/users');

  if (error) return <div>Error loading users</div>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

BY Frontender Libs - обзор библиотек JS / CSS