Creating and Using React Custom Hooks 🚀

Hello, fellow React explorers! Welcome to the exciting journey of creating and using React custom hooks! 🌈 In this step-by-step guide, we'll explore what custom hooks are, understand the basic syntax, and walk through creating and using two practical examples. Buckle up, and let's dive into the world of custom hooks! 🚀✨

Hooks in React

Before we get into the custom magic, let's quickly understand what a "hook" is in React. A hook is like a helper function that brings state and other React features into functional components. It's React's way of making functional components as powerful as class components.

What is a Custom Hook?

Now, picture this: a custom hook is your personal wizardry! 🧙‍♂️ It's a function that starts with "use" and can call other hooks. Custom hooks allow you to bundle up logic, making it reusable across different components. They keep your code clean and organized and your components happy.

Basic Syntax

Let's break down the basic syntax of a custom hook.

import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  // State and logic here
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // Side effects or cleanup here
    return () => {
      // Cleanup code if needed
    };
  }, [dependencies]);

  // Return whatever you want to expose
  return {
    value,
    setValue,
    // ... other values or functions
  };
}

export default useCustomHook;

Example 1. Custom Counter Hook

Let's create a custom hook for a simple counter.

import { useState } from 'react';

const useCounter = (initialCount)=> {
  const [count, setCount] = useState(initialCount);

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

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

  return {
    count,
    increment,
    decrement,
  };
}

export default useCounter;

Using the Custom Counter Hook

Now, you can use this hook in any component.

import useCounter from './useCounter';

const App = () => {
  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 App;

Example 2. Custom Fetch Hook

Now, let's create a custom hook for fetching data.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetch;

Using the Custom Fetch Hook

Now, you can use this hook in any component.

import useFetch from './useFetch';

const DataComponent = () => {
  const { data, loading } = useFetch('https://api.example.com/data');

  return (
    <div>
      {loading ? <p>Loading...</p> : <p>Data: {data}</p>}
    </div>
  );
}

export default DataComponent;

Example 3. Custom Like Hook

Let's create a custom hook for a simple "like" functionality.

import { useState } from 'react';

const useLikes = (initialLikes = 0) => {
  const [likes, setLikes] = useState(initialLikes);

  const like = () => {
    setLikes(likes + 1);
  };

  const dislike = () => {
    setLikes(likes - 1);
  };

  return {
    likes,
    like,
    dislike,
  };
};

export default useLikes;

Using the Custom Like Hook

Now, you can use this hook in any component.

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

const LikeButton = () => {
  const { likes, like, dislike } = useLikes();

  return (
    <div>
      <p>Likes: {likes}</p>
      <button onClick={like}>Like</button>
      <button onClick={dislike}>Dislike</button>
    </div>
  );
};

export default LikeButton;

Now, you can use the LikeButton component in your main application.

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

const App = () => {
  return (
    <div>
      <h1>React Like Button Example</h1>
      <LikeButton />
    </div>
  );
};

export default App;

Conclusion

Congratulations! You've successfully created and used custom hooks in React. This powerful concept allows you to encapsulate logic, making your components more modular and efficient. Continue exploring custom hooks to streamline your React development journey! 🚀💡 Happy coding!