Raja Muhammad Asher
Raja Muhammad Asher

Follow

Raja Muhammad Asher

Follow
React Custom Hooks

Photo by Lautaro Andreani on Unsplash

React Custom Hooks

Raja Muhammad Asher's photo
Raja Muhammad Asher
·Feb 11, 2023·

1 min read

React custom hooks are reusable functions in React that allow you to encapsulate and share logic between components. They follow a specific naming convention, starting with the word "use," and they can be used to abstract away complex state management, side effects, or any other behavior.

To create a custom hook, you can use existing React hooks or combine multiple hooks to build your logic. Custom hooks should return a value or an array of values that can be used by the component using the hook.

Here's an example of a custom hook that manages a counter:

import { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return [count, increment, decrement];
};

export default useCounter;

You can then use this custom hook in your components like this:

import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const [count, increment, decrement] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

By creating custom hooks, you can extract and reuse complex logic across multiple components, improving code reusability and keeping your components clean and focused on their specific responsibilities.

 
Share this