Кастомные хуки в React: лучшие практики, пример использования и покрытия тестами

[nullorone]

Импорт act верен?
Отображает следующую ошибку

console.error
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:

// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);

// for react-test-renderer:
import TestRenderer from react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);

[daneelzam]

В статье я импортирую act из “@testing-library/react“

import { renderHook, waitFor, act } from '@testing-library/react';

[detonatorx]

Хук можно сделать более гибким, если он будет возвращать помимо { books, isLoading, isError } также fetchData. Это позволит запускать fetchData по определенному событию в требуемом компоненте.

[daneelzam]

Да, точно! В этом и прелесть кастомных хуков, это очень гибкий инструмент.

[sovaz1997]

А лучше тогда useQuery использовать, может?)

[Dron007]

Троттлинг тут не очень хороший - будет просто всё тормозить на полсекунды. Обычно первый запрос идёт сразу, а остальные уже откладываются. Но статья не об этом, собственно, так что нормально. Главное, в коде так не делать.

Библиотека RTK Query как раз такое и предлагает для get-запросов плюс кеширование запроса ещё. А для мутаций там хук не сразу выполняется а при вызове возвращаемой хуком функции-инициатора, как выше предлагали. Для query тоже можно в таком режиме использовать.

[daneelzam]

Правильно ли я понял, что вы предлагаете отправлять запрос как только начался пользовательский ввод, а последующие запросы откладывать?

Просто в таком случае, если пользователь хочет получить книги по запросу «Толстой», то будет отправлен запрос по первому введенному символу «Т», а остальные символы будут проигнорированы. Тут смысл троттлинга в том, чтобы убедиться, что пользователь ввел все, что планировал.

UPD

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

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

[Dron007]

Я не учёл специфику конкретного применения, что запрос тут идёт сразу после каждого обновления поля ввода. В общем случае для API-запросов это не очень хороший троттлинг, ведь этот хук может и при нажатии кнопки какой-то использоваться. На то он и хук. Но для поля ввода, пожалуй, вполне допустима задержка в полсекунды. Хотя обычно в таких случаях делают, или что поиск начинается после ввода 2-3 символов или debounce, а не троттлинг, чтобы слать запрос только когда набрал название полностью и сделал паузу, а не постоянно в процессе набора.

[daneelzam]

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

Но в целом это не меняет сути ваших комментариев, просто думаю, что это важное уточнение😁.