Mastering Custom Hooks in React

Are you tired of writing the same code over and over once again in React? Do you need to take your React abilities to the next level? If so, then you’re in the right place! In this blog post, we’ll explore Custom Hooks in React and the way they let you write more efficient and reusable code.

Custom hooks are a really cool feature in React that can help you write cleaner, more modular code. When you create a custom hook, you are essentially creating a function that contains reusable logic which can be used across different components.

The great thing about custom hooks is that they allow you to encapsulate complex behavior in a way that is easy to understand and use. This can help simplify your code and make it more readable, which is really important if you’re working on a large project with lots of different components.

To create a custom hook in React, you simply create a function that uses the built-in useState, useEffect, and useContext hooks as needed. You can then export this function and use it in any component.

Why use Custom Hooks?

Custom Hooks in React offer three major benefits over standard library hooks: Reusability, readability, and testability. Custom hooks are normal JavaScript functions whose names start with “use” and they may call other hooks (built-in or custom).

The main reason why you should be using Custom hooks is to maintain the concept of DRY (Don’t Repeat Yourself) in your React apps. Custom React JS hooks offer reusability when a custom hook is created.

How to create Custom Hooks? 

You can create a custom hook by defining a function that starts with the word “use” and then calling other hooks inside it. You can then use this custom hook in your components.

Here’s an example of a custom hook that fetches data from an API:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { loading, data };
}

This custom hook uses the useState and useEffect hooks to fetch data from an API. It returns an object with two properties: loading and data. The loading property is true while the data is being fetched and false once the data has been fetched. The data property contains the fetched data.

Real-Life Examples:

1) Authentication Hook:

You can create a custom hook to manage the user authentication state, such as handling login and logout logic, storing and retrieving authentication tokens, and managing user profile data.

import { useState, useEffect } from 'react';

const useAuth = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    // Implement logic to check if user is already logged in, e.g. check for stored token
    const storedToken = localStorage.getItem('token');
    if (storedToken) {
      setToken(storedToken);
    }
  }, []);

  const login = (username, password) => {
    // Implement login logic, e.g. make API call to authenticate user
    setToken(token);
    localStorage.setItem('token', token);
  };

  const logout = () => {
    // Implement logout logic, e.g. clear authentication token and user data
    setToken(null);
    localStorage.removeItem('token');
  };

  return { token, login, logout };
};

export default useAuth;

This hook uses the useState hook to manage the token state, and the useEffect hook to initialize the token from local storage. The login and logout functions are used to set and remove the token from local storage respectively. This hook can be used in any component that needs to handle authentication logic.

2) Form Validation Hook:

You can create a custom hook to manage the form validation state, such as handling form input changes, validating input values, and managing the form submission state.

import { useState } from 'react';

const useFormValidation = (initialState, validateForm, onSubmit) => {
  const [formData, setFormData] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    // Handle form input changes, e.g. update formData state
   setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validateForm(formData));
    setIsSubmitting(true);
  };

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      onSubmit(formData);
      setIsSubmitting(false);
    }
  }, [errors, isSubmitting, formData, onSubmit]);

  return { formData, errors, handleChange, handleSubmit, isSubmitting };
};

export default useFormValidation;

This hook takes three arguments:

• initialState: An object representing the initial state of the form fields
• validateForm: A function that receives the current form data and returns an object with validation errors (if any)
• onSubmit: A function that will be called when the form is successfully submitted, with the form data as an argument

The hook uses the useState hook to create state variables for the form data, validation errors, and submission status. It also defines two functions: handleChange and handleSubmit.

handleChange is called whenever a form field changes, and it updates the formData state object with the new value.

handleSubmit is called when the form is submitted. It first calls the validateForm function to check for any errors, and updates the errors state object accordingly. If there are no errors, it calls the onSubmit function with the form data as an argument.

Finally, the hook uses the useEffect hook to listen for changes in the errors, isSubmitting, formData, and onSubmit state variables. When errors is empty (i.e. there are no validation errors) and isSubmitting is true, it calls the onSubmit function and sets isSubmitting back to false.

3) Theme Switcher Hook:

You can create a custom hook to manage the theme of your application, such as handling theme changes, persisting theme preferences, and applying styles based on the current theme.

import { useState, useEffect } from 'react';

const useThemeSwitcher = (defaultTheme) => {
  const [theme, setTheme] = useState(defaultTheme);

  const toggleTheme = () => {
    // Toggle theme logic, e.g. switch between 'light' and 'dark' theme
    setTheme((currentTheme) => currentTheme === 'light' ? 'dark' : 'light');
  };

  useEffect(() => {
    // Implement logic to persist theme preference, e.g. store in local storage
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return { theme, toggleTheme };
};

export default useThemeSwitcher;

This hook uses the useState hook to manage the theme state, and the useEffect hook to set the data-theme attribute on the html element whenever the theme changes. The toggleTheme function is called whenever the user clicks on a button to switch the theme. This hook can be used in any component that needs to switch between light and dark themes.

Best Practices for Creating Custom Hooks

When creating custom hooks in React, there are some best practices that can help ensure they are effective and easy to use. Here are a few tips to keep in mind:

1. Follow naming conventions: Custom hooks should be named with the prefix “use” to make it clear that they are hooks. For example, useFetch or useDarkMode.
2. Keep them small and focused: Custom hooks should be small and focused on a specific task or behavior. This makes them easier to reuse and understand.
3. Document them thoroughly: Custom hooks should be documented clearly, explaining what they do, what arguments they take, and what they return.
4. Test them thoroughly: Custom hooks should be tested thoroughly to ensure they work as expected in different scenarios.

Using External Libraries to Create Custom Hooks

There are many external libraries available for creating custom hooks in React. These libraries can make it easier to create custom hooks quickly and easily. Here are some popular libraries for creating custom hooks:

1. React-use: This library provides a collection of reusable hooks for common tasks like fetching data, managing form state, and handling browser events.
2. React-hook-form: This library provides hooks for managing complex form state and validation logic, making it easier to create and manage forms in React.
3. useSWR: This library provides hooks for fetching data from APIs with built-in caching and revalidation features.

Using external libraries to create custom hooks can save time and effort, and also help ensure that hooks are well-tested and thoroughly documented.

Conclusion

Custom hooks in React are like 🦸 superheroes for developers! They help us write cleaner, more reusable code and can save us a ton of time and effort. By encapsulating logic and stateful behavior into reusable functions, custom hooks can reduce code repetition, improve code organization, and make it easier to maintain and update React applications. 💻

With the help of external libraries 📚, creating custom hooks can be quick and easy. It’s important to follow best practices like using naming conventions, keeping hooks small and focused, and testing thoroughly 🧪.

As a React developer, it’s crucial to be familiar with custom hooks and to start experimenting with them in your own projects.

🚀 By creating effective and well-tested custom hooks, you can make your code more efficient and maintainable. So, don’t be afraid to dive in and start exploring the power of custom hooks in React! 💪

Thanks for reading our blog on using custom hooks in React! Remember to follow best practices and explore external libraries to make the most of custom hooks in your projects.

If you have any questions or feedback, leave a comment below. Happy coding! 😊👨‍💻👩‍💻