@nskaskyou

Hook useRequest/useFetch как избавиться от лишних рендеров?

Перед вами абсолютно стандартный хук из интернетов.
Проблема с ним в том, что он рендерится 3 раза.
(первый при монтировании, второй при изменении стейта Дата и третий при изменении стейта Лоадинг)

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

(Как костыль сейчас один стейт на все. При лоадинге он остается нулом а при ошибке приходит просто строка, ну и при успехе там массив)

import { useState, useCallback, useEffect } from 'react';

export function useRequest(request) {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    const execute = useCallback(() => {
        return request()
            .then((response) => setData(response))
            .catch((error) => setError(error))
            .finally(() => setIsLoading(false));
    }, [request]);

    useEffect(() => {
        execute();
    }, [execute]);

    return { data, isLoading, error };
}
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 3
@ParaBellum577
Не хотите лишнего рендера, вынесите логику в экшены, берите на прямую данные из Redux например.
Если не нужен рендер после того, как вы меняете состояние, то вообще не используйте стейт, можно положить значение допустим в useRef, но тогда компонент не узнает о смене данных в нем, думаю вам такое не нужно. А вообще 3 рендера это вполне нормально для такого кейса
Ответ написан
t1gor
@t1gor
Web developer
Можно еще попробовать useLayoutCallback - он синхронно выполняется и тогда даже не смотря на ваши 2 setState в request обработчике, рендер должен быть только 1.
Ответ написан
Aetae
@Aetae
Тлен
Юзать один state на всё. Обновлять значение loading вместе с data.

Ну и лучше сразу юзать что-нить жирное и хорошей поддержкой типа react-query, чтоб не возиться потом со своими велосипедами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы