4 ms·

I'm clearly missing something with hooks. The main selling point seems to be that your code is more "functional" because you are typing the 'function' keyword m

I'm clearly missing something with hooks. The main selling point seems to be that your code is more "functional" because you are typing the 'function' keyword more often, but the new functions you can write are not pure functions. They are "react functions" and have all kinds of global baggage, just like component classes. Having more impure functions doesn't do anything for me aesthetically, it might as well be a class. At least classes force you to declare (in typescript) the type of your state, with hooks it's all hidden inside. That seems less functional rather than more.

rat9988 5y ago
It's less verbose. It makes it more readable, in my opinion. They could have implemented the very same thing with a class, but they didn't. It's not about functional vs OOP. It's just about readability.
travisd 5y ago
The core of it is getting closer to true "reactive" programming. If you use hooks right™, you generally don't have to worry about how to handle values over time. React does all that plumbing for you (which is why we need all the dependency arrays). This for me is the main advantage over class components. You don't need to worry about the various lifecycle methods (including having separate methods for componentDidMount and componentDidUpdate and making sure you do all the plumbing right when your parent changes props that you weren't expecting). IMO, React really could have benefited from devoted language syntax for this (like Svelte does) to automagically and statically track all the dependencies. But React has an ethos of being "just JavaScript" (even JSX desugars to relatively straightforward React.createElement calls, and you can treat those nodes like regular JS objects, pass them around willy nilly, etc.), so it didn't happen (and instead we have lint rules like ESLint rules-of-hooks that are designed to enforce the invariants that really the programming language should enforce). Edit: The other nice things about hooks is their composability (and this is in fact related to what I said above). With class components, a component can have one state object, so it's hard to compose with other "mixin" type behaviors that need their own dedicated state. You ended up with weird patterns like higher order components (à la Redux withStore) that have basically ceased to exist with hooks (replaced by a useStore hook which can opaquely manage its own state under the hood).
- maxwellburson 5y ago
  > IMO, React really could have benefited from devoted language syntax for this (like Svelte does) to automagically and statically track all the dependencies. But React has an ethos of being "just JavaScript" (even JSX desugars to relatively straightforward React.createElement calls, and you can treat those nodes like regular JS objects, pass them around willy nilly, etc.), so it didn't happen (and instead we have lint rules like ESLint rules-of-hooks that are designed to enforce the invariants that really the programming language should enforce). You’re looking for solid.js https://www.solidjs.com/ https://www.solidjs.com/ It’s “just JavaScript” like React, but with automatic dependency tracking. My understanding is that React hooks are the best React can do given backwards compatibility requirements. Reacts beast feature is it’s ecosystem.
- imbnwa 5y ago
  > Edit: The other nice things about hooks is their composability (and this is in fact related to what I said above). With class components, a component can have one state object, so it's hard to compose with other "mixin" type behaviors that need their own dedicated state. You ended up with weird patterns like higher order components (à la Redux withStore) that have basically ceased to exist with hooks (replaced by a useStore hook which can opaquely manage its own state under the hood). This is more because the React team didn't care to figure out proper mixins beyond "Object.assign all the things"[0] [0]http://raganwald.com/2016/07/20/prefer-composition-to-inheritance.html http://raganwald.com/2016/07/20/prefer-composition-to-inheri...
mdoms 5y ago
Hooks are truly the most hideous API I have ever encountered. The whole thing just feels so forced and unnecessary.
- eh9 5y ago
  That’s just– like– your opinion, man.
TechBro8615 5y ago
Hooks make logic composable in the same way components make rendering composable. That composability allows for organizing code by what it does, rather than when it runs.
SebastianKra 5y ago
So imagine you have a class and you wan't to abstract away some stateful logic. You can use inheritance or mixins. You can use composition. You have to come up with some solution for reactivity, which means setting up observers and disposables. You might have to set up some variables for storing the emissions from those streams. I currently have to use an Angular-like framework, and my classes usually have 10-50 lines just setting up calls to other abstractions. Hooks simplify that: setup, teardown, state and reactivity all in a single function call. I'm not saying they're perfect, I would probably prefer a compiled solution like in Svelte. But when has anything ever been perfect.

rat9988 5y ago

It's less verbose. It makes it more readable, in my opinion. They could have implemented the very same thing with a class, but they didn't. It's not about functional vs OOP. It's just about readability.

travisd 5y ago

The core of it is getting closer to true "reactive" programming. If you use hooks right™, you generally don't have to worry about how to handle values over time. React does all that plumbing for you (which is why we need all the dependency arrays). This for me is the main advantage over class components. You don't need to worry about the various lifecycle methods (including having separate methods for componentDidMount and componentDidUpdate and making sure you do all the plumbing right when your parent changes props that you weren't expecting). IMO, React really could have benefited from devoted language syntax for this (like Svelte does) to automagically and statically track all the dependencies. But React has an ethos of being "just JavaScript" (even JSX desugars to relatively straightforward React.createElement calls, and you can treat those nodes like regular JS objects, pass them around willy nilly, etc.), so it didn't happen (and instead we have lint rules like ESLint rules-of-hooks that are designed to enforce the invariants that really the programming language should enforce). Edit: The other nice things about hooks is their composability (and this is in fact related to what I said above). With class components, a component can have one state object, so it's hard to compose with other "mixin" type behaviors that need their own dedicated state. You ended up with weird patterns like higher order components (à la Redux withStore) that have basically ceased to exist with hooks (replaced by a useStore hook which can opaquely manage its own state under the hood).

maxwellburson 5y ago
> IMO, React really could have benefited from devoted language syntax for this (like Svelte does) to automagically and statically track all the dependencies. But React has an ethos of being "just JavaScript" (even JSX desugars to relatively straightforward React.createElement calls, and you can treat those nodes like regular JS objects, pass them around willy nilly, etc.), so it didn't happen (and instead we have lint rules like ESLint rules-of-hooks that are designed to enforce the invariants that really the programming language should enforce). You’re looking for solid.js https://www.solidjs.com/ https://www.solidjs.com/ It’s “just JavaScript” like React, but with automatic dependency tracking. My understanding is that React hooks are the best React can do given backwards compatibility requirements. Reacts beast feature is it’s ecosystem.
imbnwa 5y ago
> Edit: The other nice things about hooks is their composability (and this is in fact related to what I said above). With class components, a component can have one state object, so it's hard to compose with other "mixin" type behaviors that need their own dedicated state. You ended up with weird patterns like higher order components (à la Redux withStore) that have basically ceased to exist with hooks (replaced by a useStore hook which can opaquely manage its own state under the hood). This is more because the React team didn't care to figure out proper mixins beyond "Object.assign all the things"[0] [0]http://raganwald.com/2016/07/20/prefer-composition-to-inheritance.html http://raganwald.com/2016/07/20/prefer-composition-to-inheri...

mdoms 5y ago

Hooks are truly the most hideous API I have ever encountered. The whole thing just feels so forced and unnecessary.

eh9 5y ago
That’s just– like– your opinion, man.

TechBro8615 5y ago

Hooks make logic composable in the same way components make rendering composable. That composability allows for organizing code by what it does, rather than when it runs.

SebastianKra 5y ago

So imagine you have a class and you wan't to abstract away some stateful logic. You can use inheritance or mixins. You can use composition. You have to come up with some solution for reactivity, which means setting up observers and disposables. You might have to set up some variables for storing the emissions from those streams. I currently have to use an Angular-like framework, and my classes usually have 10-50 lines just setting up calls to other abstractions. Hooks simplify that: setup, teardown, state and reactivity all in a single function call. I'm not saying they're perfect, I would probably prefer a compiled solution like in Svelte. But when has anything ever been perfect.