[halflife]

This is something that I just don’t get, in the olden days, when you wanted to encapsulate logic and state and share it between instances you would just use a singleton service. But now when classes are “bad” for some reason (when the whole point of a class is encapsulation of state and logic) you get weird stateful functions that makes everything hard to track with complicated API.

[000ooo000]

>you get weird stateful functions

This is one of the reasons I think hooks stink. It seems like they tried so hard to avoid using classes that they came up with an opaque, framework-only way to manage state so that they could declare "ha! Stateless functions at last!". The state's still there, it's always gonna be there, it's just now hidden behind an abstraction that has a few footguns.

[lucsky]

Again, you can still use class components today, feel free and have fun.

[baobabKoodaa]

The question in this thread is "What do you find hard to learn about react". The question is not "are you allowed to not learn about react".

[000ooo000]

Unsure what your point is. I know that; the codebase I work on professionally has both. This thread is discussing the quality of the hooks API.

[hombre_fatal]

How do you write a singleton service that can feed state back into the component that calls it when that state changes?

For example, `api.fetchInfo()` would want to feed Loading | Success(T) | Error(E) back into the React component call-site when they change.

EventEmitters come to mind but aren't without their own issues like subscription leaks. And you have to track component arguments in order to know when to call the service again when they change which is a classic source of complexity.

Hooks provide a solution for this since they themselves are just nested React lifecycle constructs (like useState + useEffect).

[halflife]

In class components you just could await the result and perform a set state, and that would be it. Easy as pie. But now in function components when everything is called all the time without your control you have to use escape hatches like use effect just to work around react.

[hombre_fatal]

Hooks let you wrap all sorts of logic (and other hooks) and return values that rerender the callsite component when changed. Just keep adding on to my hook example and you get more and more code that you need to repeat in every class component that uses it.

Of course, the class component solution to this was to use an HOC, but that had its own issues like complex data flow and wrapper hell.

Hooks solve problems of composition without Yet Another Wrapper and they give clearer data flow, better ref forwarding, etc.

It's easy to see complicated useEffect spam and blame hooks but frankly that wasn't any better when it was happening at different layers of HOCs.

[halflife]

You can just use a service instead, expose public methods and hide private while keep expending and refactoring the internal logic. The same way it’s been done for decades. The only problem is the one that react created for itself in function components which is when to refresh the render from the state.

[lucsky]

1. Nobody said that classes are bad. Yes you can encapsulate logic and state in a singleton, that's not the issue, the issue is how you then "apply" it. There was a fantastic diagram that (most likely) Dan Abramov posted on Twitter a while ago (before it became the olympic pool of diarrhea that it is today) that was demonstrating the superiority of hooks in a beautiful and obvious way but I cannot find it anymore... :/

2. Sorry but if you keep using "weird", "hard" and "complicated" adjectives to define something that is quite honestly not so hard to grasp you make it hard to not go with "skill issues".

[halflife]

Nobody is saying that officially, but for the past 7-8 years the react documentation pretty much ignore class components. Today you have no way of knowing how to create a large class based react application because the ecosystem has moved on, it’s not the best practice.

I’m using weird and hard in a relative and not absolute way. Weird because functions can’t have state, and for years we’ve been taught to keep functions small and predictable. Hard because there are much simpler ways to write stateful code other than hooks. The problem with react is that instead of creating a powerful state library, powerful ui library, and creating a bridge between them, they chose to subjugate the state library to the UI library’s limitations.