styled-components / Help

styled-components v4 React DevTools bloat

styled-components v4 React DevTools bloat

styled-components / Help · September 24, 2018 at 9:54pm

I have about 50,000 of these <ForwardRef><BaseStyledComponent forwardedRef><Context.Consumer><Context.Consumer>... things in my team's React DevTools since upgrading to v4.

Is it possible to get rid of these? I've tried the styled-components Babel plugin and it doesn't seem to fix it.


September 25, 2018 at 9:14am

Unfortunately nothing we can do from our side, but I remember hearing that @brian_d_vaughn was working on filtering these forward-ref components out in a future devtools update!

like-fill
1
  • reply
  • like

September 25, 2018 at 12:43pm

Thanks for the update Max!

  • reply
  • like

October 18, 2018 at 3:34pm

It seems like the <ForwardRef> components have been removed from DevTools but is there anything that can be done (within styled-components lib, or DevTools lib) to get rid of the rest of the bloat?

It makes DevTools unusable. :\

Surely others run into this as well?

  • reply
  • like
  • reply
  • like

October 19, 2018 at 8:21am

Again, nothing we can—the React DevTools team will have to remove all those Context.Consumer wrappers

  • reply
  • like

Unfortunate side-effect of the new context API that they implemented!

  • reply
  • like

October 23, 2018 at 6:32pm

Okay thanks for the update. I'll pester them with a link to this issue just so it's clear how nasty it is.

  • reply
  • like