Show HN: Tired of logic in useEffect, I built a class-based React state manager
1–10 of 57 posts
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#2Just to sanity-check my reading of this:
- Zustand exposes itself as a hook.
- MobX does that observer-wrapper thing
- Snapstate instead has an explicit writing step (`scoped()`) at the bottom of a component
If so, I really quite like that. Kudos!
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#3All the examples are fetching data from a server, and in such cases I think tanstack query already does all the hard part. I feel like people under-use react query and put too much state in their FE. This might be relevant if your app has some really complicated interactions, but for most apps they should really be a function of server, not client, state. Of course this exact reasoning is why I moved off react altogether and now use htmx in most of my projects
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#4Javascript and classes go together like toothpaste and orange juice. All good JS programmers I know essentially pretend that classes don't exist in the language (or if they use them, they only do so rarely, for very niche cases).
JS does not have classical OOP built in! It has Brandon Eich's prototypal inheritance system (which has some key differences), along with a 2015 addition to the language to pretend it has OOP (but really that's just lipstick on the underlying prototypal pig).
If you use classes in JS, you're bound to be disappointed at some point when they don't behave like classical OOP. Most devs accept that and use more functional approaches (like factory functions) instead of OOP.
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#5We have a similar style of react state manager that we use at Aha! https://github.com/aha-app/mvc
I think the intent is very similar even though there are some structural differences: move the state and state logic out of the view to classes.
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#6Javascript and classes go together like toothpaste and orange juice. All good JS programmers I know essentially pretend that classes don't exist in the language (or if they use them, they only do so rarely, for very niche cases). JS does not have classical OOP built in! It has Brandon Eich's prototypal inheritance system (which has some key differences), along with a 2015 addition to the language to pretend it has OO…
For clarity, what do you call "classical OOP"?
(disclaimer: FP all the way, regardless)
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#7Javascript and classes go together like toothpaste and orange juice. All good JS programmers I know essentially pretend that classes don't exist in the language (or if they use them, they only do so rarely, for very niche cases). JS does not have classical OOP built in! It has Brandon Eich's prototypal inheritance system (which has some key differences), along with a 2015 addition to the language to pretend it has OO…
For clarity, what do you call "classical OOP"? (disclaimer: FP all the way, regardless)
Essentially `new Foo()`, where `Foo` can be a subclass of `Bar` that inherits properties in the same way we all learned in our Java (or whatever actual OOP) language.
JavaScript gives you a class syntax that lets you make classes and extend them from each other, and for the most part they will work the same way as a class from a language like Java ... but some things won't.
You can either become an expert on prototype chains, and how JS actually implements OOP (differently from Java) ... or you can just write factory functions instead of classes.
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#8Javascript and classes go together like toothpaste and orange juice. All good JS programmers I know essentially pretend that classes don't exist in the language (or if they use them, they only do so rarely, for very niche cases). JS does not have classical OOP built in! It has Brandon Eich's prototypal inheritance system (which has some key differences), along with a 2015 addition to the language to pretend it has OO…
Encapsulation, inheritance and polymorphism all work fine with JavaScript classes. OOP works just fine.
What doesn't work in JavaScript is functional programming.
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#9Javascript and classes go together like toothpaste and orange juice. All good JS programmers I know essentially pretend that classes don't exist in the language (or if they use them, they only do so rarely, for very niche cases). JS does not have classical OOP built in! It has Brandon Eich's prototypal inheritance system (which has some key differences), along with a 2015 addition to the language to pretend it has OO…
Counterpoint: classes are a great way to bundle state and logic - which is exactly what UI components are - and components models should use classes more, not less.
React's "functional" components are simply poor approximations of classes. Instead of easy to read and reason about class fields, you put state in useState() function classes that are effectively named by their appearance order in source and who's current state you can't introspect with dev tools!
The component function mixes one-time setup (which should be a class constructor) with repeated render calls (which should be a method), so those of course have to be separated by putting the one-time work inside of a closure inside of the repeated should-have-been-a-callback function. Event listeners and other callbacks are another huge mess. Don't forget useMemo() or useCallback() (but which?).
It's actually quite mad.
And the differences between classical and prototypal inheritance basically don't even pop up under normal class usage in JS: just use class fields, don't mess with the prototype chain, and don't dynamically add or delete properties - all things that are how classical inheritance works - and things just work like you expect.
Re: Show HN: Tired of logic in useEffect, I built a class-based React state manager
#10Sorry for being pedantic, but the first example could be rewritten to extract the pattern into a higher level hook, eg useNotifications. One way to simplify components before reaching for store libraries. The reusable hook now contains all the state and effects and logic, and the component is more tidy.
function Dashboard() {
const { user } = useAuth();
const {loading, error, notifications, undreadCount, markAsRead} = useNotifications(user);
if (loading) return ;
if (error) return Failed to load: {error}
;
return (
Dashboard ({unreadCount} unread)
);
}