1. Put state as high up as possible
If a component has state, nothing above it in the tree of components should care about that state. This means that most of your state should live in your top level component (or inside your flux store if you use some sort of flux library). There are cases where state might be kept in components not at the top level, but the state should be entirely internal. An example would be a component that manages a tabbed interface. It’s likely that nothing above that component in the component tree cares about which tab is active so state related to active tabs should be managed inside the tabs component.
Some clues that you might be on the wrong track are:
There are cases where this might be acceptable (for example you might set a tabbed interface’s initial tab as props, but not care about which tab is shown after that), but it is definitely a smell that something might be off.
Don’t do this! If you have state that needs to get updated when props change then that is clearly not state internal to this component. The state should live further up in the component tree (and it apparently already does to some degree since it keeps getting reset from props).
2. POJOs are your friend
You should try to change this:
3. Smaller components are better
I hope these ideas help you write cleaner, easier to use React code from the start. Let me know if you have any other rules of thumb to avoid making a mess in your React.