Custom Hook

Custom Hooks are a powerful feature introduced in React 16.8 that allow developers to extract and reuse stateful logic across multiple components, promoting cleaner and more maintainable code.

What Are Custom Hooks?

A Custom Hook is essentially a JavaScript function whose name starts with "use" and that may call other Hooks. This naming convention is crucial because it enables React to identify these functions as Hooks, ensuring that the rules of Hooks are enforced.

Key Characteristics:

• Reusability: Encapsulate stateful logic that can be reused across different components.
• Composition: Combine multiple Hooks to create more complex functionality.
• Isolation: Encapsulate logic, making components cleaner and more focused on presentation.

Creating a Custom Hook: Example

Let's create a simple custom Hook called useCounter, which manages a counter state with increment and decrement functionalities.

1. Define the Custom Hook:

// useCounter.js

import { useState } from 'react';

function useCounter(initialValue = 0) {

const [count, setCount] = useState(initialValue);

const increment = () => setCount(prevCount => prevCount + 1);

const decrement = () => setCount(prevCount => prevCount - 1);

return { count, increment, decrement };

}

export default useCounter;

In this Hook:

• useState initializes the count state.
• increment and decrement functions update the count.
• The Hook returns an object containing the current count and the two functions.

2. Utilize the Custom Hook in a Component:

// CounterComponent.js

import React from 'react';

import useCounter from './useCounter';

function CounterComponent() {

const { count, increment, decrement } = useCounter(10); // Starting count at 10

return (

<div>

<h1>Count: {count}</h1>

<button onClick={increment}>Increment</button>

<button onClick={decrement}>Decrement</button>

</div>

);

}

export default CounterComponent;

Here:

• useCounter is invoked with an initial value of 10.
• The component renders the current count and buttons to modify it.

Benefits of Using Custom Hooks

• Code Reusability: Encapsulate logic that can be reused across multiple components.
• Separation of Concerns: Separate business logic from UI logic, making components cleaner.
• Testing: Isolated logic in Hooks can be tested independently from components.