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

Короткий ответ

Props (properties) - это внешние данные, которые передаются компоненту от родителя и не могут быть изменены внутри компонента. State - это внутреннее состояние компонента, которое управляется им самим и может изменяться с помощью setState или хука useState. Основное различие: props неизменяемы для компонента-получателя, а state динамичен и контролируется компонентом.

Подробное объяснение

Props и state - два фундаментальных механизма управления данными в React, но они служат разным целям.

Props (сокращение от properties) - это способ передачи данных от родительского компонента дочернему. Они доступны только для чтения: компонент не может изменить свои собственные props. Это гарантирует однонаправленный поток данных и предсказуемость приложения. Props могут быть любого типа: строки, числа, объекты, функции, другие React-компоненты.

State - это данные, которые компонент хранит и контролирует самостоятельно. State может изменяться в ответ на действия пользователя, сетевые запросы или другие события. Изменение state вызывает повторный рендер компонента и его дочерних элементов. В классовых компонентах используется this.setState(), в функциональных - хук useState().

Ключевые отличия:

• Источник данных: props приходят извне, state существует внутри компонента
• Изменяемость: props immutable для компонента, state mutable
• Управление: props устанавливаются родителем, state управляется самим компонентом
• Инициализация: props задаются при использовании компонента, state инициализируется внутри

На практике

На практике важно понимать, когда использовать props, а когда state. Props подходят для конфигурации компонента: передача callback-функций, отображение данных, полученных от API. State используется для интерактивности: переключение видимости, формы ввода, анимации, таймеры.

Хорошая практика - поднимать state вверх по иерархии компонентов, когда несколько компонентов нуждаются в одних и тех же данных. Это называется "lifting state up". Также стоит избегать дублирования state: если данные можно вычислить из props или другого state, лучше использовать вычисляемое значение.

Пример кода

JSX
// Компонент, использующий props
function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

// Компонент с state
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Счет: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// Использование: props передаются, state управляется внутри
function App() {
  return (
    <div>
      <Greeting name="Анна" /> {/* props */}
      <Counter /> {/* state */}
    </div>
  );
}

Как отвечать на собеседовании

Начни с четкого определения обоих понятий. Подчеркни ключевое различие: неизменяемость props против изменяемости state. Приведи простой пример из практики: props для отображения данных, state для интерактивных элементов. Упомяни, что props могут быть функциями (callback) для передачи данных обратно родителю. Если спросят про классовые компоненты, добавь, что там используется this.state и this.setState().

Что проверяет интервьюер

Интервьюер оценивает понимание фундаментальных концептов React: однонаправленный поток данных, реактивность, управление состоянием. Важно показать, что ты понимаешь, когда использовать props, а когда state, и как они взаимодействуют. Также проверяется знание принципов иммутабельности и того, как изменения данных влияют на рендер.

Типичные ошибки

• Попытка изменить props напрямую (например, props.name = 'Новое имя')
• Хранение в state данных, которые можно вычислить из props
• Использование state для данных, которые не влияют на рендер
• Забывание, что setState асинхронен (в классовых компонентах)
• Мутация state напрямую вместо использования setState или функции-сеттера из useState