Comments 6
На мой взгляд, useMemoCompare — чеховское ружье, которое обязательно выстрелит в ногу рано или поздно. Лучше сразу правильно сравнивать и кешировать объекты, например, в реселекте. Ну и пример, конечно, слегка высосан из пальца.
В хуке useLocalStorage (он, к слову, в чуть более навороченном виде лежит тут https://github.com/streamich/react-use/blob/master/src/useLocalStorage.ts ) мне не хватило подписки на изменения значения в другой вкладке с использованием window.addEventListener('storage', ...).
Ну и тот же useAuth слишком специфичный для конкретного использования. А так отличный перевод, спасибо!
useAuth и большинство хуков из статьи — снова бизнес логика в слое логики компонентов, т.е. фактически в слое view.
Сначала эту логику некоторые писали в миксинах, потом в HOC, теперь в хуках. Уверены, что через годик что-нибудь новое не появится или api хуков не изменится и не придется переписывать? Если эта же логика потребуется в проекте на angular или на vue или в реакт проекте на классах, заново будете ее реализовывать?
Плюс код в хуке выполняется при каждом рендере компонента. Отличный способ усложнить логику и немного ухудшить производительность.
Hook-и сродни HoC-ам. Т.е. легко могут быть отдельным слоем, а не View. И довольно легко тестируются. И очень легко группируются и всячески разделяются. Т.е. в какой-то степени писать бизнес-логику в кастомных хуках — вполне ок. Хотя конечно это сугубо зависит от того как вы это делаете и какая у вас архитектура приложения. Наш опыт сугубо позитивный. Сложные компоненты используют сложные хуки, которые выстраиваются в целые деревья подхуков, которые очень плотно переиспользуются ибо DRY.
// SomeComponent.tsx
type Props = { ... };
const SomeComponent: ({ ... }: Props) => {
const { ... } = useSomeComponent({ ...props... });
return <div>{ ... }</div>;
}
// useSomeComponent.tsx
type Arg = { ... };
export default function useSomeComponent({ ... }: Arg) {
...
return { ... };
};
// SomeComponent.test.tsx
import useSomeComponent from './useSomeComponent';
declare('SomeComponent', () => { ... });
...Мне кажется сейчас уже почти везде при написании SPA пришли к выводу, что несмотря на то, что бизнес-логика должна быть сепарирована от чисто view слоя, она, тем не менее, очень плотно от этого слоя зависит. Т.е. view часть выступает своего рода заказчиком, а какая-нибудь Model / ViewModel + Model / HoC / Redux / CustomHook / etc выступает слоем где лежит то откуда мы берём данные, как мы их меняем, какой жизненный цикл у этих данных есть. И вот как это всё называется дело десятое.
Кому-то по душе писать это полностью отдельно от своих Vue и React-ов, кому-то, раз уже затащили эти штуки в проект, хочется получать от них profit в ввиду упрощённой интеграции и взаимосвязи.
Ладно, сейчас рано делать выводы. Через несколько лет видно будет, когда разработчики понаступают на различные грабли и сформируют best practices.
Кастомные хуки. Part 1