edmundoa
commented
4 years ago I was testing in the Create Event Definitions page and there are a couple things that caught my attention:
- Typing a letter in the
titleinput rendered that input twice. This could probably be improved, but it's expected for thetitle, since components higher in the hierarchy use thetitleto update the page header with the current value. - Buttons on the page are also rendered twice per update. This is more surprising and seems to be taking longer to re-render
- Almost 3/4 of the render time for Buttons is taking by two calls to
forwardRef
- Looking at the
Buttoncode and playing with it a bit, it seems that generating the styled components is taking most of the time. We wrap that code in auseCallbackhook which memoizes the function, but not its results, so that function is executed on each render - Exporting the original
react-bootstrapButtoncomponent instead of the styled-component version of it had a big impact on the responsiveness of the page
- Almost 3/4 of the render time for Buttons is taking by two calls to
To me the biggest-impact optimization we can make is to optimize when we call styled and avoid doing it when is not necessary. We can of course also avoid doing some re-renders when are not necessary, but that would need a more fine grained analysis and tuning.
mpfz0r
Expected Behavior
Entering text into a text field inside a wizard component should be fast.
Current Behavior
When editing text in wizard components (e.g. creating content pack, creating event definition) the text is added with a delay. This makes entering text feel very sluggish. If I hold a single key it takes some time until the characters appear.
The delay doesn't show up when creating an AWS input which is also using a wizard component.
This wasn't the case in 3.1.x.
Steps to Reproduce (for bugs)
Your Environment