News for hackers. Stuff that matters.
Re:Common mistakes writing React components with hooks by pg_bot on Tuesday July 21, 2020 @11:30AM (#23907600)
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.

Re:Common mistakes writing React components with hooks by LorenzA on Tuesday July 21, 2020 @12:12PM (#23908053)
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
Re:Common mistakes writing React components with hooks by pg_bot on Tuesday July 21, 2020 @12:42PM (#23908367)
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.

Re:Common mistakes writing React components with hooks by LorenzA on Wednesday July 22, 2020 @03:51AM (#23914870)
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

Re:Common mistakes writing React components with hooks by pg_bot on Wednesday July 22, 2020 @09:40PM (#23923368)
You can do it in 3 stored variables
Re:Common mistakes writing React components with hooks by robjan on Tuesday July 21, 2020 @12:38PM (#23908329)
Redux is global state. Adding all local state to a global store will result in a complete mess for any non-trivial app.
Re:Common mistakes writing React components with hooks by pg_bot on Tuesday July 21, 2020 @12:50PM (#23908458)
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.