Состояние и эффекты: useState и useEffect

Хорошая новость: хуки React работают в React Native точно так же — повторяем useState и useEffect на мобильных примерах.

useState хранит изменяемые данные компонента, useEffect запускает побочные эффекты; в RN они работают идентично React.

useState — память компонента

Состояние — это данные, которые могут меняться и при изменении вызывают перерисовку. Меняем число через функцию-сеттер, и экран обновляется сам.

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

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Счёт: {count}</Text>
      <Button title="+1" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Главное правило, как и в React: нельзя менять состояние напрямую (count++). Только через сеттер setCount — иначе React не узнает об изменении и не перерисует экран.

Несколько состояний

Состояний может быть сколько угодно — по одному на каждую независимую часть данных.

import { useState } from "react";

function Form() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [agreed, setAgreed] = useState(false);
  // ... поля формы
}

useEffect — побочные эффекты

useEffect выполняет код «сбоку» от отрисовки: загрузку данных, подписки, таймеры. Массив зависимостей управляет тем, когда эффект запускается.

import { useState, useEffect } from "react";
import { Text } from "react-native";

function Clock() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    // функция очистки: отменяем таймер при размонтировании
    return () => clearInterval(id);
  }, []); // пустой массив — эффект один раз при появлении

  return <Text>Прошло секунд: {seconds}</Text>;
}

Пустой массив зависимостей [] означает «запусти один раз, когда компонент появился». Возврат функции из эффекта — это очистка: здесь мы отменяем таймер, чтобы не было утечки.

Зависимости эффекта

Обновление по предыдущему значению

Когда новое состояние зависит от старого, безопаснее передать функцию. Покажем на чистом JS, как накапливается значение (запускаемый пример):

let state = 0;
function setState(updater) {
  state = updater(state); // как React: получаем предыдущее значение
}

setState((prev) => prev + 1);
setState((prev) => prev + 1);
setState((prev) => prev + 5);

console.log("Итог:", state);

Вывод:

Итог: 7

Итог

• useState хранит данные; менять только через сеттер, иначе не будет перерисовки.
• useEffect запускает побочные эффекты; массив зависимостей задаёт момент запуска.
• Возврат функции из useEffect — очистка (отмена таймеров и подписок).