React Hooks

Hooks are functions that start with the name use (e.g., useState, useEffect).
They allow functional components to:

1. useState: Allows functional components to manage state.
2. useEffect: Performs side effects in function components, similar to lifecycle methods in class components.
3. useContext: Provides a way to access the context in functional components.
4. useReducer: Alternative to useState. It's usually preferred for managing more complex state logic.
5. useCallback: Returns a memoized callback function.
6. useMemo: Returns a memoized value.
7. useRef: Returns a mutable ref object.
8. useImperativeHandle: Customizes the instance value that is exposed when using ref.
9. useLayoutEffect: Similar to useEffect, but fires synchronously after all DOM mutations.
10. useDebugValue: Used for displaying custom hook labels in React DevTools.

Rules for Using Hooks:

• hooks can be only used in the react component
• It can be only used in top-level( it must be not called in nested code statements)