Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrade Client to React 18

See original GitHub issue

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:

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 />)

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

Samridhi-98commented, Dec 23, 2022

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

4upzcommented, Dec 22, 2022

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Upgrade to React 18
How to Upgrade to React 18 · Installing · Updates to Client Rendering APIs · Updates to Server Rendering APIs · Updates to...
Read more >
How to Upgrade to React 18 - How-To Geek
React 18 is stable and ready to use. In most cases the upgrade process should be quick and easy, requiring only an npm...
Read more >
React 18 Upgrade Guide and New Features - Refine Dev
React 18 was released! Are you looking to upgrade to React 18? Learn about the new features and changes in this comprehensive guide....
Read more >
Upgrading to React 18 - Daily Dev Tips
This will upgrade your react and react-dom versions to at least 18. ... Now that we upgraded React itself to version 18 let's...
Read more >
An Ultimate Guide to Upgrading to React 18 - OpenReplay Blog
How to upgrade your React app to take advantage of new features.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found