javascript icon indicating copy to clipboard operation
javascript copied to clipboard

Bump React to v18 in clerk-js

Open nikosdouvlis opened this issue 3 years ago • 0 comments

Currently, clerkjs bundles its own React dependency and uses its own React instance to render the prebuilt components, even if React is already bundled with the user's app. A required step to support true SSR for clerk-js is to make React a peer dependency, instead of a direct one.

However, that'd make clerkjs use the app's React instance, so we need to make sure that our prebuilt components work properly with the latest React release.

As part of this task, we should:

  • [ ] Update clerkjs to use React18
  • [ ] Build clerkjs. If the build fails, document and try to solve any issues.
  • [ ] Document any type-related issues.
  • [ ] Run the test suite. If it fails, document the cause and try to resolve.
  • [ ] Manually go trough all major auth flows we support, spot any issues and document the actions we need to take.

We expect that React's dev mode idempotency check might cause some of our components to break, especially those that rely on useEffects to start the auth flows (eg: calling signUp.create on render etc.). For more context, see:

  • https://reactjs.org/blog/2022/03/29/react-v18.html#gradually-adopting-concurrent-features
  • https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Please note that this task is not about making clerkjs work inside a React18 app! We've already confirmed that it does work since clerkjs is still using its own React17 instance. The purpose of this task is to help us understand what issues we'd face if we were to drop the direct React dependency.

Making the necessary code changes is not part of this task. Let's create a detailed design doc explaining any issues and possible solutions and then discuss to figure out the next steps :)

nikosdouvlis avatar May 03 '22 16:05 nikosdouvlis