In February 2019, React 16.8 was released and it shipped with an additional API that allows you to use state and other features in React without writing a class. This additional API is called Hooks and they’re becoming popular in the React ecosystem, from open-sourced projects to being used in production applications. Because React Hooks become more and more commonly use, it is a great additional skill to pick up while we stuck in quarantine.
React Hooks are completely opt-in which means you do not need to rewrite existing code, these hooks do not contain any breaking changes, and they’re available for use with the release of React 16.8. Some web developers have been trying to use the Hooks API even before it was released officially, but back then it was not stable. Now it is stable and highly recommended for React developers to use.
What Are React Hooks?
React Hooks allow React developers to use state and lifecycle methods inside functional components, they also work together with existing code, so they can easily be adopted into a codebase. Hooks were pitched to be able to allow developers to use state in functional components but Hooks are much more powerful than that. By Using Hooks, React Developers got to enjoy the following benefits:
- Improved code reuse;
- Better code composition;
- Better defaults;
- Sharing non-visual logic with the use of custom hooks;
- Flexibility in moving up and down the components tree.
According to the ReactJS official documentation, React Hooks were released to solve these issues:
- Reusing stateful logic between components is difficult.
With Hooks, you can reuse logic between your components without changing their architecture or structure. - Complex components can be difficult to understand.
On bigger projects, components become larger over time and carry out many operations. As a result, it becomes difficult to understand in the long run. Hooks solve this by allowing you to separate a particular single component into various smaller functions based upon what pieces of this separated component are related (such as setting up a subscription or fetching data), rather than having to force a split based on lifecycle methods. - Classes are quite confusing.
For beginners it is not easy to learn classes because it works which differs from other languages. This issue was solved by React Hooks because they allow developers to use the best of React features without having to use classes.
The Rules Of Hooks
There are two main rules that you need to strictly follow when applying hooks:
- Make sure to not use Hooks inside loops, conditions, or nested functions;
- Only use Hooks from inside React Functions.
There are 10 in-built hooks that was shipped with React 16.8 but in this article we will discuss the most common hooks. They are useState(), useEffect(), useContext() and useReducer().
useState()
The useState() hook allows React developers to update, handle and manipulate state inside functional components without converting it to a class component.
useEffect()
The useEffect() hook applicable on function that contain effectual code. In functional components, effects like mutations, subscriptions, timers, logging, and other effects are not allowed to be placed inside a functional component. By doing so, it will result to a lot of inconsistencies when the UI is rendered and also cause a lot of confusing bugs.
useContext()
The useContext() hook accepts a context object then it returns the current context value for that context. This hook allows functional components access your React app context easily.
useReducer()
The useReducer hook is used for handling complex states and transitions in state. It takes in a reducer function and also an initial state input; then, it returns the current state and also a dispatch function as output by the means of array destructuring.