В React 16.8 добавили такую крутую фичу, как хуки, все сразу бросились ее юзать, некоторые начали ее юзать еще в бетах, до официального релиза, я же к этой фиче отнесся как-то несколько холодно.

Без сомнения, идея очень крутая, использовать удобно, можно уходить от классов (я в классах ничего плохого не вижу, но все почему-то это как один из главных пунктов приводят). Но, во-первых, людей надо учить использовать хуки, просто так вот взять и перейти на хуки в production-приложении мне кажется несколько неправильным (какие еще причины, кроме людей, ниже), ибо экспертиза из воздуха не появляется, во-вторых, хуки вносят несколько новых “парадигм”, работу тех же эффектов опять же надо объяснять людям.

Но пост не о людях, а о самих хуках. На одном из проектиков мы не юзаем хуки, в основном, по причинам, описанным выше, плюс ко всему, основную часть команды составляют малоопытные разработчики, которые только познают все чудеса мира фронтенда, да и сроки слишком сжаты, чтоб в рамках проекта новые техники изучать, но в один момент понадобилось втащить одну библиотеку, которая, как можно догадаться, использует хуки. Да, вот так вот стало сразу модно использовать хуки в библиотеках, не заботясь об обратной совместимости и всяких таких модных важных вещах, при том условии, что хуки там ну чисто для того, чтобы были.

Втащили библиотеку, заюзали их хуки и… все сломалось, вместо приложения красовалась ошибка:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Конечно, первым делом я перешел по ссылке, проверил версии React’а и всего остального, проверил корректность использования хуков, но все мои исследования пользы не принесли, все было корректно, тогда я пошел шерстить GitHub в поисках решений и источников проблемы.

Из первого попавшегося react#15315, там виновных нашли сразу кучу, и неправильное использование роутера, и HtmlWebpackPlugin, и вызов в HoC’е, а в react-dropzone#821 вообще оказалось, что все ломали observer’ы из mobx.

Мой случай похож, хуки ломались из-за использования такой утилиты, как why-did-you-update, которая, к слову, довольно долго жила во многих проектах без проблем, а тут вот всплыло. Соответственно, чтобы поправить работу приложения ни осталось ничего, кроме того, что убрать вызов утилиты.

Историю свою я рассказал, какой вывод можно сделать? Не знаю, но точно знаю, что хуки с существующими решениями не всегда корректно работают, и что если вдруг хуки сломались надо подчищать HoC’и, несколько часов жизни в никуда...