Какие параметры принимает useState?

Краткий ответ

Хук useState принимает один параметр: начальное состояние (initial state). Это может быть любое значение: примитив (число, строка, булево), объект, массив или даже функция.

Детальное объяснение параметров useState

В основе вашего вопроса лежит ключевой принцип хуков React. Давайте разберем его подробно.

1. Единственный и обязательный параметр: initialState

const [state, setState] = useState(initialState);

Это первый и единственный аргумент, который вы передаете при вызове useState. React использует это значение только во время первого рендера компонента для инициализации переменной состояния.

2. Типы данных для initialState

Начальное состояние может быть представлено в различных формах:

• Примитивы:

  useState(0);          // Число
  useState('');         // Строка
  useState(true);       // Булево значение
  useState(null);       // Null
  useState(undefined);  // Undefined
  

• Объекты и массивы:

  useState({ name: '', age: ApplicationCache 0 }); // Объект
  useState([1, 2, 3]);                  // Массив
  useState([]);                         // Пустой массив
  

• Функция-инициализатор (Lazy initial state):

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

```javascript
// ПЛОХО: Дорогое вычисление выполняется при каждом рендере
const [data, setData] = useState(expensiveCalculation());

// ХОРОШО: Функция выполнится ТОЛЬКО один раз при первом рендере
const [data, setData] = useState(() => expensiveCalculation());
```

    Функция должна быть **чистой** (не иметь побочных эффектов) и **не принимать аргументов**. React вызовет ее один раз при монтировании компонента и использует возвращаемое значение как `initialState`.

    **Пример:**

```javascript
const HeavyComponent = () => {
  // `initHeavyState` будет вызвана только при создании компонента
  const [state, setState] = useState(() => {
    console.log('Выполняю тяжелое вычисление...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) result += i;
    return result;
  });

  return <div>Значение: {state}</div>;
};
```

3. Что возвращает useState?

Хук возвращает массив из двух элементов, который мы обычно деструктурируем:

1. Текущее значение состояния (state).
2. Функция для его обновления (setState или setter).

Важно помнить, что setState не изменяет текущее состояние немедленно, а планирует обновление и перерендер компонента.

4. Практические примеры и нюансы

Пример с ленивой инициализацией (функцией)

Допустим, начальное состояние читается из localStorage — это операция ввода-вывода, которую не нужно повторять.

function MyComponent() {
  const [user, setUser] = useState(() => {
    // Этот код запустится лишь однажды
    const savedUser = localStorage.getItem('appUser');
    return savedUser ? JSON.parse(savedUser) : { name: 'Гость' };
  });

  // ... остальной код
}

Нюанс с объектами и массивами

useState не выполняет "глубокого" сравнения или слияния. Обновляя объект, вы должны предоставить полный новый объект.

const [form, setForm] = useState({ name: '', email: '' });

// ПЛОХО: состояние не обновится (мутация текущего объекта)
form.name = 'Иван';
setForm(form);

// ХОРОШО: создаем и передаем новый объект
setForm(prevForm => ({ ...prevForm, name: 'Иван' }));

Ключевые выводы

• Параметр один: initialState.
• Тип параметра: любое значение или функция.
• Функция как параметр — это оптимизация для отложенных вычислений, а не способ получить доступ к предыдущему состоянию.
• Поведение при последующих рендерах: после первого рендера переданный аргумент игнорируется. Хук возвращает актуальное значение из памяти компонента.
• Важность неизменяемости: при обновлении состояния, особенно объектов и массивов, всегда создавайте новые ссылки.

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