Поместите данные в Context Provider над нужным поддеревом, а дочерний компонент прочитает их через useContext.
Реализуйте способ передать данные в дочерний компонент без prop drilling, используя render props или React Context.
Поместите данные в 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>;
}
Изменение значения контекста обновляет его потребителей. Для часто меняющихся независимых данных лучше разделять контексты, а не создавать один глобальный контейнер.