React Custom Hooks

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.

Raja Muhammad Asher

Raja Muhammad Asher

React Custom Hooks