Сова пишет…

React-hooks не отделяют логику от UI

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

Почему? Возьмём useEffect. Этот хук будет вызываться дважды в strict mode, потому что он связан с жизненным циклом компонента. И это не баг, а фича React, спорная конечно, но в результате, любая бизнес-логика внутри такого хука становится заложником жизненного цикла React.

И это только самый наглядный пример! Наверняка вы сами можете привести еще десяток менее очевидных примеров. Чего стоит только каскад ререндеров из-за необходимости указывать dependencies между разными useEffect. Приходится городить решения поверх особенностей реакт и выглядит это совсем не просто.

Из-за этой привязки к React, тестирование также превращается в проблему. Приходится оборачивать тесты в условный act(), или же мокать хуки и поведение React – и всё это только потому, что бизнес-логика не отделена от компонентов.

Можно решить "по-старинке": вынести логику в обычные функции или классы, а хуки использовать только как мост между React и бизнес-логикой. Но тогда мы сталкиваемся с новой проблемой – нужно самостоятельно продумывать реактивность и управление состоянием.

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

Используйте инструменты по назначению!

www.tgoop.com/sergeysova/1062

2.7K viewsDec 2 at 15:44

React-hooks не отделяют логику от UI

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

Почему? Возьмём useEffect. Этот хук будет вызываться дважды в strict mode, потому что он связан с жизненным циклом компонента. И это не баг, а фича React, спорная конечно, но в результате, любая бизнес-логика внутри такого хука становится заложником жизненного цикла React.

И это только самый наглядный пример! Наверняка вы сами можете привести еще десяток менее очевидных примеров. Чего стоит только каскад ререндеров из-за необходимости указывать dependencies между разными useEffect. Приходится городить решения поверх особенностей реакт и выглядит это совсем не просто.

Из-за этой привязки к React, тестирование также превращается в проблему. Приходится оборачивать тесты в условный act(), или же мокать хуки и поведение React – и всё это только потому, что бизнес-логика не отделена от компонентов.

Можно решить "по-старинке": вынести логику в обычные функции или классы, а хуки использовать только как мост между React и бизнес-логикой. Но тогда мы сталкиваемся с новой проблемой – нужно самостоятельно продумывать реактивность и управление состоянием.

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

Используйте инструменты по назначению!

BY Сова пишет…