React hooks functions that allow you to use React state and lifecycle features in function components. So we can get similar features without using React Class Components.
React Hooks are optional which means that rewriting existing code is not needed, they do not have any breaking changes, and they're available for use with the release of React 16.8. Some interested developers have been using the Hooks API even before it was released, but it was not stable and was only an experimental feature. Now it is stable and recommended to use in production.
Motivation for creating React Hooks
React create hooks API to fix 3 common issues in React code. The motivation for this API was very well expressed by Sophie Alpert and Dan Abramov in React Conf 2018 talk. these are the motivation:
- Reuse react logic without writing lots of wrapper components.
- Simplify logic in the component with easy-to-use lifecycle methods.
- Create stateful components without the use of the class component. Which reduces boilerplate.
At first, I thought these are not that many big issues to introduce a new API. But once I started using hooks. I never see back to the class component. It totally changed my mind.
Most commonly used React Hooks
- useState Hook
- useEffect Hook
- useRef Hook
- useCallback Hook
- useMemo Hook
- useContext Hook
- useReducer Hook