Что такое прямой и косвенный родитель в React в контексте HOC?

В React дерево компонентов строится по тому, как компоненты рендерят друг друга в JSX. Прямой родитель — это тот компонент, внутри render или возвращаемого JSX которого непосредственно находится другой компонент. Косвенный родитель появляется, когда между ними вставляется дополнительный слой, например HOC (Higher-Order Component), который создаёт новый компонент-обёртку.

Как это выглядит на практике

Рассмотрим простой HOC, который добавляет проп theme:

function withTheme(WrappedComponent) {
  return function WithTheme(props) {
    return <WrappedComponent theme="dark" {...props} />;
  };
}

function Button({ theme }) {
  return <button className={theme}>Click</button>;
}

const ThemedButton = withTheme(Button);

function App() {
  return <ThemedButton />;
}

Здесь для Button прямым родителем в дереве React является WithTheme, а App — косвенным родителем, потому что он рендерит ThemedButton, который внутри разворачивается в WithTheme, а тот уже рендерит Button.

Почему это важно

• Ref: ref не передаётся через HOC автоматически, потому что ref — это специальный проп. Если App передаст ref в ThemedButton, он попадёт на WithTheme, а не на Button. Чтобы исправить это, используют React.forwardRef.
• Контекст и владение: косвенный родитель может не знать о внутренней структуре HOC, что усложняет отладку и передачу данных.
• Производительность: лишний слой компонентов может вызывать дополнительные ререндеры, если не использовать React.memo.

Пример с forwardRef

function withTheme(WrappedComponent) {
  const WithTheme = React.forwardRef((props, ref) => (
    <WrappedComponent ref={ref} theme="dark" {...props} />
  ));
  return WithTheme;
}

Теперь ref, переданный из App, дойдёт до Button, несмотря на косвенного родителя WithTheme.

Итог: понимание прямого и косвенного родителя помогает правильно работать с ref, контекстом и оптимизацией в HOC. Применяйте forwardRef и осознанно проектируйте композицию, чтобы избежать неожиданного поведения.