В чем разница между Context и props в React

«В чем разница между Context и props в React» — вопрос из категории React, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Context и props в React служат для передачи данных, но делают это по-разному.

Props:

  • Передаются явно от родителя к ребенку через атрибуты
  • Работают только вниз по дереву компонентов
  • Лучше для локальной передачи данных
<ChildComponent data={someData} />

Context:

  • Позволяет передавать данные через дерево без явной передачи props
  • Доступен всем потомкам Provider'а независимо от глубины
  • Лучше для глобальных данных (тема, авторизация)
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Основное отличие: props требуют явной передачи через каждый уровень, а Context позволяет "пропускать" промежуточные компоненты. Context следует использовать умеренно, так как он усложняет переиспользование компонентов.