Thinking in React
The problem I&#x27;ve had developing with React (I&#x27;ve just done a little, I&#x27;m still a beginner), is it sometimes seems like a minor change to the UI can require a major change to the source, cascading through multiple components.<p>I think maybe this is reflected in this guide, such as the advice in the &quot;Identify where your state should live&quot; section (which they say is &quot;often the most challenging part for newcomers to understand&quot;, which matches my experience), which suggests you should be looking at every single component involved and how they all relate to determine where the state should live.<p>This is very different from my previous (mostly OO, lately ruby) experience, where you really want to look at a component (in the broad sense, not neccesarily a view-layer, I just mean any object or &#x27;piece&#x27;) in strict isolation, identify what it&#x27;s inputs and  outputs need to be, and from that alone, in isolation, you know what it&#x27;s API should be. And from this technique, you hope to wind up with components that that do not assume or depend on too much about their context of use and can be re-used and re-mixed in different ways without a rewrite.<p>I&#x27;ve found I&#x27;ve had to change my whole approach designing React -- when using my previous time-tested techniques, I would wind up putting props&#x2F;state in the wrong place. I found that indeed I had to consider the entire graph when determining props&#x2F;state.  But that this has led me to situations where what my intuition would say would be relatively small changes to the UI create a cascading waterfall of changes I have to make to lots of and lots of components in the existing graph, as where state (including props) is kept needs to change, requiring cascading changes to many components in the previous graph.<p>Examples of such UI changes would be taking a UI widget&#x2F;component that previously was only one one page and realizing it had to be re-used on another(s); moving a UI widget from one part of the page to another; taking a UI widget that previously just displayed something and realizing it needs to have an &#x27;edit&#x27; capability too; taking something that showed up just once on the page and changing it to be say at both top and bottom of page.  All things that my usual techniques and approaches from OO experience would have been able to accomodate no problem if I had designed the components well from the start, but that in React I&#x27;m finding result in needing to change where state is kept (or what things are state and what things are props), requiring cascading changes to many components.<p>Which is frustrating. I hoped I&#x27;d get better at avoiding this as I got better with React, and I&#x27;m sure that&#x27;s true, but if even the advice from those most experienced says you can only determine state&#x2F;props architecture by looking at the entire object graph possibly involved in that state....<p>I dunno. Comments from people more experienced with react very welcome.