Что такое props и state в React и в чем их разница?

Что проверяют

Понимаете ли вы направление потока данных и знаете ли типовую ошибку с копированием.

Как отвечать

Пропсы это данные, приходящие снаружи, от родителя. Для компонента они только для чтения: изменить их он не может и не должен.

Состояние это данные, которыми компонент владеет сам. Оно изменяемо, живёт между рендерами, и его изменение вызывает повторный рендер.

Различия по свойствам:

• источник: родитель против самого компонента;
• изменяемость: неизменяемы против изменяемого;
• кто обновляет: родитель против самого компонента;
• при изменении: рендерится вся ветка от родителя против рендера этого компонента.

Общий принцип: данные идут вниз, события вверх. Компонент получает данные пропсами, а чтобы что-то изменить у родителя, вызывает переданную функцию. Это и называется однонаправленным потоком, и именно он делает отладку предсказуемой: источник изменения всегда известен.

Когда данные нужны двум соседним компонентам, состояние поднимают к их общему предку и раздают вниз пропсами.

Главная ошибка, которую и хотят услышать: копирование пропса в состояние.

const [value, setValue] = useState(props.value);   // застынет

Начальное значение используется только при первом рендере, поэтому при изменении пропса состояние не обновится, и на экране останется устаревшее. Правильные варианты: использовать проп напрямую, а если внутреннее состояние действительно нужно, сбрасывать компонент сменой ключа.

Ещё одно правило: производные данные не хранят в состоянии, а вычисляют при рендере. Иначе появляется вторая копия правды, которую надо синхронизировать.

Где спотыкаются

Копируют пропсы в состояние и получают застывшие данные.

Мутируют пропсы напрямую.

Хранят в состоянии то, что выводится из других значений.

Поднимают состояние в корень, хотя оно нужно двум соседям.