Реализуйте способ передать данные в дочерний компонент без prop drilling, используя render props или React Context.

Поместите данные в Context Provider над нужным поддеревом, а дочерний компонент прочитает их через useContext.

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

Что ответить на собеседовании

Поместите данные в Context Provider над нужным поддеревом, а дочерний компонент прочитает их через useContext.

Подробный разбор

Ответ с пояснениями

Поместите данные в Context Provider над нужным поддеревом, а дочерний компонент прочитает их через useContext.

Минимальный пример не требует передачи user через каждый промежуточный компонент.

import { createContext, useContext } from 'react';
const UserContext = createContext(null);
function UserName() {
  const user = useContext(UserContext);
  return <span>{user?.name ?? 'Гость'}</span>;
}
function Layout() { return <main><UserName /></main>; }
function App({ user }) {
  return <UserContext.Provider value={user}><Layout /></UserContext.Provider>;
}

Изменение значения контекста обновляет его потребителей. Для часто меняющихся независимых данных лучше разделять контексты, а не создавать один глобальный контейнер.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее