Що таке useReducer і коли його вибирати замість useState?

Хук useReducer є потужним інструментом управління станом у React, який слугує чудовою альтернативою стандартному хуку useState при роботі зі складними сценаріями. Його головне завдання — впорядкувати логіку оновлення даних, коли поточний стан залежить від попереднього або коли додаток обробляє безліч різних типів користувацьких дій.

Вибирати useReducer замість useState варто в кількох типових ситуаціях. По-перше, коли стан компонента є складним об'єктом або масивом із безліччю полів, що вимагають різних правил модифікації. По-друге, коли переходи між станами залежать від суворої бізнес-логіки, яку важко підтримувати за допомогою розрізнених викликів функції setState.

Однією з ключових переваг useReducer є те, що сама функція-ред'юсер пишется як чиста функція. Це означає, що вона приймає поточний стан і дію, а повертає новий стан без будь-яких побічних ефектів. Така чистота коду робить тестування логіки неймовірно простим, оскільки для перевірки достатньо передати в ред'юсер певні аргументи і порівняти результат.

useReducer чудово поєднується з концепцією discriminated unions у TypeScript. Це дозволяє суворо типізувати всі можливі дії та корисне навантаження до них, виключаючи появу неприпустимих станів на етапі компіляції коду.

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