Learn advanced topics of React for building dynamic user interfaces with reusable components, allowing for efficient updates and rendering.

Zero to Hero in Front-end Development with React

React is one of the front-end frameworks of JavaScript. This module starts with the Context API, refs, error boundaries, portals, and code splitting. Next, we will learn about hooks, Redux and routing, and internationalization. After completing this module, we will be able to use React professionally.

React Deep Dive: Advanced Approaches

## Hooks in `withTranslation()`

The use of the `withTranslation()` HOC is not constrained to **class components** but can also be used in **function components**. However, using the `useTranslation()` Hook often simplifies the component and makes it much more readable. The Hook can be imported similarly to the HOC:
```js
import { useTranslation } from 'react-i18next';
```

The `useTranslation()` **Hook** allows us to extract the `t` and `i18n` properties by using **destructuring assignment** from ES2015+:
```js
const Greeting = () => {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <p>{t('greeting')}</p>
      <button onClick={() => i18n.changeLanguage('de')}>de</button>
      <button onClick={() => i18n.changeLanguage('en')}>en</button>
    </div>
  );
};
```

As was already the case in the `withTranslation()` HOC, `t` refers to the function that allows us to display translations based on their **translation key**. `i18n` refers to the respective `i18next` instance. The `useTranslation()` Hook offers the same set of functionality as the `withTranslation()` HOC, but the ‘useTranslation()` is much more explicit and thus more readable. In order to use different **namespaces**, we can pass a string or an array of strings containing the namespaces to the Hook:
```js
const { t } = useTranslation('namespace');
const { t } = useTranslation(['namespace1', 'namespace2']);
```

If no namespace has been provided, the default settings will be used.

Run the code snippet below to visualize all these functionalities interactively:

# Hooks in `withTranslation()`

The use of the `withTranslation()` HOC is not constrained to **class components** but can also be used in **function components**. However, using the `useTranslation()` Hook often simplifies the component and makes it much more readable. The Hook can be imported similarly to the HOC:
```js
import { useTranslation } from 'react-i18next';
```

The `useTranslation()` **Hook** allows us to extract the `t` and `i18n` properties by using **destructuring assignment** from ES2015+:
```js
const Greeting = () => {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <p>{t('greeting')}</p>
      <button onClick={() => i18n.changeLanguage('de')}>de</button>
      <button onClick={() => i18n.changeLanguage('en')}>en</button>
    </div>
  );
};
```

As was already the case in the `withTranslation()` HOC, `t` refers to the function that allows us to display translations based on their **translation key**. `i18n` refers to the respective `i18next` instance. The `useTranslation()` Hook offers the same set of functionality as the `withTranslation()` HOC, but the ‘useTranslation()` is much more explicit and thus more readable. In order to use different **namespaces**, we can pass a string or an array of strings containing the namespaces to the Hook:
```js
const { t } = useTranslation('namespace');
const { t } = useTranslation(['namespace1', 'namespace2']);
```

If no namespace has been provided, the default settings will be used.

Run the code snippet below to visualize all these functionalities interactively:

Learn how to access the translation function or i18n instance inside function components.

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Appendix

Conclusion

useTranslation() Hook

Hooks in `withTranslation()`