React Hooks allow functional components to use state and lifecycle features. Hooks make React applications easier to write and maintain. Below is a table showing common hooks grouped by their type.

React:

import {
  useState,
  useEffect,
  useContext,
  useRef,
  useReducer,
  useMemo,
  useCallback,
  useLayoutEffect,
  useImperativeHandle,
  useDebugValue,
  useId,
  useTransition,
  useDeferredValue,
  useSyncExternalStore,
  useInsertionEffect,
  useOptimistic,
  useActionState,
  use
} from 'react';

react-router-dom Hooks:

import {
  useNavigate,
  useLocation,
  useParams,
  useSearchParams,
  useMatch,
  useResolvedPath,
  useHref,
  useNavigation,
  useLoaderData,
  useRouteLoaderData,
  useActionData,
  useSubmit,
  useFetcher,
  useFetchers,
  useRevalidator,
  useOutlet,
  useOutletContext,
  useRouteError,
  useBeforeUnload,
  useBlocker
} from 'react-router-dom';

react-redux Hooks:

import {
  useDispatch,
  useSelector,
  useStore
} from 'react-redux';

Redux Toolkit Query (RTK Query)

import {
  useGetUsersQuery,
  useAddUserMutation,
  useUpdateUserMutation,
  useDeleteUserMutation
} from './services/api';

TanStack Query (React Query)

import {
  useQuery,
  useMutation,
  useInfiniteQuery,
  useQueries,
  useQueryClient,
  useSuspenseQuery
} from '@tanstack/react-query';

Zustand:

import { useStore } from 'zustand';

Framer Motion:

import {
  useAnimation,
  useMotionValue,
  useTransform,
  useScroll,
  useSpring,
  useInView,
  useDragControls
} from 'framer-motion';

Common Interview Hooks:

1. useState:

The useState hook is used to manage state in functional components.

const [state, setState] = useState(initialValue);

import React, { useState } from "react";
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <h2>Count: {count}</h2>
     <button onClick={() => setCount(count + 1)}>
       Increase
     </button>
     <button onClick={() => setCount(count - 1)}>
       Decrease
     </button>
   </div>
 );
}
export default Counter;

2. useEffect:

The useEffect hook runs side effects like API calls.

useEffect(() => {
  // side effect code

  return () => {
    // cleanup code (optional)
  };
}, [dependencies]);

import React, { useEffect } from "react";
function Example() {
 useEffect(() => {
   console.log("Component mounted");
 }, []);
 return <h2>Hello World</h2>;
}
export default Example;

3. useContext:

The useContext hook allows components to access global data.

1. Create Context:

import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;

2. Provide Context Value:

import React from "react";
import ThemeContext from "./ThemeContext";
import Child from "./Child";

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

export default App;

3. Use In Child Component:

import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function Child() {
  const theme = useContext(ThemeContext);

  return <h2>Current Theme: {theme}</h2>;
}

export default Child;