Как лучше вынести логику счётчика: отдельным компонентом или кастомным хуком?

Question

[Илья]

В корзине у каждого товара есть «счётчик»: поле количества с кнопками «Уменьшить» и «Увеличить».

Хочу вынести эту логику из основного компонента. Как это лучше сделать: отдельным компонентом или кастомным хуком?

Песочницы по ссылкам. Склоняюсь к варианту с компонентом: так код кажется лучше. Напишите, пожалуйста, как думаете вы. Если ещё подскажете, как отрефакторить что-то, тоже буду благодарен.

Answer 1

[abberati]

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

По поводу «сделать лучше»: сделайте две переменных стейта внутри app и передавайте каждому счётчику свои [countN, setCountN] — зачем счётчикам знать про другие счётчики? Тогда внутри счетчика будет меньше кода — нужно обрабатывать данные для конкретно этого счетчика, без необходимости делать setValues({ ...values, })

Comments

[Илья]

Спасибо, переписал.

Отдельное спасибо за рекомендацию «две переменных стейта». Благодаря этому ещё убрал data-input у кнопок.

С рефами у меня всё ок?

[abberati]

Илья, не знаю — с рефами в хуках не работал.