Difference between React Custom Hooks and Regular Functions

user_4879275 0
Viewed 2052

What is the difference between a regular JS function, a helper/service function and React Custom Hook?

The similar answers I found didn't give any good examples, so I created this "service" function that I'll be using for example to list some users in an other Function Component :

import axios from "axios";

const useService = () => {
  const fields = [
    { key: "name", _style: { width: "40%" } },
    { key: "email", _style: { width: "40%" } },
  ];

  const getUsers = async () => {
    return await axios.get("http://127.0.0.1:8000/api/users");
  };

  const getBadge = (status) => {
    switch (status) {
      case "Active":
        return "success";
      case "Inactive":
        return "secondary";
      case "Pending":
        return "warning";
      case "Banned":
        return "danger";
      default:
        return "primary";
    }
  };

  return { fields, getUsers, getBadge };
};

export default useService;

I called it useService but I didn't actually use any React hooks here like useEffect, useState etc.. So is this function still a Custom Hook? Is it just a utility/helper function?

What is the difference exactly when we talk about Custom Hooks & Utility/Helper/Service/Normal Functions etc...

reactjs
3 Answers

So is this function still a Custom Hook? Is it just a utility/helper function?

No it isn't a hook.

Hooks use a stateful closure around the invocation of the function component to store state on behalf of that component instance. That closure is maintained by React.

I needed to read Deep dive: How do React hooks really work before I could wrap my head around hooks.

Recently I also came across:

user_61351680

So is this function still a Custom Hook? Is it just a utility/helper function?

It starts with use, so if it's used in a React component, React will recognize it as a valid custom hook - that is, hooks can be used inside of it. Even if it isn't using any hooks inside, it'll still qualify as one - but if you don't use any hooks inside, whether it qualifies as a hook itself or not doesn't matter, since the distinction would never be checked or have any impact.

To avoid confusion, I'd suggest only adding use to function names if the functions implement hooks and are meant to be custom hooks.

As the docs say:

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

You don't have to call other hooks inside your custom hook - but if you're aiming to make a custom hook in the first place, you probably want to be calling other hooks like useState. Otherwise, calling your custom utility function something else that doesn't start with use would probably make more sense - despite the fact that whether you do or don't doesn't directly impact how the code runs.

user_95152070

In fact, custom hook is just a function. It should prefix the function name with use. In most cases, the hooks provided by react are grouped together into functional units, but it is not mandatory. You can see some practical custom hooks for reference here.

https://usehooks.com/

user_142687390
Related