React Hooks have transformed how developers build components by allowing functional components to handle state, side effects, and more — without needing class components. Introduced in React 16.8, Hooks make React code cleaner, reusable, and easier to manage.
This guide covers the most used React Hooks with practical, real-time examples.
What Are React Hooks?
Hooks are built-in functions that let you use features like state, context, refs, and lifecycle methods inside functional components.
Why Use Hooks?
- Simplified State Logic: No need for complex class syntax.
- Cleaner Code: Better readability and maintainability.
- Code Reuse: Custom Hooks allow reusing logic across components.
1. useState – Manage Local State
The useState hook allows you to declare a piece of state in a functional component. It returns a state value and a function to update it. 
Explanation:
useState(0) initializes the count state variable to 0.
When the button is clicked, setCount updates the state, and react re-renders the component to reflect the new value.
2. useEffect – Handle Side Effects
useEffect is used to perform side effects like fetching data, updating the DOM, or setting up timers. It runs after every render or when specified dependencies change. 
Explanation:
This sets up a timer that updates seconds every 1 second.
The cleanup function ensures the timer is stopped when the component unmounts, avoiding memory leaks.
3. useContext – Access Global State
useContext allows a component to read values from a context without having to pass props through every level of the component tree. 
Use Case: useContext(MyContext) accesses the value provided by MyContext.Provider.
This is useful for global states like user info, themes, or languages shared across components.
4. useReducer – Complex State Logic
useReducer is an alternative to useState when state transitions are more complex. It follows the reducer pattern familiar from Redux. 
Explanation:
The reducer function defines how to update the state based on the action type.
This is ideal for managing state with multiple sub-values or complex update logic (e.g., forms or dynamic objects).
5. useCallback – Memoize Functions
useCallback returns a memoized version of a function so that it only changes when its dependencies change. This helps prevent unnecessary renders.
Explanation:
handleClick is memoized so that it doesn't get recreated on every render.
This is useful when passing functions to child components that use React.memo to avoid re-renders.
6. useMemo – Optimize Expensive Calculations
useMemo returns a memoized result of a computation, running the function only when dependencies change.
Explanation:
The multiplication logic runs only when quantity or price changes, not on every render.
This improves performance when dealing with complex calculations or large datasets.
7. useRef – Access DOM or Mutable Values
useRef lets you access a DOM element or store a mutable value that persists across renders without triggering re-renders.
Explanation:
inputRef.current gives direct access to the DOM element, allowing you to call. focus () on it.
It’s also useful for tracking previous values, animation frames, or intervals.
Conclusion
React Hooks offer a modern and powerful way to manage state, side effects, and shared logic in your React applications. They improve code readability, promote reusable patterns, and eliminate the need for class-based components. By mastering these hooks, you'll be able to write cleaner and more efficient React code.
If you're building real-time apps, large dashboards, or reusable UI libraries, hooks will be your best friend!