🔄 React Hooks and Their Use Cases–Explained

Last updated - 13 May, 2025, 10 minute reading

React hooks, introduced in 16.8, make it easy to define states and lifecycle methods and side effects in functional components. It simplifies the code and helps in making more readable. Components offer a more functional approach to React development. It eliminates the use of class components in most cases.

📌 Hooks make function components powerful and concise.

🧠 Why Hooks?
Before Hooks:

• Class components were the standard way of managing states and lifecycles in React components.
• Sharing logic between components meant HOCs or render props, which often become messier.

With Hooks:

• It enables developers to reuse logic by extracting it from components into separate and reusable functions called custom hooks. This makes code more readable, maintainable, and testable. By encapsulating logic, custom hooks promote modularity and reduce code duplication.
• Functional components in React can manage state, handle side effects, and utilize references (refs) through the use of React Hooks. This is achieved with the introduction of React Hooks, specifically, hooks like useState, useEffect, useRef, and useContext.

We can import hooks from React like below:

import { useState } from 'react'

📦 Common React Hooks with Use Cases :

1. useState: The useState hook lets you add state to the functional component. It returns a pair: the current state value and a function to update it. When we change the value of the state, it makes the component rerender to show updated values. Click here for more details.

 const [name, setName] = useState('');

2. useEffect: useEffect allows you to perform side effects in React functional components. Side effects like fetching data, updating the DOM, etc. Click here for more details.

  useEffect(() => {
	//side-effect login here
	
	return () => {
		// optional cleanup logic here
	}
   },[])

3. useContext: useContext hooks allow access to context values. Instead of passing props down manually at every level, you can use useContext to access shared values directly. Click here for more details.

 const value = useContext(MyContext)

4. useCallback: It memoizes the function, which prevents it from recreating on every render until its dependencies change. Click here for more details.

const memoizedCallback = useCallback(() => {
	// your function logic
}, [dependencyOne, dependencyTwo]);

5. useMemo: It memoizes the computed values, recalculating when dependencies change. It used to optimize expensive recalculations on every render. Click here for more details.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6. useRef: It accesses DOM elements directly. It creates a mutable reference that persists across renders without causing a rerender when updated. Click here for more details.

const refContainer = useRef(initialValue);

7. Custom hook: A custom hook is a reusable function in React that starts with use and uses one or more built-in hooks inside it. It lets you encapsulate logic and share it. across components without duplicating code.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function ResponsiveComponent() {
  const width = useWindowWidth();

  return <p>Window width is {width}px</p>;
}

✨ Final Thoughts

• Makes functional component powerful by using useState, useEffect, etc. hooks.
• Managing states is easy with hooks.
• Instead of writing many lifecycle methods in class components, we can handle page effects in the useEffect hook.

— Sudhir Yadav, Senior Software Engineer