Что хотят услышать интервьюеры:

В React данные обычно передаются сверху вниз через props. Для связи между несвязанными компонентами используют поднятие состояния, контекст или внешние хранилища. Если нужно сообщить данные от дочернего компонента к родительскому, обычно передают callback-функцию.

Определение:

Передача данных между компонентами в React — это обмен значениями, состоянием и событиями через встроенные механизмы фреймворка. Основной подход — однонаправленный поток данных: родитель передаёт данные дочернему через props. Когда компонентам нужно совместно использовать состояние, применяют подъем состояния вверх, Context API или сторонние state management решения.

Пример использования:

Ниже пример передачи данных от родителя к ребёнку через props и обратной передачи события через callback:

import React, { useState } from "react";

function Child({ message, onChangeMessage }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onChangeMessage("Новый текст от дочернего компонента")}>
        Изменить сообщение
      </button>
    </div>
  );
}

export default function Parent() {
  const [message, setMessage] = useState("Привет из родителя");

  return <Child message={message} onChangeMessage={setMessage} />;
}

Пояснение кода:

Parent хранит состояние message.
Это состояние передаётся в Child через prop message.
Функция setMessage передаётся как onChangeMessage.
Когда пользователь нажимает кнопку, Child вызывает callback и меняет состояние в родителе.
В результате React перерисовывает оба компонента с актуальными данными.

Ключевые моменты:

Основной принцип React — данные идут сверху вниз, от родителя к ребёнку.
Для передачи данных от ребёнка к родителю используют callback-функции.
Для обмена данными между удалёнными компонентами часто поднимают состояние вверх.
Для глобально доступных данных подходит Context API.
Для сложного общего состояния обычно используют внешние хранилища, например Redux или аналогичные решения.

Каким образом осуществляется передача данных между компонентами в React?