Personally, I don’t think that’s why hooks came to be. I mean partially, yes, there was a lot more boilerplate when class-based components were in vogue, and then pure function components entered the picture and took away that boilerplate… at the cost of not being able to have any state or respond to any lifecycle events. That’s one problem hooks solve: being able to respond to state and lifecycle events from function components
The bigger advantage IMO is that hooks compose much better. You can write your own custom hook that itself calls useState and useEffect, then use that custom hook in a component, making it possible to write a general abstraction that doesn’t pollute the state of the component itself. Even ignoring that, one component can call useState more than once to create multiple independent pieces of state (instead of bundling them up into one top-level state object), and can call useEffect for multiple independent effects without having to have lots of complex state management in componentDidMount, componentWillReceiveProps, etc. useEffect is still a pretty dangerous footgun, but I’ll take it any day of the week over having to figure out if I want my code in componentDidMount versus componentWillMount again…
You can write your own custom hook that itself calls useState and useEffect, then use that custom hook in a component
My face when I never thought of doing that and I’m literally removing hundreds of lines of code at the moment…
Even though I have used React (or Vue) for a long time now, I’m far from being an expert, and I don’t really like frontend dev that much anyway. So, many thanks! If you have more simple ideas like that to make my code easier/simpler/… feel free to share them :)
I dislike hooks so much. Specially useEffect, you have to be extra careful to avoid infinite loops when interacting with useState. Also following the flow of state and effects in a complex UI is so much harder with hooks, as you have this hooks reacting to each other, you have to look at multiple places and make a complex diagram of dependencies in you head to figure out what is going on. I think early React with distinct lifecycle methods was way clearer.
Am I understanding it correctly that hooks were invented because people didn’t want to create class-based components for some reason?
Personally, I don’t think that’s why hooks came to be. I mean partially, yes, there was a lot more boilerplate when class-based components were in vogue, and then pure function components entered the picture and took away that boilerplate… at the cost of not being able to have any state or respond to any lifecycle events. That’s one problem hooks solve: being able to respond to state and lifecycle events from function components
The bigger advantage IMO is that hooks compose much better. You can write your own custom hook that itself calls
useStateanduseEffect, then use that custom hook in a component, making it possible to write a general abstraction that doesn’t pollute the state of the component itself. Even ignoring that, one component can calluseStatemore than once to create multiple independent pieces of state (instead of bundling them up into one top-level state object), and can calluseEffectfor multiple independent effects without having to have lots of complex state management incomponentDidMount,componentWillReceiveProps, etc.useEffectis still a pretty dangerous footgun, but I’ll take it any day of the week over having to figure out if I want my code incomponentDidMountversuscomponentWillMountagain…My face when I never thought of doing that and I’m literally removing hundreds of lines of code at the moment…
Even though I have used React (or Vue) for a long time now, I’m far from being an expert, and I don’t really like frontend dev that much anyway. So, many thanks! If you have more simple ideas like that to make my code easier/simpler/… feel free to share them :)
Or at least that the react team at Facebook wanted their devs to write something other than class components, but essentially yes.
I dislike hooks so much. Specially useEffect, you have to be extra careful to avoid infinite loops when interacting with useState. Also following the flow of state and effects in a complex UI is so much harder with hooks, as you have this hooks reacting to each other, you have to look at multiple places and make a complex diagram of dependencies in you head to figure out what is going on. I think early React with distinct lifecycle methods was way clearer.