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

Question

[nskaskyou]

Перед вами абсолютно стандартный хук из интернетов.
Проблема с ним в том, что он рендерится 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 };
}

Comments

[Валерий]

https://kentcdodds.com/blog/stop-using-isloading-b...

Answer 1

[ParaBellum577]

Не хотите лишнего рендера, вынесите логику в экшены, берите на прямую данные из Redux например.
Если не нужен рендер после того, как вы меняете состояние, то вообще не используйте стейт, можно положить значение допустим в useRef, но тогда компонент не узнает о смене данных в нем, думаю вам такое не нужно. А вообще 3 рендера это вполне нормально для такого кейса

Comments

[Aetae]

Чем тут redux поможет, кроме мусора, если логику он не поменяет? Было три setState'а, будет три dispatch'а. :)

Answer 2

[Игорь Тимошенков]

Можно еще попробовать useLayoutCallback - он синхронно выполняется и тогда даже не смотря на ваши 2 setState в request обработчике, рендер должен быть только 1.

Answer 3

[Aetae]

Юзать один state на всё. Обновлять значение loading вместе с data.

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