I believe the idea is that use is a common React naming convention to identify it's a hook. Whether it has use it front of it or not, it's still a hook, which can be verified by conditionally calling the hook, having React re-render the component, and verifying a "Rules of Hooks" error thrown.

For me, I had created a wrapper hook for fetching some data and trying to use it conditionally threw a rule of hook error. Even tho I am not using any react's built-in hook.

But isn't it an actual hook when you use any of the react's built-in hooks to build custom hook?

Renaming to getData instead of useData worked there

But isn't it an actual hook when you use any of the react's built-in hooks to build custom hook?

Yes, that's when it's a hook, and not just a function.

The docs explicitly say Hook names must start with use followed by a capital letter

Dan has explained in this video
https://youtu.be/dpw9EHDh2bM?t=2837

I have set up a codesandbox where I import that same online status hook imported with an alias without use, as well as I created a new simple hook without use that just counts up. The original online status is a hook, and can be verified by clicking the "change hook value to throw errors" button

https://codesandbox.io/p/devbox/h9xrll?file=%2Fsrc%2FApp.jsx%3A34%2C25

for my case, can anyone take a look>

sample function that uses word use instead of get

export const useData = async <T>(url: string) => {
    try {
        const res = await fetch(url, {
            next: {
                revalidate: 30,
            },
        });
        const json: T = await res.json();

        return json;
    } catch (error) {
        const { message } = getError(error);
        return message;
    }
};

when trying to use this conditinally will throw rule of hook issue:

    if (searchParams) {
        return "test";
    }
    
    const data = await useData<T>("uri");

    if (typeof data == "string") {
        return (
            <>
                data
            </>
        );
    }

    return (
        <>
            data
        </>
    );

but why. i aint using any react hook there?

to answer both the OP @Allegheny mound ant's question and @<Milind ツ />'s question:

1. React doesn't care about the function name. As far as the runtime is concerned, useWhatever() has the same effect as a() if they have the same content.

2. However, since hooks and components are treated differently compared to normal functions (and follow different rules e.g. hooks should not be called conditionally), React recommends a specific naming convention. Hooks should start with use and components should start with a capital letter. This is to avoid confusion, as it's universally understood that hooks start with use so your coworkers are gonna be very confused to see a non-hook starting with use.

3. The rule of hook error is an eslint error, not a runtime error. eslint simply reads the name of your functions, and if it starts with use then eslint treats it as a hook, and eslint will validate the use of that "hook" (regardless of whether it's an actual hook or not) by the rules of hook.

TL;DR: hooks don't have to start with use. But it's a good practice and a standard enforced by eslint. To avoid confusion reading the code later on, please please name your hooks with use and name other functions with something not starting with use

yep got it