2

why do we have to use use before custom hook. Is this just a naming convention or there is something that React is doing internally to do something special?

CODESANDBOX LINK

I've created two custom hooks useCustomHook and customHook both are defined below. One with prefix use and other without. but while using useState hook in customHook eslint gives an error as:

enter image description here

why It is giving an error. Since the custom hook is just a normal function in which we can use other hooks in it. Below is the rule from React docs.

Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it’s just like a normal function. Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

useCustomHook: with use Prefix

import { useState } from "react";

export default function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  function changeValue() {
    setValue((v) => v + 100);
  }

  return [value, changeValue];
}

customHook: without use Prefix

import { useState } from "react";

export default function customHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  function changeValue() {
    setValue((v) => v + 100);
  }

  return [value, changeValue];
}
Phil
  • 157,677
  • 23
  • 242
  • 245
DecPK
  • 24,537
  • 6
  • 26
  • 42
  • Your two code blocks are identical. Did you mean to have something different in the latter? – Phil Jul 04 '22 at 03:59
  • 2
    Eslint is not React. The warning was generated due to a rule written by a person who presumably has the **opinion** that all hooks start with the word "use". However it is just **his/her** opinion. You yourself may have a different opinion and as such you may either disable or rewrite that specific Eslint rule. React itself probably does not care about the naming of hooks. However I personally agree with the Eslint rule. If I see a function that does not start with the word "use" I will not think it is a hook – slebetman Jul 04 '22 at 04:03
  • @Phil question updated – DecPK Jul 04 '22 at 04:08

3 Answers3

4

It's just a naming convention.

The docs are very slightly misleading though:

In other words, it’s just like a normal function.

It's like a normal function, but with the extra baggage that, unlike in a normal function, inside a function meant as a custom hook, you can call other hooks inside it - and if you try to call it as a plain function outside the context of React, and it uses hooks inside, it'll fail.

The part you quoted shows why the naming convention is the way it is:

Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

This way, it'll be much more obvious at a glance that it's a hook-invoking component that must follow the rules, rather than one that doesn't invoke hooks.

Imagine

const MyComponent = ({ checkThing }) => {
  if (checkThing) {
    verifyThing();
  }

The above would be invalid code if verifyThing was a custom hook. If it was renamed to follow the conventions that the docs and the linter recommend:

const MyComponent = ({ checkThing }) => {
  if (checkThing) {
    useVerifyThing();
  }

it becomes obvious that there's a problem, without even having to know anything about what verifyThing / useVerifyMean means or does. That's the main benefit of prefixing custom hooks with use - that tells you and other users of the hook that it should always be called unconditionally in the main body of a functional component, which is more useful than messing it up somewhere and accidentally calling it elsewhere and having to work backwards from a runtime error to fix it.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Well, the docs are misleading perhaps on some points. It is clear that the naming convention should be included in the rules of hooks to be clear. However, in chapter 6 "Building your own hooks", the docs are very clear and state that: "A custom Hook is a JavaScript function whose name starts with 'use' and that may call other Hooks.". – Gie Spaepen Jul 04 '22 at 14:14
2

This is just an ESLint rule from the eslint-plugin-react-hooks plugin.

The rule, like all linter (static analysis) rules is a guide to help you produce maintainable, understandable code. It is not enforced at compilation or runtime.

For example, were you to simply disable the linter, you'd find your application runs without error

const [value, setValue] = useState(initialValue); // eslint-disable-line react-hooks/rules-of-hooks
Phil
  • 157,677
  • 23
  • 242
  • 245
  • It is not just a ESLint rule. Actually ESLint will give an warning even if you name a trivial helper as 'useHelper', even if this helper does not have any React hooks inside. And it will work in the application, but ESLint will not recognize it, because it treats anything named as 'use..." as a React hook. See https://stackoverflow.com/a/66151737/753621 – setec Jul 13 '23 at 14:07
-1

this is a rule like other languages for example in rust or c++ we have to use semikolon in end of code so this is a react hook and when we use that must start with capitale letter but second one is javascript function and haven't that rule

sina soleymanzadeh
  • 26
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 05 '22 at 11:12