18

Lets' create a very simple hook useDouble that returns the double of a number:

export default function useDouble(nb) {
  return nb * 2;
}

The documentation (https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) reads:

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

But if I change useDouble to double, it still works. I even tried to call other hooks from the double hook, and it still works.

Demo: https://codesandbox.io/s/laughing-gareth-usb8g?file=/src/components/WithUseDouble.js

So my question is: is naming hooks useXxxxx just a convention, or can it really break something somehow? And if it can, could you show an example?

Thanks

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
Vincent
  • 3,945
  • 3
  • 13
  • 25

2 Answers2

40

React hook definition according to React docs:

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

A perfect definition of a custom hook would be (notice the removal of "use" prefix and "may"):

A custom Hook is a JavaScript function that calls other Hooks.

So we could distinguish between helper functions and custom hooks.

But, we can't tell if certain functions are actually using hooks (we do know in runtime). Thats why we use static code analyzing tools (like eslint) where we analyze text (lexical) and not meaning (semantics).

This convention guarantees that you can always look at a component and know where its state, Effects, and other React features might “hide”. (Reusing Logic with Custom Hooks)

Should all functions called during rendering start with the use prefix? No. Functions that don’t call Hooks don’t need to be Hooks. (Reusing Logic with Custom Hooks)

... this convention is very important. Without it, we wouldn’t be able to automatically check for violations of Rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it. (Legacy docs)

Hence:

// #1 a function
// CAN'T BREAK ANYTHING
function double(nb) {
  return nb * 2;
}

// #2 Still a function, does not use hooks
// CAN'T BREAK ANYTHING
function useDouble(nb) {
  return nb * 2;
}

// #3 a custom hook because hooks are used 
// CAN BREAK, RULES OF HOOKS
function useDouble(nb) {
  const [state, setState] = useState(nb);
  const doubleState = (n) => setState(n*2);
  return [state,doubleState];
}

Is naming hooks useXxxxx just a convention.

Yes, to help static analyzer to warn for errors.

Can it really break something somehow?

Example #2 can't break your application since it just a "helper function" that not violating Rules of Hooks, although there will be a warning.

Could you show an example?

// #2 from above
function useDouble(nb) { return nb * 2; }

// <WithUseDouble/>
function WithUseDouble() {
  // A warning violating Rules of Hooks 
  // but useDouble is actually a "helper function" with "wrong" naming
  // WON'T break anything
  if (true) {
    return <h1>8 times 2 equals {useDouble(8)} (with useDouble hook)</h1>
  }
  
  return null;
}
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • 8
    The only reason this answer doesn't have like a million upvotes is because most of us devs don't care about the naming; we just use "use". This answer should be a model of how to write the perfect response on SO. – Rap Oct 27 '21 at 13:47
  • `if (true)` and `return null;` look kind of redundant in that example... – Thomas Soos Oct 21 '22 at 14:51
  • It's not clear why "we can't tell if certain functions are actually using hooks". As it seems, it's technically possible to do code analysis from 'use-' prefixed helper to see if it is actually using React basic or custom hooks. Is there any way to set eslint to distinguish 'use-' prefixed helpers and actual React custom hooks? – setec Jul 13 '23 at 14:01
  • You have the example of "useDouble", the linter warns its a hook, but it isn't. – Dennis Vash Jul 17 '23 at 08:57
8

Do I have to name my custom Hooks starting with “use”? Please do. This convention is very important. Without it, we wouldn’t be able to automatically check for violations of rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it

From reactjs/docs.

And in large components that use several functions, the "use" prefix also helps in easily identifying if a function is a custom hook.

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32