We have an app that uses React and Es6. I find dealing with and reasoning about state and props difficult and cumbersome. Specifically, because the state is asynchronously modified and we have significant child component hierarchies, trying to know what is going on at any given time is basically impossible. On top of this I am finding, again due to the significant component hierarchies that we have, rendering is being called multiple times due to state or prop updates. For example if a component has 4 props; those props could be modified by state or props higher up the chain; and each of those state or prop fields may be modified by state or props higher up the chain, etc. But since this child has 4 props, any one of them being updated will cause a re-render of that component, even when all the props values may in the end be the same.
I heard that react does not call render when state or prop values are the same, but that is not my experience at all. And even if that were true the other component life cycle functions, and therefore my hooks into them, do most definitely get called. Is there a strategy to prevent these redundant re-renders? I understand that re-render may not actually change the dom, as React is smart enough to know when nothings changed, however re-running component code unnecessarily is still unnecessary and redundant.