React Hooks Crash Course
React 16.8 introduced a brand-new feature to React: “React Hooks”.
React Hooks (or just “Hooks”) allow you to build your entire React app with functional components only. Yes, that’s right, no more classes.
State management, lifecycle methods & side effects and many other things can now all be implemented in functional components - with the help of these Hooks.
If you’re interested WHY React Hooks were added, you can find the long form explanation here.
In short, Hooks were added to replace classes because:
Re-using (stateful) logic between components was difficult in the past
classes can be confusing and could easily be used incorrectly (e.g. wrong usage of lifecycle hooks, subtile bugs)
That being said, it is important to point out that classes are not going anywhere!
You can build all components as functional components with React Hooks but neither you have to so, nor you have to convert all your existing, class-based components to functional ones with Hooks.
And whilst it seems likely that React Hooks will become the new standard for building components, it’s way too early to tell which role they’ll play exactly in the future of React.
With that out of the way, what do Hooks look like? How are they used?
We got two major reasons for using classes in the past: