- React Hooks are a feature in React that allow you to add state and side effects to functional components.
- Prior to the introduction of hooks, state and side effects were only possible in class components.
Here is a table of some of the most commonly used hooks in React along with a brief description:
| Hook Name | Description |
| useState | basically it adds state to functional components. |
| useEffect | Adds side effects to functional components, such as data fetching API calls or updating the DOM. |
| useContext | Accesses context values in functional components and give to children component. |
| useReducer | Uses a reducer to manage state updates in functional components. used in Redux. |
| useMemo | Memorizes the output of a function to avoid re-computing it if its inputs haven’t changed for better performance |
| useCallback | Returns a memoized callback function. |
| useRef | Creates a mutable ref object that can be used to access the DOM or other values outside of the component’s render scope. |
| useImperativeHandle | Allows customizing the instance value that is exposed to parent components when using ref. |
| useLayoutEffect | Runs an effect immediately after changes to the DOM are flushed to the screen. |
These are just a few of the hooks provided by React. There are additional hooks available, including those for handling forms, gestures, and more. We will see some of them in next tutorials.