Что можно хранить в Initial Value в UseState?

Что можно хранить в качестве начального значения в useState?

В хуке useState начальное значение (initial value) может быть практически любым типом данных JavaScript. Важно понимать, что это значение устанавливается только при первом рендере компонента и служит исходным состоянием для последующих обновлений. Давайте рассмотрим все возможные варианты.

Основные типы данных для initialValue

1. Примитивные типы (Primitives)

Это самые простые и распространённые варианты:

// Число
const [count, setCount] = useState(0);

// Строка
const [title, setTitle] = useState('Привет, мир!');

// Булево значение
const [isLoading, setIsLoading] = useState(false);

// null
const [data, setData] = useState(null);

// undefined
const [value, setValue] = useState(undefined);

2. Объекты и массивы

Вы можете хранить сложные структуры данных:

// Объект
const [user, setUser] = useState({
  name: 'Иван',
  age: 25,
  email: 'ivan@example.com'
});

// Массив
const [items, setItems] = useState(['яблоко', 'банан', 'апельсин']);

// Массив объектов
const [todos, setTodos] = useState([
  { id: 1, text: 'Изучить React', completed: true },
  { id: 2, text: 'Написать приложение', completed: false }
]);

3. Функции в качестве начального значения

В React есть две важные особенности:

• Ленивая инициализация (lazy initial state) - когда начальное значение вычисляется дорого, можно передать функцию:

// Функция, возвращающая значение
const [state, setState] = useState(() => {
  // Дорогое вычисление, выполняется только один раз
  const initialValue = expensiveCalculation();
  return initialValue;
});

• Функция как само значение состояния (редкий случай, но возможный):

// Функция становится значением состояния
const [callback, setCallback] = useState(() => () => {
  console.log('Я функция в состоянии!');
});

Важные особенности и лучшие практики

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

Если начальное состояние требует сложных вычислений, используйте функцию-инициализатор:

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

// ХОРОШО: Вычисление только при первом рендере
const [data, setData] = useState(() => expensiveOperation());

Особенности обновления объектов и массивов

При работе с объектами и массивами важно помнить о иммутабельности:

const [user, setUser] = useState({ name: 'Иван', age: 30 });

// ПЛОХО: Мутация существующего объекта
user.age = 31; // ❌ Не вызывает повторного рендера

// ХОРОШО: Создание нового объекта
setUser({ ...user, age: 31 }); // ✅ Корректное обновление

Специальные значения

// Map и Set (с осторожностью)
const [mapState, setMapState] = useState(new Map());
const [setState, setSetState] = useState(new Set());

// Дата
const [currentDate, setCurrentDate] = useState(new Date());

// Регулярные выражения
const [regex, setRegex] = useState(/test/gi);

Что НЕ рекомендуется хранить в useState

Хотя технически возможно, эти варианты могут привести к проблемам:

1. Ссылки на DOM-элементы - используйте useRef
2. Экземпляры классов с методами - могут вызвать проблемы с сериализацией
3. Промисы (Promises) - состояние должно быть синхронным
4. Функции, которые меняются при каждом рендере - могут вызвать лишние ререндеры

Практический пример со сложным начальным состоянием

function UserProfile() {
  const [profile, setProfile] = useState(() => {
    // Попытка получить данные из localStorage при инициализации
    const savedProfile = localStorage.getItem('userProfile');
    
    if (savedProfile) {
      return JSON.parse(savedProfile);
    }
    
    // Значение по умолчанию
    return {
      name: '',
      email: '',
      preferences: {
        theme: 'light',
        notifications: true,
        language: 'ru'
      },
      history: []
    };
  });

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

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

1. Тип начального значения определяет тип всего состояния на протяжении жизни компонента
2. Инициализация происходит один раз - при монтировании компонента
3. Ленивая инициализация оптимизирует производительность для дорогих вычислений
4. Иммутабельность критична при работе с объектами и массивами
5. Состояние должно быть сериализуемым для корректной работы DevTools и отладки

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