Сравнение различных способов управления состоянием в React

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

В маленьких приложениях эта задача может быть простой: вы используете хук useState, чтобы сохранять и обновлять состояние внутри одного компонента. Однако по мере роста приложения управлять состоянием становится сложнее. Оно может быть разбросано по разным компонентам, и вам нужно находить способы эффективно передавать и изменять его в разных частях приложения.

Рассмотрим несколько подходов к решению этой задачи, начиная с самого простого.

1. Использование useState

Хук useState — это, пожалуй, самый распространенный и простой способ управления состоянием в функциональных компонентах. Этот хук позволяет вам объявить переменную состояния и функцию для её обновления.

const [count, setCount] = useState(0);

Когда использовать useState?

• Если ваше состояние локально для компонента и не должно передаваться вниз по дереву компонентов.
• Когда состояние не связано с логикой нескольких компонентов.

Преимущества

• Простота. useState чрезвычайно легко понять и применить.
• Хорош для небольших компонентов и локального состояния.
• Позволяет быстро добавлять состояние в компонент без лишней сложности.

Недостатки

• Если состояние нужно передавать через несколько уровней компонентов (проблема так называемого "drilling" — "пробивка пропсов"), useState может усложнить код.
• Когда состояние становится более сложным (например, представляет собой объект с множеством свойств), useState может оказаться неудобным.

2. Использование useReducer

Если у вас есть сложное состояние, которое требует применения множества различных операций для его обновления, хук useReducer может оказаться отличным выбором. Он похож на работу с редюсерами в Redux, где состояние управляется с помощью действий (actions) и редюсера (reducer).

Пример:

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:

      throw new Error();

  }

}



const [state, dispatch] = useReducer(reducer, initialState);

Когда использовать useReducer?

• Если ваше состояние сложно и требует множества различных действий.
• Если вам нужен более предсказуемый и структурированный подход к управлению состоянием.

Преимущества

• Легко управлять сложным состоянием с большим количеством логики.
• Применим для компонентов, которые выполняют сложные операции с состоянием.
• Структурированный подход с использованием действия и редюсера упрощает тестирование и масштабирование.

Недостатки

• Может показаться излишне сложным для небольших компонентов.
• Порождает больше кода, чем useState, особенно для простого состояния.

3. Контекст (Context API)

Контекст React (Context API) предоставляет способ передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне. Это полезно для передачи состояния или функций управления состоянием между отдалёнными компонентами.

Пример:

const CountContext = React.createContext();



function ParentComponent() {

  const [count, setCount] = useState(0);



  return (

    <CountContext.Provider value={{ count, setCount }}>

      <ChildComponent />

    </CountContext.Provider>

  );

}



function ChildComponent() {

  const { count, setCount } = useContext(CountContext);



  return <button onClick={() => setCount(count + 1)}>Increment</button>;

}

Когда использовать контекст?

• Если вам нужно передавать состояние или функции управления состоянием через несколько уровней компонентов.
• Когда вы хотите избежать "пробивки пропсов" (prop drilling).

Преимущества

• Упрощает передачу состояния в глубоко вложенные компоненты.
• Легко использовать для управления глобальными состояниями, такими как темы или авторизация пользователя.

Недостатки

• Может усложнять логику компонентов, если контекст используется слишком широко.
• Сложнее дебажить, когда контекст используется в большом количестве компонентов.

4. Redux

Redux — это популярная библиотека для управления состоянием, которая предоставляет централизованный хранилище для состояния всего приложения. Она основывается на принципах однонаправленного потока данных, использования редюсеров и неизменяемого состояния.

Пример работы с Redux:

1. Создаём хранилище:

import { createStore } from 'redux';



const initialState = { count: 0 };



function counterReducer(state = initialState, action) {

  switch (action.type) {

    case 'INCREMENT':

      return { count: state.count + 1 };

    case 'DECREMENT':

      return { count: state.count - 1 };

    default:

      return state;

  }

}



const store = createStore(counterReducer);

1. Используем в компоненте:

import { useSelector, useDispatch } from 'react-redux';



function Counter() {

  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();



  return (

    <>

      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>

      <p>{count}</p>

    </>

  );

}

Когда использовать Redux?

• Если ваше приложение имеет сложное состояние, которым нужно управлять централизованно.
• Когда состояние должно быть доступно в любом компоненте вашего приложения.

Преимущества

• Центральное хранилище делает состояние легко доступным для любого компонента.
• Прозрачная структура с четким разграничением редюсеров, действий и состояния.
• Легкость тестирования, так как все операции с состоянием предсказуемы и прозрачны.

Недостатки

• Много шаблонного кода, даже для небольших приложений.
• Может быть сложным для освоения новичками.
• Переусложнение для простых приложений.

5. MobX

MobX — это другая библиотека для управления состоянием, которая делает акцент на реактивности и автоматическом отслеживании изменений в состоянии. Она менее ограничена, чем Redux, и позволяет изменять состояние напрямую.

Пример работы с MobX:

import { makeAutoObservable } from "mobx";



class CounterStore {

  count = 0;



  constructor() {

    makeAutoObservable(this);

  }



  increment() {

    this.count++;

  }

}



const counterStore = new CounterStore();

В компоненте:

import { observer } from "mobx-react-lite";



const Counter = observer(({ store }) => (

  <>

    <button onClick={() => store.increment()}>Increment</button>

    <p>{store.count}</p>

  </>

));

Когда использовать MobX?

• Если вам нужна гибкость и автоматическое управление состоянием.
• Когда вы хотите минимизировать количество шаблонного кода.

Преимущества

• Простота и минимальный шаблонный код.
• Автоматическая реактивность — состояние обновляется автоматически при изменении данных.
• Поддерживает классы, что может быть удобно для некоторых разработчиков.

Недостатки

• Меньше контроля за потоком данных по сравнению с Redux.
• Может быть сложнее отслеживать изменения состояния в больших приложениях.