Почему реакт жалуется на использование useCallback в теле функции провайдера контекста?

Question

[Никита Кит]

Занялся оптимизацией, ну типа все зависимости эффектов прописать и всё такое.
У меня некоторые writables моделей данных - их состояния сеттеры всё прочее, лежат по контекстам. Там же, в некоторых контекстах хранится состояние открытия и закрытия дроверов и модалок, которые слушают роутер ну и дёргают нужные сеттеры в эффекте.

Изначальный неоптимизированный код:

export const ClientDetailsProvider: FC<PropsWithChildren> = ({ children = null }) => {
...
    const openClient = () => setClientIsOpen(true)

  const closeClient = () => {
    setClientIsOpen(false);
    setId(null);
    resetValues();
  }

  useEffect(() => {
    if (router.query.editClient) {
      if (router.query.editClient === 'new') {
        openClient();
        return;
      }
      setId(`${router.query.editClient}`);
      openClient();
    } else {
      setId(null);
      closeClient();
    }
  }, [router.query]);
...
}

Ловлю варнинги - React Hook useEffect has a missing dependency: 'closeClient'. Either include it or remove the dependency array, ну база базовая - заворачиваем колбэки в useCallback, тусим их в зависимости эффекта и казалось бы ок - не завернём получим другим варнингом по терминалу The 'openClient' function makes the dependencies of useEffect Hook (at line 110) change on every render. To fix this, wrap the definition of 'openClient' in its own useCallback() Hook.

Оптимизируем:

export const ClientDetailsProvider: FC<PropsWithChildren> = ({ children = null }) => {
...
  const openClient = () => useCallback(() => setClientIsOpen(true), []);

  const closeClient = useCallback(() => {
    setClientIsOpen(false);
    setId(null);
    resetValues();
  }, []);

  useEffect(() => {
    if (router.query.editClient) {
      if (router.query.editClient === 'new') {
        openClient();
        return;
      }
      setId(`${router.query.editClient}`);
      openClient();
    } else {
      setId(null);
      closeClient();
    }
  }, [router.query, openClient, closeClient]);
...
}

Получаем ошибку:


Почему?

Answer 1

[A1yks]

Так ты из стрелочной функции openClient возвращаешь вызов хука usecallback, поэтому и ругается

Comments

[Никита Кит]

Да, извини, решение отдал тому кто первый

[Михаил Р.]

Никита Кит, здесь решение можно давать всем, не только первым

Answer 2

[Aleksey Solovyev]

А зачем вы функцию внутри функции оборачиваете в useCallback?

const openClient = () => useCallback(() => setClientIsOpen(true), []);

Comments

[Никита Кит]

потому что я лалка невнимательная
Заработало
Реакт сраный колбэкхэл чтоб его