- 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:
|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.