Как стать автором
Обновить

Комментарии 3

Я не уверен... А у вас есть какие-нибудь мысли?

  1. перед изменением стейта компонента - проверять не размонтирован ли этот компонент.

  2. Не делать приложения таким образом, что что-то может быть завязано на позднем ответе\ответах сервера или на порядке этих ответов (идемпотентность). Сеть - нестабильная и враждебная штука. Надеятся на abortController не надёжно.

Кажется человек совсем не понимает как работают promises.


export const useGetSingleArticle = (...) => {
  ...
  const articleRequest = fetch(path, {...});
  return [articleRequest];
}

Вот тут запрос уже запущен. Причём во время рендер-фазы (которая должна быть как можно более pure). Причём он делает новый запрос на каждый render (потому что вызывает useGetSingleArticle каждый рендер.


const [articleId, setArticleId] = useState(2);
const [articleRequest, abortArticleRequest] = useGetSingleArticle({articleId: articleId});

А вот тут:


const fetchOnClick = async () => {
    const newArticleRequest = await articleRequest;
    const newArticle = await newArticleRequest.json();
    ...
}

Он просто дожидается его завершения.


Зря вы всю эту чушь перевели. Тем кому и правда интересен hook-way я рекомендую почитать Клепова.
По какой-то необъяснимой причине буквально всё что публикуется на хабре про хуки, имеет настолько низкое качество, что можно смело переименовывать во "вредные советы".


Касательно AbortController-ов. Тут в целом стоит начать с того чтобы в ваших react-component-ах не было никаких fetch-ей. Это низкоуровневый примитив, которому не место в компоненте. Создайте прослойку для api-вызовов, которая всю мишуру, вроде обработки ошибок, .json(), валидации, преобразования данных и прочее сделает на своей стороне. А наружу пусть торчит условный:


api.getUserById: (userId: string) => Promise<User>

Ну или чуть сложнее, если нужно добавить поддержку abortController-ов.


Hook-Way он во многом о велосипедостроительстве. Вы постоянно пишете один и тот же код, подмечаете это, выносите общую составляющую в кастомный хук, который оптимально решает задачу. И так раз за разом. Потом эти хуки комбинируете между собой. Получается эдакая библиотека обобщённых хуков проекта. В ней наверняка будет пара тройка хуков для выполнения api запросов, в которой уже будут учтены все нюансы, включая уход от race condition, всякие throthle и debounce, кеши и т.д… Ну и мемоизация, само собой.

благодарю за отзыв. Первый опыт публикации. Постараюсь искать более полезные материалы.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории