Как в react передать функции новое состояние?

Question

[sema-fedotov]

Добрый день, имеется приложение написанное на React:

const App = () => {
     const [status, setStatus] = useState(null)

     function getStatus() {
         console.log(status)
     }

}

Приложение имеет множество состояний. Возможно ли как то отслеживать их именение в функции без useEffect с привязкой к одному состоянию?

useEffect(() => {
       // ...
    }, [status])

Comments

[WbICHA]

Не очень понял, useCallback неподходит?

[Алексей]

WbICHA, я так понимаю, у него eventListener юзает функцию getStatus, иначе вряд ли такой вопрос бы задавался. Тем более, что при каждом обновлении статуса функция getStatus бы итак обновлялась и при вызове ее без всякого useCallback в ней выводился бы последний статус.

Answer 1

[Алексей]

Вариант по сути только один, наверное - сохранять состояние в ref.

Но все равно придется обновлять ref в useEffect:

useEffect(() => {
    ref.current = status;
  }, [status]);

Из ref уже читать статус в вашей функции getStatus, где ref.current будет содержать всегда последнее значение status.

Comments

[sema-fedotov]

А зависимости useEffect могут перечисляться?

useEffect(() => {
    ref.current = status;
  }, [status1, status2...]);

[Алексей]

sema-fedotov, можно, только все таки желательно бы знать подробности где getStatus используется, а то я то предположил единственный вариант, что функция используется в каком-то браузерном обработчике событий, но что-то засомневался.

[sema-fedotov]

Алексей, Так и есть, функция обрабатывает браузерные события. Есть вариант делать так:
document.onclick = () => {}
Но просто хочется узнать, какой вариант является более рациональным.

[Алексей]

sema-fedotov, не, так точно не надо. В данном случае решение с ref вполне нормальное, мне кажется.
Еще, тут в примере состояние хранится в верхнеуровневом компоненте App, при смене статуса все приложение будет перерисовываться, так и задумано было? И если приложение на всю страницу работает, то в этом случае клик лучше навешивать на верхнеуровневый элемент в App, на div, например, который будет во весь вьюпорт, тогда реф не нужен будет.