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

Chore: React update #2256

Closed
Onokaev opened this issue Nov 24, 2022 · 0 comments · Fixed by #2234
Closed

Chore: React update #2256

Onokaev opened this issue Nov 24, 2022 · 0 comments · Fixed by #2234
Assignees
Labels
type:infrastructure Core back-end work which includes quality work, code refactor, tests etc
Milestone

Comments

@Onokaev
Copy link
Contributor

Onokaev commented Nov 24, 2022

React version is currently at 16.14.0. We need to upgrade this to the latest React release (18.2.0)
Benefits from the upgrade

  1. React18 introduced automatic batching. This means that React now batches state updates made within components. This prevents the component from being rerendered inadvertently.
    If you change the state of a component in React 16 twice, the component is rerendered twice. In React18, the two state updates are batched, meaning the component renders only once. This greatly improves the performance of our app which heavily relies on state updates for UI changes.

  2. React18 has more APIs that we can use to further enhance the performance of Graph Explorer. Some of these include:

  • useTransition: Allows us to prioritize state updates. This will help with the slight delay in the textboxes used on Graph Explorer.
  • useInsertionEffect: This hook works like the useEffect hook, but it fires synchronously before all DOM mutations. It will address performance issues associated with injecting styles during render with CSS-in-JS.
  • useDeferredValue: We can use this instead of React.lazy to defer rendering some parts of the component tree (components that a user does not first see when they load Graph Explorer) e.g History tab, Resources tab, Modify Permissions tab etc.
@Onokaev Onokaev added the type:infrastructure Core back-end work which includes quality work, code refactor, tests etc label Nov 24, 2022
@Onokaev Onokaev added this to the November-2022 milestone Nov 24, 2022
@Onokaev Onokaev self-assigned this Nov 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:infrastructure Core back-end work which includes quality work, code refactor, tests etc
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant