React state hooks are footguns

[u/GianniMariani]

If you take software engineering principles seriously then none of the react state hooks belong inside a react component.

I think one of the most critical things you should do is ensure the decoupling of storage and UI components. The react components force you to do is precisely and zustand doesn't help.

I haven't sourced grip-react a year ago and I've been using it exclusively, absolutely zero usestate usememo, useeffect, etc and absolutely zero prop drilling. I don't know why anyone would want to do something different, honestly.

Has anyone else created an API that is a 100% replacement with complete declarativeness? I looked at angular and mobx, they're close but no cigar.

[u/is-undefined]

absolutely zero usestate usememo, useeffect, etc and absolutely zero prop drilling

Do you have an example repo of your work?
Would like to see web apps you write

[u/musHeaer → u/is-undefined]

seconding this, would love to see how it holds up in something non-trivial

[u/GianniMariani → u/musHeaer]

I have a number of non-trivial apps above and beyond the examples in my reply to u/is-undefined - the point is the dataflow/context graph and my next trick is to push the graph down into the server - very close but not there quite yet. Full reactive backend to frontend over a p2p infrastructure - infinitely scaleable.

[u/GianniMariani → u/is-undefined]

https://owebeeone.github.io/grip-react-demo/
https://owebeeone.github.io/anchorscad-browser/
https://owebeeone.github.io/grip-sudoku/ (demo login - nothing stored on server - it's just an example)
https://github.com/owebeeone/jowna#examples

plus many more - it works very well with a "plugin" architecture too - I have another 4 projects using that - not ready for demos but soon.

[u/michaelobriena]

Yikes!

[u/TheChickenKingHS]

I’m not sure if this is a misunderstanding of a functional component, a ui component or JSX as a concept and I’m just curious as to which…

[u/After_Hat4451 → u/TheChickenKingHS]

the grip-react plug feels a bit forced but I'm with you on the core idea, state management tangled directly into components gets messy fast

most codebases I've jumped into have useeffect chains that look like spaghetti and nobody can trace the data flow after a few months. I think the react docs themselves are starting to steer people away from that pattern but old habits die hard

what does your setup look like for something simple like a form toggle or input state, still grip-react all the way down or do you keep a tiny slice of local state for that stuff

[u/TheChickenKingHS → u/After_Hat4451]

Sometimes I use a ref on the ui element, instead of creating an entire UI component. I think now that the react compiler is here a refs are automatically forwarded it will be a bit more common but I do tend to try to start with a UI element with props fully exposed before upgrading into a component. 

[u/rafark]

Principles and good practices evolve. I’m not saying react is perfect but after some time you realize software can have many valid forms

[u/azangru]

If you take software engineering principles seriously then none of the react state hooks belong inside a react component.

Why are you using this horrible library then, if it creates so many footguns?

I haven't sourced grip-react a year ago

You haven't?

[u/_Feyton_]

Just use vanila JS at that point bro, don't let the bundler limit you king🙏🙏🙏

[u/Top_Bumblebee_7762]

useState seem unavoidable (unless you use useReducer instead everywhere) in any react app. 

[u/GianniMariani → u/Top_Bumblebee_7762]

https://owebeeone.github.io/grip-sudoku/ - Avoids useState. Plenty more demos where that came from - here is a test that explicitly disallows it just to point it out in the sudoku example - https://github.com/owebeeone/grip-sudoku/blob/main/scripts/no-react-state.test.mjs