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

override context are unnecessary.js

// BAD
const LocaleContext = React.createContext();
const OverrideLocaleContext = React.createContext()

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

const Navigation = () => {
  return <OverrideLocaleContext.Provider value="french">
    <Link href="/href">About</Link>
  </OverrideLocaleContext.Provider>;
};

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

  
// GOOD
const LocaleContext = React.createContext();

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

const Navigation = () => {
  return <LocaleContext.Provider value="french">
    <Link href="/href">About</Link>
  </LocaleContext.Provider>;
};

const Link = ({ href, children }) => {
  // uses closest Provider value, which is french
  const locale = useContext(LocaleContext);
  return <a href={href}>{translate(locale, children)}</a>;
};