Introduction to Context API

The same prop travels through the four components below, and only the last one uses it.

import { View, Text } from 'react-native';

function Greeting({ user }) {
  return <Text>Hello, {user.name}</Text>;
}

function Header({ user }) {
  return <View><Greeting user={user} /></View>;
}

function HomeScreen({ user }) {
  return <View><Header user={user} /></View>;
}

export default function App() {
  return <HomeScreen user={{ name: 'Aisha' }} />;
}

Hello, Aisha

The screen shows the right text, but the code has a cost. HomeScreen and Header never read `user