I would go a step further and say that React Components should not manage their state internally. (this.state was a mistake to add to the project) You can create every single UI in the world using pure functional components. They are easier to understand since they act like every other function, and they are simpler to test.

Keep your state externally and just grab what you need on each subcomponent with the `connect` function from `react-redux`. Easy peasy front-end development.

not sure i understand you correctly, but keeping all state external just clutters up the store i feel. if the state is not used anywhere else and you also don't need to change it externally i would not move state out of the component. also if your state is always outside of your component they will only be reusable if you hook up the store in all your projects the same way

Nah you can get reusability by creating shared components that you just pass props into.

For example, you can have a date picker that just accepts variables to display the current state and parent component that reads data from the store and passes it into the date picker component.

This method is also great for debugging, since you can just replay the state transitions over again if there is an application error. If the component holds the state, then it can be cumbersome to reproduce the error.

a date picker would be super annoying to use if you would have all the state in the store. that are probably 40 variables. assume you open the date picker can can move threw the tabs of the month and you are not interested in changing this from outside.

if you have no state in the component that would not be possible. you can also not wrap this with an other component that can hold this state because you don't want components with state. that means all behaviour that requires state would have the state in the store this will just be crazy

You can do it in 3 stored variables

Redux is global state. Adding all local state to a global store will result in a complete mess for any non-trivial app.

Maybe if you're writing it ;)

Most of the time it mirrors the structure of a file system which is the exact way (almost) every program is written.

As with most software projects, keeping organized is like 80% of the battle.

Pardon my ignorance, but is prop drilling a problem once you've bought into Redux or similar?

No it provides helper functions that inject props into your component.