What is the purpose of useContext?

Pozwala udostępnić dane komponentom głęboko w drzewie bez ręcznego przekazywania propsów przez każdy poziom.

Problem:

App
↓ user
Layout
↓ user
Page
↓ user
Header
↓ user
UserMenu

To prop drilling.

Context pozwala pominąć pośrednie komponenty.

Typowe zastosowania:

• theme,
• zalogowany użytkownik,
• language,
• permissions,
• konfiguracja.

I bardzo ważny praktyczny przykład: biblioteki też korzystają z Context API.

Material UI:

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Komponenty MUI niżej odczytują theme bez ręcznego przekazywania propsów.

React Hook Form:

<FormProvider {...methods}>
  <Form />
</FormProvider>

a później:

const methods =
  useFormContext();

To bardzo dobry przykład na rozmowie, bo pokazuje realne użycie Contextu w bibliotekach.