Name: Unlocking the Power of Utility Functions and Custom Hooks in React
Rating: 3.2 (6810 reviews)
Author: trisogene

Diving into utility functions and custom hooks can transform your React projects, let's learn by watching some examples!

🛠 Utility functions

Can be used outside of react component
Provide reusability and reduce code length

// utils.js
export const capitalizeWords = (str) => {
  if (!str) return "";

  return str.replace(/\b\w/g, (char) => char.toUpperCase());
};

// App.js
import { capitalizeWords } from "./utils/capitalizeWords";

const App = () => {
  const title = "welcome to my website";
  const subTitle = "im the magical programmer";
  const description = "i have a magical refactor wand!";

  return (
    <div>
      <h1>{capitalizeWords(capitalizedTitle)}</h1>
      <h3>{capitalizeWords(subTitle)}</h3>
      <p>{capitalizeWords(description)}</p>
    </div>
  );
};

export default TitleComponent;

🪝 Custom Hooks without State

Can only be used inside react components

// useLogger.js
import { useEffect } from "react";

const useLogger = (message) => {
  useEffect(() => {
    console.log(message);
  }, [message]);
};

export default useLogger;

// App.js
import React from "react";
import useLogger from "./hooks/useLogger";

const App = () => {
  useLogger("LoggerComponent has mounted.");

  return (
    <div>
      <p>Check your console to see the log messages.</p>
    </div>
  );
};

export default App;

📦 Custom Hooks with State

State WILL NOT be shared between component that use the same custom hooks

// useFetchData.js
import { useState, useEffect } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetchData;

// App.js
import useFetchData from "./hooks/useFetchData";

const App = () => {
  const { data, loading, error } = useFetchData("https://api.example.com/data");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default App;

🔄 Custom Hooks with Selector/Context

Since we are using redux/context it will share the state between component that use the same hook
When the redux state used by the custom hook change all the component that use the custom hook will re-render

// useUser.js
import { useSelector } from "react-redux";

const useUser = () => {
  const user = useSelector((state) => state.user);
  const fullName = `${user.name} ${user.surname}`;

  return { ...user, fullName };
};

export default useUser;

// App.js
import useUserProfile from "./hooks/useUserProfile";

const App = () => {
  const { fullName, email } = useUser();

  return (
    <div>
      <h1>User Profile</h1>
      <p>Full Name: {fullName}</p>
      <p>Email: {email}</p>
    </div>
  );
};

export default UserProfile;

Conclusion

Utility functions and custom hooks can change your React development process for the better , making your code not just work better but also cleaner and more professional.

Thank you for reading this, i hope you enjoyed :D