π§(frontend) migrate to react-query v4 & react 18 #1812
Conversation
jbpenrath
changed the title
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
2 times, most recently
from
a786d0e
to
a0bc91c
Compare
|
BUG:
|
|
BUG: Steps to reproduce
NoteThis bug has been reported before the upgrade by @NamFra, but I have never be able to reproduce it. |
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
8 times, most recently
from
75c0da8
to
a8bdb89
Compare
| @@ -1,4 +1,4 @@ | |||
| import { FC, useMemo } from 'react'; | |||
There was a problem hiding this comment.
Just a global remark. When you import a type try to prefix it with type. It can help to speed up build by ignoring all types import.
| import { FC, useMemo } from 'react'; | |
| import { type PropsWithChildren, useMemo } from 'react'; |
There was a problem hiding this comment.
As PropsWithChildren is already exported as a type isn't it unuseful ?
There was a problem hiding this comment.
As I read in this article https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb it says: Note that you can also use βexport typeβ to indicate that some export will only ever be used as a type annotation/declaration.
But indeed if you have "official" documentation resources for this particular point I will be really interested π
There was a problem hiding this comment.
Even https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export states This feature is something most users may never have to think about; however, if youβve hit issues under [isolatedModules](https://www.typescriptlang.org/tsconfig#isolatedModules), TypeScriptβs transpileModule API, or Babel, this feature might be relevant. so do we really need to put import type ?
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
from
a8bdb89
to
1e12ea1
Compare
update all required dependencies to support react 18.
react 18 forces to explicitly name the `children` attribute so let's update components and hooks.
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
from
165d6e2
to
cbbfc22
Compare
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
from
4eb9dc7
to
5eb4d51
Compare
most of the tests broke due to the changes induced by the new rendering behavior of react 18 and react-query v4, so we changed the approach that we had with tests to an approach more based on `waitFor` in order to have tests the most render-agnostic as possible.
This bug was occuring when clicking on the button "Login to purchase" causing a removal of existing react-query queries. This was caused by premature removal of the pending useCourse query which was never notified that it had been removed during its loading, resulting in an infinite loading state.
NathanVss
force-pushed
the
deps/migrate-to-react-18
branch
from
5eb4d51
to
6655ab7
Compare
Purpose
Until now, we cannot upgrade to React 18 due to an incompatibility with react-query v3. React query v4 has been released and add the support of React 18 that's mean we are now able to migrate our frontend codebase to React 18 ! π
Proposal
createTestQueryClientWarning: ReactDOM.render is no longer supported in React 18is not problematic, please read Add support for React 18Β storybookjs/storybook#17831 (comment)β Failed tests
Never surrender.
26/10 53 failed, 303 passed,
28/10 π© 24 failed, 332 passed
31/10 β οΈ 18 failed, 338 passed
-> 03/10 All tests are fixed π