props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз; ребёнок сообщает об изменениях родителю через колбэки в props. Общее состояние нескольких компонентов поднимают к ближайшему общему предку.
А ещё Копировать props в state — источник рассинхронизации
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Однонаправленный поток делает поведение предсказуемым: источник истины у каждого значения один, и понятно, кто его меняет.
Подъём состояния. Если поле поиска и список результатов должны знать строку запроса, она хранится в общем родителе и передаётся вниз: значение — одному, обработчик изменения — другому.
Что не класть в state: то, что вычисляется из других данных (отфильтрованный список, полное имя), — иначе нужно синхронизировать две копии. Дорогие вычисления — useMemo.
Группировка обновлений. Несколько вызовов setState в одном обработчике дают один рендер; setCount(count + 1) дважды подряд увеличит на 1, а функциональная форма — на 2.
sottofunction Parent() {
const [query, setQuery] = useState("");
return (
<>
<SearchInput value={query} onChange={setQuery} />
<Results query={query} />
</>
);
}
function SearchInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.