To access the current locale in a React app using react-intl, call the useIntl hook in any component rendered below the IntlProvider. The returned intl object exposes the active locale as intl.locale, so there is no need to pass the locale down the component tree yourself.
const intl = useIntl();
const locale = intl.locale; // e.g. "en"
The value comes from the locale prop of the IntlProvider component configured at the top of the component tree, which is also where the messages for that locale are passed in.
<IntlProvider locale={locale} messages={messages}>
<App />
</IntlProvider>
It's important to note that in some React applications, the currently selected locale information may be saved on the server. This means that the fetched user data from the server might include such information.
Published Mar 17, 2023 · Last reviewed Oct 9, 2026 · Markdown version