WHAT ARE HOOKS IN RECTJS?

In React functional components, hooks are special functions that allow you to "hook into" React state and lifecycle features from function components. They were introduced in React 16.8 to enable developers to use state and other React features without writing a class.

1. useState

useState is a hook that allows functional components to manage local state. It takes an initial state as an argument and returns an array with two elements: the current state and a function to update it.

Example:
const [count, setCount] = useState(0);

2. useEffect

useEffect adds the ability to perform side effects in your components. It runs after the component renders and can perform data fetching, subscriptions, or manually changing the DOM.

Example:

useEffect(() => {

document.title = `You clicked ${count} times`;

}, [count]);

3. useContext

useContext is used to access the context values. It accepts a context object and returns the current context value for that context.
Example:
const contextValue = useContext(MyContext);

4. useReducer

useReducer is usually preferred over useState when you have complex state logic. It accepts a reducer function and the initial state, and returns the current state and a dispatch function.
Example:
    const initialState = { count: 0 };
    function reducer(state, action) {
        switch (action.type) {
        case 'increment':
        return { count: state.count + 1 };
        default: throw new Error();
        }
    }
    const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback

useCallback returns a memoized version of the callback function that only changes if one of the dependencies has changed. It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
Example:
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

6. useMemo

useMemo memoizes the result of a function and returns the cached result when the dependencies (an array of values) have not changed. It helps optimize performance by avoiding expensive calculations on every render.
Example:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef

useRef returns a mutable ref object whose .current property is initialized to the passed argument. The returned object will persist for the full lifetime of the component.
Example:
const myRef = useRef(initialValue);

8. useImperativeHandle

useImperativeHandle customizes the instance value that is exposed when using React.forwardRef. It is useful for avoiding unnecessary renders in child components when the parent is re-rendered.
Example:
useImperativeHandle(ref, () => ({ method() { // ... }, }), [dependency]);

9. useLayoutEffect

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations. It can be useful in cases where the effect logic needs to be executed synchronously before the browser repaints.
Example:
useLayoutEffect(() => {
// Do something synchronously
return () => { // Clean up logic };
}, [dependency]);

It's always a good idea to refer to the official React documentation for the most up-to-date information on hooks.