no-unnecessary-use-prefix

Full Name in eslint-plugin-react-x

react-x/no-unnecessary-use-prefix

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-unnecessary-use-prefix

Presets

recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

If your function doesn't call any Hooks, avoid the use prefix and write it as a regular function. This allows the function to be called anywhere, including in conditions. You should only use the use prefix when the function calls at least one Hook inside it.

Technically, React does not enforce this. In principle, you could make a Hook that doesn't call other Hooks, but this is often confusing and limiting. However, there may be rare cases where it is helpful, such as when you plan to add Hook calls in the future. In that case, naming it with the use prefix makes sense so that components won't be able to call it conditionally once Hooks are added. If you don't plan to use Hooks inside it (now or later), don't make it a Hook.

Examples

Using the use prefix without calling any Hooks

Functions with the use prefix are treated as Hooks and must follow Hook rules (for example, they cannot be called conditionally). If a function doesn't call any Hooks, remove the use prefix and make it a regular function.

// Problem: The function doesn't call any Hooks but uses the use prefix
function useSorted(items) {
  return items.slice().sort();
}

// Recommended: Convert it to a regular function so it can be called anywhere
function getSorted(items) {
  return items.slice().sort();
}

As a regular function, it can safely be called inside conditional statements:

// OK: Regular functions allow conditional calls
function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    displayedItems = getSorted(items);
  }
  // ...
}

Not using Hooks now, but planning to add them later

If a function doesn't currently call any Hooks but you plan to add Hook calls later, you can keep the use prefix. It's recommended to add a TODO comment explaining your intent to avoid false positives.

// Problem: No Hooks are used and there is no comment explaining future plans
function useAuth() {
  return TEST_USER;
}

// Recommended: Add an explicit TODO explaining it will be replaced with a Hook later
function useAuth() {
  // TODO: Replace with this line when authentication is implemented:
  // return useContext(Auth);
  return TEST_USER;
}

The function does call other Hooks

When a function calls Hooks internally, using the use prefix is correct and necessary.

// Recommended: Uses useContext, which follows Hook naming conventions
function useAuth() {
  return useContext(Auth);
}

MDX component factory functions

Some framework conventions (such as MDX) require factory functions with the use prefix. These functions are acceptable even if they don't call any Hooks.

// OK: Component mapping function that follows MDX conventions
export function useMDXComponents(components) {
  return {
    ...components,
  };
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: Should all functions called during rendering start with the use prefix? (the deep dive)

See Also

• react-x/rules-of-hooks
  Enforces the Rules of Hooks.