

React Context – Helpful Context Like AdBlock and OS - casesandberg
http://casesandberg.github.io/react-context/

======
jastanton
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.

Does this make sense?

~~~
bstrom
I agree. The name confused me until I spent more time with the docs than
should have been necessary.

------
shocks
The 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
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/sr...](https://github.com/casesandberg/react-
context/blob/master/src/context.js#L162)

~~~
seivan
Out of curiosity how did you find that out? I've been looking for a decent
debugging workflow for React.

~~~
delluminatus
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].

[0]: [https://chrome.google.com/webstore/detail/react-developer-
to...](https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

[1]: [https://github.com/casesandberg/react-context/blob/gh-
pages/...](https://github.com/casesandberg/react-context/blob/gh-
pages/docs/components/home/HomeBody.jsx#L96)

~~~
seivan
Thanks. 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.

------
mbrock
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.

------
rpwverheij
the lib seems very small, and will come in very handy. nice work!

------
carlob
It doesn't seem to recognize uBlock on safari.

~~~
casesandberg
[https://github.com/casesandberg/react-
context/issues/3](https://github.com/casesandberg/react-context/issues/3)

