Upgrade to react 18 #176
Upgrade to react 18 #176
Conversation
tbragaf
requested review from
joaompneves,
heldergoncalves92,
alvesmiguel1 and
osesantos
There was a problem hiding this comment.
The deprecated APIs should be replaced:
eg: https://react.dev/reference/react-dom/hydrate
| return new Promise<void>(resolve => { | ||
| const root = ReactDOMClient.hydrateRoot(container, children); | ||
| root.render(children); | ||
| resolve(); |
There was a problem hiding this comment.
still trying to figure out how to resolve this promise now
| mounted?.(); | ||
| }, []); | ||
|
|
||
| return isMounted ? <>{children}</> : <></>; |
There was a problem hiding this comment.
Needed this isMounted because I was getting updates after the hydration - which shouldn't happen. The following error was appearing
| await loadScript(externalLibsPath + "react/umd/react.production.min.js", view); /* React */ | ||
| await loadScript(externalLibsPath + "react-dom/umd/react-dom.production.min.js", view); /* ReactDOM */ | ||
|
|
||
| await loadScript(externalLibsPath + "react/umd/react.development.js", view); /* React */ |
| @@ -102,10 +103,12 @@ | |||
|
|
|||
| <ItemGroup> | |||
| <EmbeddedResource Include="node_modules\react\umd\react.production.min.js" /> | |||
| <EmbeddedResource Include="node_modules\react\umd\react.development.js" /> | |||
| @@ -10,6 +10,7 @@ | |||
| <UseWpf>true</UseWpf> | |||
| <TargetsForTfmSpecificBuildOutput>$(TargetsForTfmSpecificBuildOutput);CopyProjectReferencesToPackage</TargetsForTfmSpecificBuildOutput> | |||
| <Configurations>Debug;Release;ReleaseAvalonia;ReleaseWPF</Configurations> | |||
| <EnableWindowsTargeting>true</EnableWindowsTargeting> | |||
| } | ||
|
|
||
| export function ComponentWithMountCallback({ mounted, children }: PropsWithChildren<IComponentWithMountCallbackProps>): JSX.Element | null { | ||
| const [isMounted, setIsMounted] = useState(false); |
There was a problem hiding this comment.
use ref... otherwise this leads to an extra render
There was a problem hiding this comment.
i actually wanted this way because I was getting a crash stating that there was a render after the hydration
this is basically avoiding 1 render to fix that hydration issue - by postponing the render in a way
There was a problem hiding this comment.
i don get it... I stand with my opinion
I still need to run some tests first locally, but this PR serves as a tentative react upgrade