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.