Custom hooks are JavaScript functions that use other hooks. They help share stateful logic that we may otherwise need to reuse throughout our application. For example, we may create custom hooks for commonly used effects such as form handling, animations, timers, etc.

As a convention, custom hooks should have names that start with use. Additionally, they should also follow the rules of hooks. Otherwise, they don’t need to have a specific design — the developer gets to decide what arguments it takes, and if it should return anything. Consider this example useToggle():

// useToggle.js
export const useToggle = (initialState = false) => {
  // Use the `initialState` argument to initialize the state
  const [state, setState] = useState(initialState);

  // Perform an animation each time the state changes
  useEffect(() => {
    performToggleAnimation(state);
  }, [state])

  // Create an easy-to-use toggle function
  const toggle = () => { setState(state => !state) }

  // Return the state value and the toggle function
  return [state, toggle]
}

In this example, we create a custom hook called useToggle() that:

• uses useState() to manage a toggle state value
• uses useEffect to run a toggling animation effect
• creates a toggle() function to interact with the setState() function

We can imagine this toggling feature being used in many places in our application. Instead of copy-pasting all of this logic each time we want to use it, we can just import and use useToggle()!

import { useToggle } from './useToggle';
const DarkMode = () => {
  // Get the state and toggle function from useToggle()
  // We'll use an initial value of true
  const [state, toggle] = useToggle(true);
  return (
    <button onClick={toggle}> 
      {state ? 'On' : 'Off'}
    </button>
  )
}

In this example, we create a DarkMode component using the useToggle() custom hook. useToggle() returns the toggle’s state value and a toggle() function for switching the toggle. Now, DarkMode can use these values, and the underlying logic that supports them, without having to write out all of the code again!

Custom hooks present a number of advantages when used properly in an application:

• They allow us to abstract our code, hide complex logic, as well as share stateful logic between multiple components.
• When using a custom hook in two or more components, all state and effects inside are fully isolated. This is true of useState() and useEffect() as well! This means that any data from one component won’t “bleed over” into another.
• By creating a separate file from which we export the custom hook, we can import it into any part of our application.

When used effectively, custom hooks make our code more reusable, readable, and faster to develop!