Props и state: данные в React

Props — входные данные компонента (только чтение). State — локальные данные, которые компонент может менять через сеттер. Поток данных однонаправленный: сверху вниз через props.

useState

const [value, setValue] = useState(initial). Не мутируйте объекты/массивы — создавайте новые копии при обновлении.

Подъём состояния

Если двум детям нужны одни данные — храните state в родителе и передавайте вниз. Так проще синхронизировать UI.

Дальше

Побочные эффекты: хуки useState и useEffect.

JavaScript

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      Кликов: {count}
    </button>
  );
}

Практическое задание

Задание: сделайте счётчик и вынесите отображение в дочерний компонент.

State живёт в родителе
Дочерний компонент получает value через props
Кнопка меняет state через колбэк из родителя
Нет прямой мутации count++