4 ms·
No (edit: kinda). It looks like the site calls setState() on the root React component every time the scroll event is fired. For those not familiar with React,
by delluminatus 11y ago
No (edit: kinda). It looks like the site calls setState() on the root React component every time the scroll event is fired.
For those not familiar with React, setState() is a function that is used to update mutable state, and it is not a very cheap function, because it propagates the state through all child components, re-renders some virtual DOM, and potentially also causes actual DOM reflowing. Calling this in the scroll handler is what causes the noticeable delay.
edit: it seems like the lib itself does also call setState on scroll [0]. I don't think this is the source of the issue on the site itself, which has additional scroll handlers (for the magic non-scrolling sidebar), but it could cause similar performance problems, depending on how many child components are in your Context.
[0]: https://github.com/casesandberg/react-context/blob/master/src/context.js#L162 https://github.com/casesandberg/react-context/blob/master/sr...
- seivan 11y agoOut of curiosity how did you find that out? I've been looking for a decent debugging workflow for React.
- delluminatus 11y agoSorry to say, it's nothing React-specific. I understand that there is a React Developer Tools addon for Chrome that might be of interest [0]. As for me, I just turned on Javascript CPU profiling in Firefox Developer Tools, scrolled a bit, and checked what JS calls were causing the slowdown. Because the unminified source for the website is available on Github, you can quickly find and examine the functions' code directly [1]. [0]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en https://chrome.google.com/webstore/detail/react-developer-to... [1]: https://github.com/casesandberg/react-context/blob/gh-pages/docs/components/home/HomeBody.jsx#L96 https://github.com/casesandberg/react-context/blob/gh-pages/...
- seivan 11y agoThanks. I've been spending too much on the Rails and iOS stack that I've lost track on proper front end tools and workflows. Appreciate it.