Skip to main content
Практика завдань

Що таке useReducer в React?

useReducer — це React хук, який дозволяє керувати станом компонент за допомогою reducer — функції, подібної до reducer з Redux.

Це особливо корисно, коли:

  • стан є складним (об'єкт, масив),
  • потрібно багато умов/дій для зміни стану,
  • або коли потрібне передбачуване оновлення з чіткою логікою.

Синтаксис

jsx
const [state, dispatch] = useReducer(reducer, initialState);
  • reducer — функція, яка приймає state та action, і повертає новий стан.
  • initialState — початковий стан.
  • state — поточний стан.
  • dispatch(action) — спосіб викликати оновлення стану.

Простий приклад

jsx
import { useReducer } from "react"; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "decrement": return { count: state.count - 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: "decrement" })}>-</button> <button onClick={() => dispatch({ type: "increment" })}>+</button> </div> ); }

Як працює Reducer?

Reducer — це чиста функція, яка не має побічних ефектів і завжди повертає новий стан на основі поточного стану та дії.

javascript
(state, action) => newState

Перевага useReducer:

Хук useReducer допомагає організувати бізнес-логіку окремо від компонентів, роблячи їх чистішими та легшими для тестування.

Висновок

  • useReducer є альтернативою useState, особливо корисною для складної логіки стану.
  • Дозволяє централізоване управління станом.
  • Робить компонент більш передбачуваним і тестованим.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань
Назад
Далі