When to Use Each  React Custom Hooks vs. Helper Functions

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>
  );
};

3.Abstracting Reusable Logic: Custom hooks are ideal for abstracting logic that can be reused across multiple components.

// Custom Hook: useWindowSize
const useWindowSize = () => {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Component using useWindowSize
const WindowSizeDisplay = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
};

When to Use Helper Functions 🛠️

1. Purely Functional Logic: When your logic doesn’t require React’s state or lifecycle features, helper functions are the way to go.

// Helper Function: calculateSum
const calculateSum = (a, b) => {
  return a + b;
};

// Usage in a component
const SumComponent = ({ num1, num2 }) => {
  const sum = calculateSum(num1, num2);

  return <p>Sum: {sum}</p>;
};

2.Utility Functions: Helper functions are great for utility tasks such as formatting, calculations, and data manipulation.

// Helper Function: formatCurrency
const formatCurrency = (amount) => {
  return `$${amount.toFixed(2)}`;
};

// Usage in a component
const PriceDisplay = ({ price }) => {
  return <p>Price: {formatCurrency(price)}</p>;
};

3.Avoiding Overhead: When you need lightweight, one-off logic without the overhead of state or side effects, opt for a helper function

// Helper Function: generateRandomNumber
const generateRandomNumber = (max) => {
  return Math.floor(Math.random() * max);
};

// Usage in a component
const RandomNumberDisplay = () => {
  const randomNumber = generateRandomNumber(100);

  return <p>Random Number: {randomNumber}</p>;
};

Combining Custom Hooks and Helper Functions 🤝

There are scenarios where combining both can enhance your code’s clarity and maintainability.

Example: Search Component

1. Custom Hook for State Management

// Custom Hook: useSearch
const useSearch = (initialQuery) => {
  const [query, setQuery] = useState(initialQuery);
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const data = await fetchResults(query); // Assume fetchResults is a helper function
    setResults(data);
  };

  return { query, setQuery, results, handleSearch };
};

2.Helper Function for Data Fetching

// Helper Function: fetchResults
const fetchResults = async (query) => {
  const response = await fetch(`https://api.example.com/search?q=${query}`);
  const data = await response.json();
  return data.results;
};

3.Component Using Both

// Component using useSearch and fetchResults
const SearchComponent = () => {
  const { query, setQuery, results, handleSearch } = useSearch('');

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

Conclusion

Understanding when to use React custom hooks versus helper functions can significantly improve your development workflow. Custom hooks excel at managing stateful logic and side effects, while helper functions are ideal for pure, reusable logic. By leveraging both appropriately, you can create more maintainable, efficient, and readable code. Happy coding! 🚀💻