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

Fix performance regression #3458

Merged
merged 1 commit into from
Apr 26, 2024
Merged

Fix performance regression #3458

merged 1 commit into from
Apr 26, 2024

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Apr 26, 2024

Closes #3456

After we removed the app build process, the canvas content and the editor started running in the same React tree. The whole editor rendering now affects the responsiveness of the input components.

This PR keeps the input state local and updates the editor state in a transition to make the rendering of these state updates through the editor interruptible.

The input now renders with higher priority than the rest of the app.

Screen.Recording.2024-04-26.at.15.14.47.mov

We may consider calling startTransition inside of the update method. but I believe there will still be places in the UI where an input depends on it synchronously updating the state. We should eliminate this assumption.

Also removing some dead code

@Janpot Janpot added the core Infrastructure work going on behind the scenes label Apr 26, 2024
@Janpot Janpot marked this pull request as ready for review April 26, 2024 13:23
@Janpot Janpot requested a review from a team April 26, 2024 13:23
@apedroferreira
Copy link
Member

apedroferreira commented Apr 26, 2024

but I believe there will still be places in the UI where an input depends on it synchronously updating the state. We should eliminate this assumption.

Yeah, we have some controlled inputs in the right-side sidebar that are reading the app state to define their value and so they don't perform as well as they could, it's definitely something we should improve.

appDom.setNodeNamespacedProp(draft, node, namespace as any, name, newValue),
);
setPropValue(newValue);
React.startTransition(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of this transition API, we could probably use it more in this type of updates.

Copy link
Member Author

@Janpot Janpot Apr 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally we use it just once in the update method and eliminate all synchronous coupling between app state and its update method in the whole app

@Janpot Janpot merged commit 5f2d14a into mui:master Apr 26, 2024
11 of 12 checks passed
@Janpot Janpot deleted the perf-regression branch April 26, 2024 15:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[studio] Slow UI regression introduced in v0.1.54
2 participants