Custom hooks in React are a way to encapsulate reusable logic and stateful behavior into functions that can be used across multiple components.

They allow us to abstract away complex logic and share it easily between different parts of our application. These are regular JavaScript functions which follow specific conventions.

To create a custom hook, we generally accomplish the following -

• Create a new JavaScript file for our custom hook. The file can have any name, but it's a good practice to prefix it with "use" to indicate that it's a custom hook.

• Inside the file, import any necessary hooks or modules from React.

• Define the custom hook function. The function can use any of the existing React hooks, including other custom hooks.

• Return the values and functions that other components can use.

The example of a custom hook that manages a simple toggle state is mentioned below -

// useToggle.js
import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue((prevValue) => !prevValue);
  };

  return [value, toggle];
}

export default useToggle;

Custom hooks are an excellent way to promote code reusability and maintain a clean separation of concerns in the React application. When we create custom hooks, we can extract complex logic from components, making them more focused on rendering and presentation.