need to make sure state updates only affect correct components

[bcolloran]

in React DevTools, if you enable "highlight updates" and take just any notebook action, you'll see that virtually every component in the notebook rerenders (see https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation and https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833 for the React DevTools feature)

(importantly, react devtools only connects to the top level of a page, but not iframes :-/ . to work around that, we may need something like this: https://github.com/eddyerburgh/react-dev-tools-iframe-webpack-plugin . I suspect that all the little components in the console are re-rendering at every state update, which adds up to kill perf once a lot of them are present)

I believe that this heap of needless re-renders kill our perf, especially in when evaling a bunch of chunks quickly (e.g. via run all).

leading recommended techniques for fixing this include using reselect to memoize props in mapStateToProps, but there is a ton of other good stuff here:

• https://medium.com/@arikmaor/react-redux-performance-tuning-tips-cef1a6c50759
• https://itnext.io/redux-ruins-you-react-app-performance-you-are-doing-something-wrong-82e28ec96cf5

[bcolloran]

turns out that React DevTools gives false positives with react-redux facebook/react-devtools#1290
grrrr

hopefully this will be fixed someday. in the meantime, you can't really use the react devtools for perf profiling our app, which is sad :-(