Как правильно инициализировать состояние массива в useState?

Инициализация массива в useState

В React хук useState позволяет хранить состояние компонента. Для массива начальное значение передается как аргумент. Простейший случай — пустой массив: useState([]). Если массив должен содержать данные, передайте его напрямую: useState([1, 2, 3]).

Ленивая инициализация

Если начальное состояние требует сложных вычислений, используйте функцию-инициализатор: useState(() => computeInitialArray()). Это гарантирует, что вычисление выполнится только один раз при первом рендере.

Пример кода

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]); // пустой массив
  const [initialTodos] = useState(() => {
    // ленивая инициализация
    return ['Learn React', 'Build project'];
  });

  const addTodo = (text) => {
    setTodos([...todos, text]); // добавление элемента
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => addTodo('New task')}>Add</button>
    </div>
  );
}

Важные моменты

• Не изменяйте массив напрямую (push, splice) — используйте методы, возвращающие новый массив (spread, concat, filter, map).
• Для обновления состояния всегда передавайте новое значение или функцию, возвращающую новое значение.
• При работе с объектами в массиве создавайте копии объектов при изменении.

Вывод: правильная инициализация массива в useState — это передача начального значения (пустого или заполненного) или функции для ленивой инициализации. Это основа работы с коллекциями данных в React.