Custom Hook

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.


要查看或添加评论,请登录

Sridhar Raj P的更多文章

  • useReducer() Hook in React JS – Example & Explanation

    useReducer() Hook in React JS – Example & Explanation

    Hook in React JS – Example & Explanation The hook is an alternative to for managing complex state logic in React…

  • useReducer() Hook in React JS – Example & Explanation

    useReducer() Hook in React JS – Example & Explanation

    Hook in React JS – Example & Explanation The hook is an alternative to for managing complex state logic in React…

  • Passing Data from Child to Parent Component in React JS using Hooks

    Passing Data from Child to Parent Component in React JS using Hooks

    Passing Data from Child to Parent Component in React JS using Hooks In React, data flows from parent to child via…

  • Lists and Keys in React JS

    Lists and Keys in React JS

    In React, we use lists to render multiple components dynamically, and keys help React identify which items have…

    1 条评论
  • Object State Management

    Object State Management

    Object State Management Managing object state with in React is common when handling complex data structures like user…

  • useState Example

    useState Example

    Here are examples of using the hook in React functional components. Each example demonstrates a different use case.

  • Examples of using the useState hook in React Functional Components

    Examples of using the useState hook in React Functional Components

    Examples of using the useState hook in React Functional Components 1. Counter Example - ? Basic counter with increment…

  • Array, Array of Objects Values using Functional Component

    Array, Array of Objects Values using Functional Component

    Example 1: Displaying an Array of Strings import React from react; const FruitsList = () = { const fruits = [Apple…

    1 条评论
  • Hooks

    Hooks

    What are Hooks in React JS? Hooks in React allow functional components to manage state and side effects, which were…

  • State in Functional Components (useState Hook)

    State in Functional Components (useState Hook)

    State in Functional Components (useState Hook) In functional components, state is managed using the hook instead of and…