useState в мобильных приложениях

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

Как работает useState

Функция useState принимает начальное значение и возвращает массив из двух элементов:

текущее значение состояния,
функцию для его обновления.

Пример базового использования:

import { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Счётчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Типичные сценарии использования

Состояние формы

Поля ввода часто связаны с состоянием через useState. При каждом изменении текста состояние обновляется:

const [email, setEmail] = useState('');

// ...
<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="Введите email"
/>

Флаги загрузки и видимости

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

const [isLoading, setIsLoading] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);

Списки данных

Если нужно отобразить динамический список (например, заметки или комментарии), его можно хранить в состоянии:

const [items, setItems] = useState<string[]>([]);

// Добавление элемента
const addItem = (text: string) => {
  setItems([...items, text]);
};

Важно помнить: при обновлении объектов или массивов в состоянии всегда создаётся новый экземпляр (например, с помощью оператора расширения ...), чтобы React мог корректно определить, что состояние изменилось.

Особенности в мобильной разработке

В React Native поведение useState ничем не отличается от веб-версии React. Однако интерфейсные элементы (вроде TextInput, Switch, Modal) требуют явной привязки к состоянию, так как они не поддерживают двустороннюю привязку «из коробки».

Например, для переключателя (Switch) нужно вручную обрабатывать событие изменения:

const [isEnabled, setIsEnabled] = useState(false);

// ...
<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

Такой подход обеспечивает предсказуемость и контроль над данными в приложении.