useContext

useContext jest prostym, ale potężnym i przydatnym mechanizmem - pozwala on komponentom opartym o funkcje na dostęp do kontekstu, bez konieczności implementacji wzorca Render Props i owijania komponentów w Consumer. Dodatkowo, w odróżnieniu od contextType komponent może korzystać z wielu kontekstów.

Hook ten musimy zainicjować z kontekstem - nie z Provider czy Consumer, ale całym obiektem, uzyskanym z React.createContext.

Powróćmy zatem do naszego przykładu użycia kontekstu i zamieńmy komponenty tłumaczenia na używający useContext:

import React, { useContext } from "react";

import Context from "./TranslationContext";

export default props => {
  const translationContext = useContext(Context);
  return translationContext.labels[props.label];
};

Kompletny przykład