React useState & createContext

App.tsx

import React, { useState } from 'react'
const languages = { en: 'en', fr: 'fr' }
const initialTheme = { colour: 'blue', lang: languages.en }
const { Provider, Consumer } = React.createContext(initialTheme)

const App = (): JSX.Element => {
  const [theme, setTheme] = useState(initialTheme)

  const setLanguage = (lang: string): void => {
    setTheme({ ...theme, lang: lang })
  }

  return (
    <Provider value={theme}>
      <button onClick={(): void => setLanguage(languages.en)}>English</button>
      <button onClick={(): void => setLanguage(languages.fr)}>French</button>
      <Menu />
    </Provider>
  )
}

const Menu = (): JSX.Element => <MenuItem/>

const MenuItem = (): JSX.Element =>
  <Consumer>
    { (value): JSX.Element =>
      <p>Locale: {value.lang}</p>
    }
  </Consumer>

export default App