Cindy Muthoni's Blog
When to Use Each React Custom Hooks vs. Helper Functions

When to Use Each React Custom Hooks vs. Helper Functions

Cindy Muthoni's photo
Cindy Muthoni
·

2 min read

In the world of React development, understanding when to use custom hooks versus helper functions can be a game-changer for the maintainability and efficiency of your code. Both have their unique strengths and appropriate use cases. Let’s dive into the details and explore when to leverage each, complete with code examples and creative flair! 🎨✨

Understanding the Basics

Custom Hooks

React custom hooks are functions that allow you to extract and reuse stateful logic across components. They follow the “use” prefix convention and utilize React’s hooks (e.g.,’ useState, useEffect’) internally.

Helper Functions

Helper functions are plain JavaScript functions that perform specific tasks or calculations. They don’t inherently manage state or side effects and can be used across your application wherever needed.

When to Use Custom Hooks 🪝

1 State Management Across Components: Custom hooks are perfect for sharing stateful logic between components.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

// Component using useFetch
const DataDisplay = ({ url }) => {
  const { data, loading } = useFetch(url);

  if (loading) return <p>Loading...</p>;
  return <div>{JSON.stringify(data)}</div>;
};

2.Encapsulating Complex Logic: When dealing with complex state logic or side effects, custom hooks help in encapsulating that complexity.

// Custom Hook: useForm
const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  return { values, handleChange };
};

// Component using useForm
const LoginForm = () => {
  const { values, handleChange } = useForm({ username: '', password: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={values.username} onChange={handleChange} />
      <input name="password" value={values.password} onChange={handleChange} />
      <button type="submit">Login</button>
    </form>
  );
};

Read More!

react hooks