Wait 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.
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.
Sorry 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].
Potentially. 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.
I'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.
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?