I faced with Invalid hook call on react

Question

Here are my scripts that make a navigator for lingui-js. I faced this error on my local: ×

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See ...react-invalid-hook-call for tips about how to debug and fix this problem.

"react": "^16.8.6", "react-dom": "^16.8.6",

My file:

import * as React from "react";
import { useLingui } from "@lingui/react";

const Navigation = ({ i18n, locales }) => (
  <select selected={i18n.locale}>
    {Object.keys(locales).map(locale => (
      <option key={locale} onClick={() => i18n.activate(locale)} value={locale}>
        {locales[locale]}
      </option>
    ))}
  </select>
);

export default useLingui(Navigation);

Answer 1

Hooks must be used inside of components because of how they are executed by react. They need to store state against a component. You can read more about info how hooks work in this article from Dan Abramov from the React Team.

1. You can either use the hook inside of another component:

const App = props => {
  const { i18n } = useLingui()
  return <Navigation i18n={i18n} {...props} />
}

2. Or you can make your own HOC (Higher Order Component) that you can use like in the code you posted:

const withI18n = WrappedComponent => props => {
  const { i18n } = useLingui()
  return <WrappedComponent i18n={i18n} {...props} />
}

The HOC is used like this:

import * as React from "react";
import { withI18n } from "../withI18n";

const Navigation = ({ i18n, locales }) => (...);

export default withI18n(Navigation);