diff --git a/docs/migration/v12.md b/docs/migration/v12.md index d455ff35..96668d6e 100644 --- a/docs/migration/v12.md +++ b/docs/migration/v12.md @@ -79,7 +79,7 @@ Check out the [script docs](../scripts/migrate/js-to-jsx.md) for options, tips, ## React 18 -In terms of the React 18-related changes, upgrading to `@dhis2/cli-app-scripts` version 12 should generally a smooth process for the consuming apps. Most of the [changes](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) shouldn't affect most apps. +With this update we also upgraded from React 16 to React 18. Upgrading to `@dhis2/cli-app-scripts` version 12 should generally a smooth process for the consuming apps. Most of the [changes](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) shouldn't affect most apps. ### Default props @@ -87,7 +87,8 @@ The main change in React 18 that is expected to affect apps at runtime is that u The fix is to move prop defaults -- either to default parameters for functional components, or to a static property for class components. This code mod can help with the migration, and was used for the `@dhis2/ui` library: [transform.js](https://gist.github.com/kabaros/45ed16660ac89dc48d22e03836b1e981) -**NB!** Note that default params for functional components are computed on each render, so default values like arrays and objects as defaults may unintentionally retrigger `useEffect` and `useMemo` functions on each render. Instead, use a stable reference like so: +:::info Note +Default params for functional components are computed on each render, so default values like arrays and objects as defaults may unintentionally retrigger `useEffect` and `useMemo` functions on each render. Instead, use a stable reference like so: ```js const arr = [] @@ -95,6 +96,7 @@ const MyComponent = ({ options = arr }) => { /* ... */ } ``` +::: ### Tests @@ -160,7 +162,11 @@ Here are some examples that illustrate the changes: ##### `renderHook` -`renderHook` is not a separate library anymore; it is part of the `@testing-library/react`, and it has [quite a different API](https://testing-library.com/docs/react-testing-library/api/#renderhook). (NB: Some docs online still point to the old version, which can be confusing.) +`renderHook` is not a separate library anymore; it is part of the `@testing-library/react`, and it has [quite a different API](https://testing-library.com/docs/react-testing-library/api/#renderhook). + +:::warning Note +Some docs online still point to the old version, which can be confusing. +::: - Use `import { renderHook } from '@testing-library/react'` instead of `import { renderHook } from '@testing-library/react-hooks` - The [return type](https://testing-library.com/docs/react-testing-library/api/#renderhook-result) for renderHook is different. One major difference is the absence of `waitForNextUpdate` returned from `renderHook`. Now it can be replaced with the `waitFor` from `@testing-library`, and adding an expectation to wait for, for example. @@ -282,7 +288,9 @@ describe('', () => { Enzyme is [considered dead](https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl): there is no official adapter for React 18 (or 17), so it's best to [migrate to React Testing Library](https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/) for tests, if possible. -If it's not currently possible to migrate, there is an [unofficial React 18 adapter](https://github.com/cfaester/enzyme-adapter-react-18) that can help in the mean time. +:::tip +If it's not currently possible to migrate, there is an [unofficial React 18 adapter](https://github.com/cfaester/enzyme-adapter-react-18) that can help in the mean time. However, it is highly recommended this is a temporary solution and you should still schedule migrating away from Enzyme. +::: ## Environment variables