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

001 locale.js

import {createContext, useContext} from 'react';

const LocaleContext = createContext();

export const ProvideLocale = Locale.Provider;

export const useLocale = () => {
  const locale = useContext(LocaleContext);
  return locale;
};

002 translation.js

import {useMemo} from 'react';
import {useLocale} from './locale';

function translate(locale, englishKey) {..}

export const useTranslation = (englishKey) => {
  const locale = useLocale();
  return useMemo(() => translate(locale, englishKey), [locale, englishKey]);
};

003 component.js

import {useTranslation} from './translation';

export const Link = ({ href, children }) => {
  const translation = useTranslation(children);
  return <a href={href}>{translation}</a>;
};