Custom Hooks

Custom Hooks are a powerful feature in React that allows you to extract and reuse stateful logic between components. They were introduced in React 16.8 as a way to simplify code and improve reusability. With Custom Hooks, you can create your own hooks to manage complex logic and share it across your application.

Basic Example

Let’s start with a simple example of a Custom Hook that fetches data from an API. We’ll create a useFetchData hook that takes a URL as an argument and returns the data and an error state.


import { useState, useEffect } from 'react';
 
const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, [url]);
 
  return { data, error };
};
 
const DataComponent = () => {
  const { data, error } = useFetchData('https://api.example.com/data');
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Data: {data}</div>;
};

In this example, we define the useFetchData hook, which uses the useState and useEffect hooks to fetch data from the API and manage the state. We then use this hook in the DataComponent to fetch and display the data.

Advanced Usage

Let’s take a look at a more complex example that demonstrates how to use Custom Hooks to manage a form with validation. We’ll create a useForm hook that takes an initial state and validation rules as arguments.


import { useState, useEffect } from 'react';
 
const useForm = (initialState, validationRules) => {
  const [state, setState] = useState(initialState);
  const [errors, setErrors] = useState({});
 
  const handleChange = (event) => {
    const { name, value } = event.target;
    setState((prevState) => ({ ...prevState, [name]: value }));
  };
 
  const validate = () => {
    const newErrors = {};
    Object.keys(validationRules).forEach((key) => {
      const rule = validationRules[key];
      if (!rule(state[key])) {
        newErrors[key] = 'Invalid input';
      }
    });
    setErrors(newErrors);
  };
 
  return { state, errors, handleChange, validate };
};
 
const FormComponent = () => {
  const { state, errors, handleChange, validate } = useForm(
    { name: '', email: '' },
    {
      name: (value) => value.length > 0,
      email: (value) => value.includes('@'),
    }
  );
 
  const handleSubmit = (event) => {
    event.preventDefault();
    validate();
    if (Object.keys(errors).length === 0) {
      // Submit the form
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={state.name} onChange={handleChange} />
        {errors.name && <div>{errors.name}</div>}
      </label>
      <label>
        Email:
        <input type="email" name="email" value={state.email} onChange={handleChange} />
        {errors.email && <div>{errors.email}</div>}
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

In this example, we define the useForm hook, which manages the form state and validation. We then use this hook in the FormComponent to create a form with validation.

Best Practices

When creating Custom Hooks, keep the following best practices in mind:

Keep your hooks simple and focused on a specific task.
Use descriptive names for your hooks and variables.
Avoid complex logic and side effects in your hooks.
Test your hooks thoroughly to ensure they work as expected.

Key Takeaways

Custom Hooks allow you to extract and reuse stateful logic between components.
Use the useState and useEffect hooks to manage state and side effects in your Custom Hooks.
Keep your hooks simple and focused on a specific task.
Test your hooks thoroughly to ensure they work as expected.