FluxMonacoEditor re-renders on every keystroke
- 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