React: useCallback возвращает undefined, когда компонент отображается на стороне сервера

Созданный на 15 нояб. 2018 · 4Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?

Ошибка.

Каково текущее поведение?

React.useCallback возвращает undefined когда компонент отображается на стороне сервера.

Если текущее поведение является ошибкой, пожалуйста, предоставьте шаги для воспроизведения и, если возможно, минимальную демонстрацию проблемы. Вставьте ссылку в свой пример JSFiddle (https://jsfiddle.net/Luktwrdm/) или CodeSandbox (https://codesandbox.io/s/new) ниже:

Эту ошибку можно воспроизвести, создав компонент React с помощью useCallback . Регистрация возвращаемого значения на сервере дает undefined то время как функция правильно возвращается в браузере.

Вы можете наблюдать эту ошибку в этом CodeSandbox: https://codesandbox.io/s/r557kww6wn Приложение правильно отрисовано со строковой ошибкой, глядя на консоль, вы увидите, что возвращаемое значение useCallback равно undefined .

Вот то же самое приложение, но визуализированное на клиенте: https://codesandbox.io/s/xvwv797pxz . Функция правильно регистрируется в консоли.

Какое ожидаемое поведение?

React.useCallback должен возвращать мемоизированный обратный вызов, а не undefined .

Какие версии React и какой браузер / ОС подвержены этой проблеме?

реагировать: 16.7.0-alpha.2
реагировать-дом: 16.7.0-альфа.2

Hooks Bug

Источник

Zhouzi

Самый полезный комментарий

Я считаю, что это ошибка; этот комментарий кода неверен. Насколько я понимаю, для обратных вызовов фазы рендеринга правильно использовать useCallback.

sophiebits 17 нояб. 2018

👍3

Все 4 Комментарий

Это преднамеренное поведение.

Обратные вызовы не выполняются в серверной среде.

Я предполагаю, что причина заключается в том, что, поскольку обратные вызовы предназначены для использования с обработчиками событий, такими как onClick , которые не имеют смысла во время SSR, React действительно не нужно отслеживать их, освобождая ресурсы, которые будут использоваться без надобности, отслеживая крючки, которые никогда не будут использоваться.

Не волнуйтесь, при регидратации обратные вызовы будут.

Но могу я спросить, что именно вы пытаетесь сделать?

arianon 15 нояб. 2018

Спасибо @arianon 👌 Я redux- react -hook использовать useCallback с их useMappedState . По идее, функция, которую я запоминаю, на самом деле не является обратным вызовом. Сначала я не обратил на это внимания, потому что этот термин обычно используется в самых разных контекстах. Также в документации упоминается, что:

useCallback(fn, inputs) эквивалентно useMemo(() => fn, inputs) .

Я открою вопрос в репозитории документации, чтобы предложить обновление 😉 Еще раз спасибо!

Zhouzi 16 нояб. 2018

sophiebits 17 нояб. 2018

👍3

AFAICT единственные вещи, которые не должны запускаться на стороне сервера, - это эффекты и инициализация атрибута ref. Рабочий useCallback важен, например, для шаблона HOC render prop, который еще долгое время будет в экосистеме.