Useswr — Моя Новая Любимая Библиотека React.

Он позволяет немедленно загружать кэшированный контент и немедленно обновлять его для обработки нового контента в будущем.

В нашем случае мы получили идеальный компромисс между производительностью и пользовательским опытом.

Он позволяет получать данные из API или другого внешнего источника, сохранять их в кеше, а затем отображать.

Начнем с рассмотрения примера компонента React, который получает список TODO с JSON-серверы , и визуализирует его.

import React from "react"; import useSWR from "swr"; const todosEndpoint = " http://localhost:3001/todos "; const getData = async () => { const response = await fetch(todosEndpoint); return await response.json(); }; const TodoApp = () => { const { data: todos } = useSWR(todosEndpoint, getData); return ( <div> {todos && todos.map(todo => ( <div key={todo.id}>{todo.title}</div> )} </div> ); }; export default TodoApp;

Как видите, она очень похожа на предыдущую реализацию.

В этом примере мы используем useSWR(ключ, сборщик, параметры) чтобы получить наш список TODO. Ключ useSWR необходим для кэширования.

В нашем случае мы использовали todosEndpoint .

Как сборщик мы передали асинхронную функцию, которая извлекает список TODO. Необходимо отметить, что использовать SWR понятия не имеет, как вы получаете данные.

Вы можете использовать любую стратегию асинхронного получения данных, которая вам нравится.

вы можете использовать принести , аксиомы или даже ГрафQL .

использовать SWR .

В этом примере мы получим один элемент списка TODO и отобразим флажок для статуса.

полный наша задача из списка.

Когда флажок установлен, мы отправляем запрос PUT для обновления TODO, а затем вызываем мутировать обновить кеш использовать SWR .

import React from "react"; import useSWR from "swr"; import ".

/App.css"; const todosEndpoint = " http://localhost:3001/todos "; const getTodo = async (id) => { const response = await fetch(`${todosEndpoint}/${id}`); return await response.json(); }; const updateTodo = async (id, todo) => { const response = await fetch(`${todosEndpoint}/${id}`, { method: "PUT", headers: { "Content-type": "application/json; charset=UTF-8", }, body: JSON.stringify(todo), }); return await response.json(); }; const TodoApp = () => { const todoId = 1; const key = `${todosEndpoint}/${todoId}`; const { data: todo, mutate } = useSWR(key, () => getTodo(todoId) ); const toggleCompleted = async () => { const newTodo = { .

todo, completed: !todo.completed, }; await updateTodo(todoId, newTodo); mutate(newTodo); }; if (!todo) { return <div>Loading.</div>; } return ( <div> <p>{todo.title}</p> <div> <input type="checkbox" id="completed" name="completed" value="completed" checked={todo.completed} onChange={toggleCompleted} /> <label htmlFor="completed">Completed</label> </div> </div> ); };

Применение мутировать это отличный способ улучшить видимую производительность вашего веб-приложения.

Мы можем изменять данные локально и изменять представление, не дожидаясь обновления удаленного источника данных.

использовать SWR Он даже проверит и заменит их новейшими справочными данными.

Возможно, в вашем приложении уже есть механизм управления состоянием, и вы не видите смысла использовать стороннюю библиотеку для таких простых задач, как поиск и кэширование данных.

И я вам скажу, что кэшировать данные – дело непростое.

И по мере роста вашего приложения это становится еще сложнее.

Вы столкнетесь с пограничными случаями, и их обработка приведет к созданию сложных магазинов и поставщиков, которые трудно понять и сложно поддерживать.

Ошибки появятся из ниоткуда.

1. Это позволило нам удалить код Запросы на включение, которые удаляют лишний код, а не добавляют новый, — мои любимые.

Чем меньше кода в приложении, тем меньше вероятность появления ошибок.

И это хорошо.

С возрастом я все больше начинаю ценить простоту.

использовать SWR позволило нам полностью удалить неуказанные магазины, что упростило наше приложение и облегчило его понимание.

2. Новым разработчикам стало проще присоединиться к проекту.

использовать SWR , как и большинство проектов с открытым исходным кодом, может похвастаться отличной документацией.

Внедрение нашего собственного решения означало бы, что нам нужно будет написать собственную документацию и научить новых разработчиков проекта тому, как обращаться с извлечением данных.

Теперь, когда мы используем использовать SWR , нам не нужно этого делать.

3. Он упрощал сложные вещи.

Наше приложение, как и большинство других приложений, содержит множество вызовов API. Некоторые из этих вызовов зависят от других вызовов API. С использовать SWR Легко писать перехватчики для зависимых запросов.

4. Улучшена видимая производительность.

Приложение выглядит быстрее.

Пользователи это оценили и оставили хорошие отзывы.

5. Он обновляет устаревшие данные использовать SWR обновляет устаревшие данные в фокусе.

Это означает, что пользователи всегда имеют самую актуальную версию данных, независимо от времени загрузки.

Эта библиотека упростила наш код и улучшила взаимодействие с пользователем.

Я даже не могу представить другую библиотеку, которую было бы так легко реализовать и которая приносила бы столько преимуществ.

использовать SWR .

Чтобы узнать больше о использовать SWR , вы можете посетить Веб-сайт или репозиторий на GitHub .

Хотя в нашем случае это сработало хорошо, возможно, вам лучше подойдет другая библиотека извлечения данных.

Если вы используете ГрафQL , Что Аполлон было бы отличным решением.

Узнайте больше о курсе.