Опорная идея
Когда двум компонентам нужны одни и те же данные, состояние «поднимают» к их общему родителю, а вниз передают пропсами. Родитель владеет данными, дети — отображают и сообщают об изменениях через функции-колбэки:
function App() { const [count, setCount] = useState(0); return ( <> <Display value={count} /> <Controls onInc={() => setCount(count + 1)} /> </> ); }
function Display({ value }) { return <h1>{value}</h1>; } function Controls({ onInc }) { return <button onClick={onInc}>+1</button>; }
Здесь состояние живёт в App. Display получает значение пропсом, а Controls получает функцию onInc и вызывает её при клике. Так данные текут вниз, а события — вверх через колбэки. Это базовый паттерн обмена данными в React.