Upgrade Client to React 18

Feature Suggestion

Is your feature request related to a problem? Please describe. React 18 has released and it contains a plethora of enhancements that could be valuable to bring to our client, with the most notable being: concurrent rendering and automatic batching for state updates. These improvements could bring immediate performance enhancements to our client app by reducing unnecessary re-renders and allowing for other performance enhancements through the new hooks that are available.

Scope Updating to React 18 is a surprisingly quick task , as you just have to run the yarn up command for react and react-dom, then change the index.tsx file to use the new rendering API. Any additional features are optional and can be implemented on an as-needed basis.

Additional context Updating to React 18 does have a slight styling affect on the dashboard has Material UI has yet to release an update to make it fully compatible. We’ll have to wait for them to do a new release to make it compatible with React 18’s changes. Their roadmap and milestone tracker can be viewed here: https://github.com/mui/material-ui/milestone/45

Before Implementation

• Use React Devtools’ Profiler to measure performance improvements of state batching. A good example would be to record the render time after selecting/deselecting one of the filters.
• Take screenshot comparisons of React 18 vs React 17 improvements and add to this issue
• Confirm that MUI is compatible and upgrade to new mui-core package with the React 18 changes

Possible Implementation

• Run yarn up react react-dom to update to the latest version of React
• In the client package, make the following change to the root index.tsx file:

- import React from 'react'
- import ReactDOM from 'react-dom'
+ import { createRoot } from 'react-dom/client'
import { Root } from './Root'

- ReactDOM.render(<Root />, document.getElementById('root'))

+ const container = document.getElementById('root')
+ const root = createRoot(container)
+ root.render(<Root />)

[Samridhi-98]

I didn’t update any material ui packages yet, I’ll try that.

[4upz]

@Samridhi-98 Ahhh those don’t seem to be Talisman. Those are the integration tests that are failing and seem to be halting your pre-commit. It may be due to some of the client changes you’ve had to make. For now, I think it’s fine to ignore them and we can make a separate issue to fix them. You can add the --no-verify flag to your commit command so that it skips the pre-commit checks. Just make sure that all of the other tests, specifically the unit tests are passing before you do.