My Question: Why should I prefer to use hooks and not use a class-based component instead, what is the benefit of doing so?
Mainly for:
readability/conciseness: most of the times you choose to use class-based components to do simple stuff (controlled input components, simple UI choices/options) and for doing that you usually
- add some interaction (onCLick, onChange) handlers
- add a constructor to bind them to the current component
and if you are implementing side-effects you start using the React lifecycle methods like componentDidMount, componentDidUnmount etc.
your component becomes more and more verbose just to do simple stuff.
Hooks can help you to reduce this verbosity with a simpler to read, more concise and more readable component. The lines of code aren't 20%-50% dedicated to class structure anymore (definition, methods etc.) just to wrap your own code... but are ~100% your code directly.
simplicity: Hooks allow you to write super simple and atomic side effects/state logic that you can plug into your components in a while.
To add behaviors/features to super-simple components you don't need to transform them into classes, "force" yourself using one of the React patterns (Higher-Order Components, Render Props, etc.) that, especially at the beginning, make React so hard to get on board
stateful logic reuse: Hooks are so simple and connectable that you mix them and add rich/complex features without worrying about them (in fact Hooks can be consumed only in functional components and in... other Hooks themselves)
testability: that's an advanced concern but it could be important too. While Hooks mixes the presentation logic with the stateful ones (UI and state/side-effects aren't decoupled anymore), Hooks could be developed as super easy to be tested per-se functions (independently from you considering unit testing good or bad).
I was planning to refactor my existing code base by converting many of my class-based components into functional components using hooks but I want to know whether it's worth doing so? the answers I get is gonna help me take a decision.
Think twice before doing that, the docs themselves say
Try to resist adding abstraction too early.
and read the "useEffect is not componentDidMount + componentDidUpdate + componentWillUnmount" of the Kent post. There are some contraindications you must be aware before doing that.
Instead: consider using Hooks for every future component instead of refactoring your old ones.
So make some checks and tests before doing that and refactor your component only when you master hooks
p.s. I cited the HOC etc. React patterns: they remain valid and useful and with a lot of rooms for them, simply you won't find yourself using them for simple stuff that doesn't require them
p.p.s. if you are getting used to React Hooks you can find my memorandum useful, I wrote it for everyone that have already read the docs and sums up the most important Hooks stuff (linked to the docs etc.)
