atomiclabs
Re-renders on API requests
When API request happens that updates the state with new data, most of the UI re-renders even though no new data is passed to all components. This could probably be improved upon by using PureComponent for dead simple components.
Yup, it's a known issue. It just hasn't been a priority for me as perceived performance has been good enough.
PureComponent/ShouldComponentUpdate can definitely fix this. But is anyone aware why this is happening? I know React will re-render these internally, but shouldn't the virtual DOM diff prevent these changes from actually being updated in the real DOM?
I assumed the above GIF is showing React component re-renders, not DOM-rerenders. @kevva ?
Ahh, yeah, just checked in React dev tools, it is. Yeah I don't think this is something to worry about for now. React renders are fast.
I think it's best to revisit this when we are more feature complete or if we start to notice perf issues.
Also worth noting here that PureComponent/ShouldComponentUpdate will likely break any components that rely on container state. So if we start optimising with those we need to be very careful that no child components use container state. And if we add component state we need to make sure no parent components are PureComponents. Or take into account the container state in ShouldComponentUpdate.
Otherwise we're gonna get some real tasty bugs.
I know React will re-render these internally, but shouldn't the virtual DOM diff prevent these changes from actually being updated in the real DOM?
Yes, it's nothing to worry about for now. I just recently stumbled upon an issue with this at work though which caused a noticeable slowdown, but that was a quite complex component with a lot of calculations.
Also worth noting here that PureComponent/ShouldComponentUpdate will likely break any components that rely on container state.
Yup, it should only be used on components like Avatar etc. that don't have a lot of complex props.