# react/jsx-uses-vars

> Count a variable as used when it is the name of a JSX tag

`<Header />` reads the variable `Header`. ESLint 9 and older don't count a tag name in a JavaScript file as a use, so `no-unused-vars` reports every component that's only used in JSX.

This rule reports nothing itself. While it's on, a tag's name counts as a use of that variable. In `<Menu.Item />` that's `Menu`. Tags that start with a lowercase letter, such as `<div>`, are HTML elements and don't count as a use of anything.

{/* never reports */}

## Examples

With this rule on, `no-unused-vars` doesn't report `Header` or `Menu` here:

{/* good */}
```jsx
import { Header } from "./header";
import * as Menu from "./menu";

export function Page() {
  return (
    <Header>
      <Menu.Item />
    </Header>
  );
}
```

## When not to use it

You only need it if your project has an ESLint config and ESLint 9 or older installed. With ESLint 10, an oxlint config, or `bunfig.toml` alone, tag names count as uses without it.