Как изменять состояние в React?

Управление состоянием в React

Состояние (state) — это данные, которые изменяются во время жизни компонента. В React есть несколько способов управлять состоянием.

Способ 1: useState Hook

useState — это хук для управления состоянием в функциональных компонентах:

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  
  const decrement = () => {
    setCount(count - 1)
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

useState возвращает массив с двумя элементами:

• Текущее значение состояния (count)
• Функция для обновления состояния (setCount)

Способ 2: Обновление на основе предыдущего состояния

Иногда нужно обновить состояние на основе предыдущего значения:

const [count, setCount] = useState(0)

const increment = () => {
  setCount(prevCount => prevCount + 1)
}

Способ 3: Обновление объектов в состоянии

При обновлении объектов нужно создавать новый объект, а не мутировать существующий:

const [user, setUser] = useState({ name: 'John', age: 30 })

const updateName = (newName) => {
  setUser({ ...user, name: newName })
}

const updateAge = (newAge) => {
  setUser(prevUser => ({ ...prevUser, age: newAge }))
}

Способ 4: Обновление массивов в состоянии

Аналогично объектам, создавай новый массив:

const [items, setItems] = useState(['apple', 'banana', 'cherry'])

const addItem = (item) => {
  setItems([...items, item])
}

const removeItem = (index) => {
  setItems(items.filter((_, i) => i !== index))
}

const updateItem = (index, newValue) => {
  setItems(items.map((item, i) => i === index ? newValue : item))
}

Способ 5: Множественное состояние

Компонент может иметь несколько состояний:

const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [age, setAge] = useState(0)

return (
  <div>
    <input 
      value={firstName} 
      onChange={e => setFirstName(e.target.value)}
    />
  </div>
)

Способ 6: useReducer для сложной логики

Для сложного состояния с множеством действий используй useReducer:

import { useReducer } from 'react'

const initialState = { count: 0, step: 1 }

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + state.step }
    case 'DECREMENT':
      return { ...state, count: state.count - state.step }
    default:
      return state
  }
}

export function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  )
}

Способ 7: Context API для глобального состояния

Для состояния, которое нужно разделить между компонентами:

import { createContext, useContext, useState } from 'react'

const UserContext = createContext()

export function UserProvider({ children }) {
  const [user, setUser] = useState(null)
  
  const login = (userData) => {
    setUser(userData)
  }
  
  const logout = () => {
    setUser(null)
  }
  
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  )
}

export function useUser() {
  return useContext(UserContext)
}

Ключевые моменты

• useState — основной способ управления состоянием
• Функция обновления — используй при зависимости от предыдущего состояния
• Неизменяемость — создавай новые объекты/массивы вместо мутирования
• useReducer — для сложной логики состояния
• Context API — для глобального состояния

Правильное управление состоянием критично для создания эффективных React приложений.