influxdata / influxdata/ui

FluxMonacoEditor re-renders on every keystroke

Open
#6,303 1 comment 0 reactions 0 assignees View on GitHub
kind/bug team/automation
Dominant language
TypeScript
Stars
117
Forks
51
Avg merge
2d 15h
Merged PRs (30d)
4

Description

Here's a scenario: when going to the data explorer and opening the script editor, that editor component, `FluxEditorMonaco` (to be renamed in #6302), re-renders 2-3 times before a single keystroke is entered. After that, it is re-rendered every single keystroke. See the below video with the `console.log` indicating each render[1].

https://user-images.githubusercontent.com/60306/200944936-404656ea-9c0e-4b5d-832b-5d6311bbc5a0.mov

Not sure why it got quite slow there, but it's likely these two things are related. As demonstrated, every keystroke forces a re-render, which amounts to re-creating the component.

_But wait!_, you might say. _We're using `useMemo`, so that shouldn't affect the re-render_. That's sort of true, in that the value is memo-ized, in most cases a full re-paint isn't done (though not all the time; I can't find a reason for it though), but the event chain that causes this is the real issue[2]. The monaco editor is heavy-weight enough that we can't afford to fly this close to the proverbial user-noticeable performance degradation.

When digging in, it appears that the `variables` prop is changing every keystroke, but the value of `variables` is the same each time it's triggered. There are some other awkward places where this is triggering, but the first thing to take a swing at is the `useEffect(()=>{}, [variables])` and its event chain, which is the most chatty.

DOD:
- `FluxMonacoEditor` does not re-render every keystroke
- `FluxMonacoEditor`'s various state changes

[1] This can be done much better using the React DevTools profiler, which I've done, but it doesn't make for a good screencast, due to small mouseover interactions and small text.
[2] Removing `useMemo` has no noticeable affect in performance, even in the React DevTools profiler. It's possibly a pre-mature optimization?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the FluxMonacoEditor component, particularly the useEffect dependency on variables and the event chain it triggers. Use the React DevTools profiler to confirm which state or prop changes cause renders on each keystroke. Done means the editor no longer re-renders on every keystroke and its state changes continue to work correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.