10.5. Custom Hooks

Introduction Time to dive into Custom Hooks in React! Custom Hooks let you extract component logic into reusable functions. Follow along as Geek and Gal explore Custom Hooks in a fun and engaging way.

Custom Hooks are super useful for sharing logic across components!

That sounds cool! How do you create a Custom Hook?

Creating a Custom Hook is simple! Just make a function that starts with "use" and use other Hooks inside it!

Creating a Custom Hook

Here's an example of a Custom Hook that manages the state of a counter:

import { useState } from 'react';

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

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

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

  return [count, increment, decrement];
}

So you just create a function that starts with "use" and use other Hooks inside it! That's easy!

Exactly! And when you want to use your Custom Hook, just call it like any other Hook in your component!

Using a Custom Hook

Here's an example of a component that uses our useCounter Custom Hook:

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

function Counter() {
  const [count, increment, decrement] = useCounter(0);

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

Oh, I see! You just call your Custom Hook like any other Hook, and it returns the values and functions you need!

You got it! Custom Hooks make it easy to share and reuse logic across your components!

Conclusion Custom Hooks are a powerful feature in React that allow you to extract and share logic across components. By creating functions that start with “use” and using other Hooks inside them, you can create Custom Hooks to make your code more reusable and modular. Happy coding with Custom Hooks! 😃