search

gaearon / ama

Ask me anything!
222 stars 5 forks source link

How to visualize rerendering of react component? #83

Closed PetrSnobelt closed 8 years ago

PetrSnobelt commented 8 years ago

Hello Dan, Yesterday I try to visualize rerendering of react components in reusable way (something like https://react.rocks/example/Visualizing_Rendundant_Renders) but I can’t find way how to change style of component without modifying it’s render method? Is it possible?

• I try to create HOC to decorate original component, I can add additional properties to decorated component, but don’t know how to change for example background-color. Only way I found is wrap component into new div, but it broke my design. • All my components inherit from base component, but again, I don’t know how to modify real component’s css style.

Is there any way how to do something similar like example on top, but in reusable way?

Thank you Petr

gaearon commented 8 years ago

I think the least invasive way to do this would be to patch component lifecycle methods to emit events, aggregate them in a centralized store, and have a completely separate rendering layer where you put absolutely positioned semi-transparent blocks with the same positions as your components.