Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to React 18 #2087

Merged

Conversation

ThomasRoest
Copy link
Collaborator

@ThomasRoest ThomasRoest commented Dec 13, 2022

Upgrading to React 18

  • replacing deprecated api's incl. ReactDOM.render()

@codecov
Copy link

codecov bot commented Dec 13, 2022

Codecov Report

Merging #2087 (8dccb8c) into master (2ba612a) will decrease coverage by 0.05%.
The diff coverage is 91.66%.

❗ Current head 8dccb8c differs from pull request most recent head 720d938. Consider uploading reports for the commit 720d938 to get more accurate results

Additional details and impacted files
Impacted Files Coverage Δ
src/client/rsg-components/Code/CodeRenderer.tsx 100.00% <ø> (ø)
...lient/rsg-components/Examples/ExamplesRenderer.tsx 100.00% <ø> (ø)
src/client/rsg-components/Link/LinkRenderer.tsx 100.00% <ø> (ø)
...ponents/Markdown/Blockquote/BlockquoteRenderer.tsx 100.00% <ø> (ø)
...sg-components/Markdown/Details/DetailsRenderer.tsx 100.00% <ø> (ø)
...onents/Markdown/Details/DetailsSummaryRenderer.tsx 100.00% <ø> (ø)
...ient/rsg-components/Markdown/List/ListRenderer.tsx 100.00% <ø> (ø)
src/client/rsg-components/Markdown/Markdown.tsx 90.90% <ø> (ø)
...rkdown/MarkdownHeading/MarkdownHeadingRenderer.tsx 100.00% <ø> (ø)
...client/rsg-components/Markdown/Pre/PreRenderer.tsx 100.00% <ø> (ø)
... and 29 more

@premsai2030
Copy link

May i know what is the node js version you are using ?

Thomas Roest added 7 commits February 9, 2023 11:31
propTypes.node results in TS errors. There doesn't seem to be a good alternative ( other than making the children propTypes more strict, which could result more errors)
Instead use something less restrictive (propTypes.any) for children and components.
Unmount asynchronously with setTimout
https://stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root

error message:
Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
@ThomasRoest ThomasRoest marked this pull request as ready for review February 10, 2023 14:46
@ThomasRoest ThomasRoest changed the base branch from master to React-18 February 10, 2023 14:49
@ThomasRoest ThomasRoest merged commit 9c71b08 into styleguidist:React-18 Feb 10, 2023
ThomasRoest added a commit that referenced this pull request Feb 10, 2023
Upgrade to React 18

* replace ReactDOM.render with createRoot in index.ts
* fix new TS errors after upgrading @types
* replace ReactDOM.render in Preview.tsx
* replace ReactDOM.unmountComponentAtNode with root.unmount()
* remove ReactDOM import
* upgrade react testing library
* replace deprecated React.SFC type with React.FC

DefinitelyTyped/DefinitelyTyped#30364

* Fix TS errors in propTypes.children

propTypes.node results in TS errors. There doesn't seem to be a good alternative ( other than making the children propTypes more strict, which could result more errors)
Instead use something less restrictive (propTypes.any) for children and components.

* fix TS errors, extract props interfaces with children
* fix TS errors, add context types
* TS fix
* Fix React unmount error

Unmount asynchronously with setTimout
https://stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root

error message:
Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

* make wrapper unmount test async

---------

Co-authored-by: Thomas Roest <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants