We recently updated react-intl from version 2.x to 3.3.2, which meant that we could remove the injectIntl HOC in all files that used any of the format-functions.

Now in v3, we create the intl instance in a separate module and wrap our app in a RawIntlProvider that we provide with this intl object.

Is there any reason to use the useIntl hook provided by react-intl instead of just importing the intl object straight from our created module?

// useIntl hook
const Component = () => {
  const intl = useIntl();
  intl.formatMessage({});
};

//How we use it atm.
import intl from 'utils/intl';
const Component = () => {
  intl.formatMessage({});
};

We recently updated react-intl from version 2.x to 3.3.2, which meant that we could remove the injectIntl HOC in all files that used any of the format-functions.

Now in v3, we create the intl instance in a separate module and wrap our app in a RawIntlProvider that we provide with this intl object.

Is there any reason to use the useIntl hook provided by react-intl instead of just importing the intl object straight from our created module?

// useIntl hook
const Component = () => {
  const intl = useIntl();
  intl.formatMessage({});
};

//How we use it atm.
import intl from 'utils/intl';
const Component = () => {
  intl.formatMessage({});
};

• javascript
• reactjs
• typescript
• react-intl

1 Answer 1

If we read the documentation react-intl, only benefit of using it by importing is when you want to customized the hooks. Otherwise the way you are using it I don't see any problems.