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 initial slider render #713

Merged
merged 2 commits into from
Apr 17, 2019
Merged

Fix initial slider render #713

merged 2 commits into from
Apr 17, 2019

Conversation

trvrb
Copy link
Member

@trvrb trvrb commented Apr 16, 2019

There had been a persistent bug in which handles on the date slider don't appear in their proper locations on initial page load, ie:

Screen Shot 2019-04-16 at 8 53 40 AM

I tracked this issue down to a side effect of their being two initial renders of the Slider component. The second caused by Slider updating its internal state when it profiles how wide its container is. The first render had offset (which determines handle placement) set to [0,0] while the second render has offset set properly. This should have been okay, however, for some reason, React's reconciliation wasn't updating the DOM properly upon second render.

I first tried to fix the reconciliation angle, but couldn't sort it out. This PR removes _handleResize method and instead fixes pixel dimensions on initial load. This should always be okay for us, as Slider is never resized responsively. This has the side effect of removing unnecessary rerenders of Slider during app use.

I also took this opportunity to lint Slider.js to modernize it to ES6 standards.

This was caused by the _handleResize method updating internal component state causing a rerender. This rerender wasn't being picked up by React reconciliation properly (I couldn't figure out why). The slider never needs to adjust responsively, and having this responsive adjustment was triggering unnecessary component rerenders during app use. Here, I removed _handleResize and manually set slider width parameters.
@jameshadfield
Copy link
Member

Looks great and works well for me - really nice to get rid of this bug too, once you notice it it seems to always appear!

In the future one could convert this to a react class (or functional component with hooks) and get rid of create-react-class (about 7kb gzipped), but as you point out it may take a bit of debugging to get the binds working correctly.

@jameshadfield jameshadfield merged commit 06fe3a4 into master Apr 17, 2019
@jameshadfield jameshadfield deleted the fix-initial-slider-render branch April 17, 2019 13:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants