bun/react-no-namespace-hooks

React.useState() and useState() are the same function. With both spellings in one project, the same code looks different from file to file. This rule keeps the short one.

It checks React from import React from "react" and from import * as React from "react".

--fix removes React. and imports the hook by name from "react".

Configure

Off by default. To turn it on:

[lint.rules]
"bun/react-no-namespace-hooks" = "error" # or "warn"

Examples

Reported:

import React from "react";

function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    document.title = `${count} clicks`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Not reported:

import { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `${count} clicks`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Only hooks are reported. Other members of React are allowed:

import * as React from "react";

const Settings = React.lazy(() => import("./Settings"));
const Row = React.memo(({ label }) => <li>{label}</li>);