diff --git a/website/docs/tutorials/react-patterns.md b/website/docs/tutorials/react-patterns.md index a1ab308c9..894ef019a 100644 --- a/website/docs/tutorials/react-patterns.md +++ b/website/docs/tutorials/react-patterns.md @@ -281,7 +281,7 @@ export function Welcome() { ## Server components -Lingui can be easily be used with server components. There are however some considerations to be made so we can make optimal use of server components and it's capabilities. +Lingui can easily be used with server components. There are however some considerations to be made so we can make optimal use of server components and it's capabilities. 1. We want to avoid shipping to much js to the browser if it is not needed 2. We want to be able to use both the `Trans` and `TransNoContext` inside our components. The difference been that `Trans` will be shipped as part of the js bundle and `TransNoContext` not. @@ -344,7 +344,7 @@ export default function I18nProvider({ locale, messages, ...props }) { If we take a closer look at `loadMessages` and `setI18n` function in the layout file. The `loadMessages` function will just return the correct catalog based on the locale. The function `setI18n` is more exotic. This uses a new react feature called [`cache`](https://react.dev/reference/react/cache). The React cache function allows you to memoize the return value of a function, allowing you to call the same function multiple times while only executing it once. This is useful in that we can set an instance of `i18n` for later usage in our nested components. :::note -The file `locales.js` below imports all catalogs so it is important that you don't import this file into a client component otherwise als catalogs will be part of the js bundle. +The file `locales.js` below imports all catalogs so it is important that you don't import this file into a client component otherwise all catalogs will be part of the js bundle. ::: ```jsx