4 ms·
React Context – Helpful Context Like AdBlock and OS
- shocks 11y agoThe performance of this website seems a little low. I'm noticing a lot of lag when I scroll that I don't notice on other sites... Is it because of the lib?
- delluminatus 11y agoNo (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.
- Hovertruck 11y agoPotentially. This lib is going to call setState on every scroll event, which is triggered multiple times every time you scroll up or down the page. Traditionally you would debounce a scroll handler like this.
- JoshTriplett 11y agoProbably; JavaScript scroll handlers often incur a major performance penalty.
- rpwverheij 11y agothe lib seems very small, and will come in very handy. nice work!
- jastanton 11y agoWait why would you call this `React-Context`? this sounds like it is replacing core functionality when in reality it just adds some useful values inside the existing functionality. To me this is analogous of calling something `react-props` or `react-render` but all those libraries do are add values inside of your props or render but not actually change the behavior of props or render. Does this make sense?
- bstrom 11y agoI agree. The name confused me until I spent more time with the docs than should have been necessary.
- mbrock 11y agoI'm curious if this will work even if components use (e.g.) PureRenderMixin. Because I've been looking for a simple way to "inject" props downstream with pure components.
- carlob 11y agoIt doesn't seem to recognize uBlock on safari.
- casesandberg 11y agoLooking into it now carlob, thanks for the heads up!
- casesandberg 11y agohttps://github.com/casesandberg/react-context/issues/3 https://github.com/casesandberg/react-context/issues/3