Complete Guide of React Hooks in 2025
COMPLETE GUIDE TO REACT HOOKS IN 2025:
React Hooks are unique functions added to React 16.8 that let developers to access state and other React capabilities in functional components. Before hooks, such functionality was exclusively available in class components. Hooks make it easier to develop cleaner and more reusable code by reducing the requirement for classes and allowing functional components to maintain state, execute side effects, and so on.
.
Why use React Hooks?
*Manage state without transforming functional components into class components.
*To simplify reasoning for side effects, lifecycle events, and state changes.
*To foster greater separation of concerns, create custom hooks.
Common React Hooks
useState: Control local state in a functional component.
useEffect: Handle side effects such as data retrieval or subscriptions.
useContext: Get React Context values without having to go down into the props.
useReducer: Use reducers to manage complex state logic.
useRef: Access DOM nodes or save values between renders.
useMemorize and useCallback: Improve performance by memorizing values and functions.
Commonly Used React Hooks With Syntax
1. useState
The useState hook adds state to functional components.
Syntax:
const [state, setState] = useState(initialState);Use Case:
Useful for managing state in functional components, such as form inputs, counters, or toggles.
Example: Track and update a counter value in a component.
2. useEffect
The useEffect hook manages side effects like API calls, subscriptions, and DOM manipulations.
Syntax:
useEffect(() => {
// Side effect logic
return () => {
// Cleanup logic
};
}, [dependencies]);Use Case:
Ideal for fetching data, setting up subscriptions, or updating the DOM after renders.
Example: Fetch data when a component mounts.
3. useContext
The useContext hook simplifies accessing context values.
Syntax:
const value = useContext(Context);Use Case:
Useful for consuming global data like themes or user information without prop drilling.
Example: Access a theme value from a context provider.
4. useReducer
The useReducer hook manages complex state logic, acting as an alternative to useState.
Syntax:
const [state, dispatch] = useReducer(reducer, initialState);Use Case:
Best for scenarios where state transitions are complex and involve multiple actions, such as managing a shopping cart.
Example: Handle increment and decrement actions in a counter.
5. useRef
The useRef hook provides a way to persist values across renders without triggering a re-render.
Syntax:
const refContainer = useRef(initialValue);Use Case:
Useful for accessing DOM elements or storing mutable values that don’t require re-rendering, like timers.
Example: Focus an input field programmatically.
6. useMemo
The useMemo hook optimizes performance by memoizing expensive computations.
Syntax:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Use Case:
Ideal for avoiding unnecessary recalculations of expensive computations during renders.
Example: Memoize a calculated value based on dependencies.
7. useCallback
The useCallback hook memoizes functions to avoid unnecessary re-creations.
Syntax:
const memoizedCallback = useCallback(() => {
// Function logic
}, [dependencies]);Use Case:
Best for preventing unnecessary re-renders of child components dependent on callback props.
Example: Memoize an event handler passed to a child component.
Custom Hooks
You can create custom hooks to encapsulate and reuse logic.
Syntax:
function useCustomHook(params) {
// Hook logic
return value;
}Use Case:
Ideal for sharing stateful logic between multiple components, such as fetching data or managing form state.
Example: Create a hook for fetching data from an API.
