https://blog.battlefy.com/how-to-escape-react-hooks-hell-a66c0d142c9e context over prop drilling

useContext over prop drilling.js

// BEFORE
const App = () => {
  const [locale, setLocale] = useState('english');
  return <Navigation locale={locale} />;
};

const Navigation = ({ locale }) => {
  return <Link locale={locale} href="/about">About</Link>;
};

const Link = ({ locale, href, children }) => {
  return <a href={href}>{translate(locale, children)}</a>;
};
  
// AFTER
const LocaleContext = React.createContext();
const App = () => {
  const [locale, setLocale] = useState('english');
  return <LocaleContext.Provider value={locale}>
    <Navigation />
  </LocaleContext.Provider>;
};

const Navigation = () => {
  return <Link href="/about">About</Link>;
};

const Link = ({ href, children }) => {
  const locale = useContext(LocaleContext);
  return <a href={href}>{translate(locale, children)}</a>;
};