@codelaw/rules-react 0.0.0-stage → 0.1.0

package/rules/react/no-find-dom-node.md

@@ -0,0 +1,72 @@
+---
+id: react/no-find-dom-node
+title: "No findDOMNode"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "a ref has to be attached to the right element by hand"
+stability: preview
+ported_from: [eslint-plugin-react/no-find-dom-node]
+since: 0.1.0
+---
+
+Code doesn't call `findDOMNode`.
+
+**Why:** `findDOMNode` breaks component abstraction, doesn't work with function components, and is
+removed in React 19.
+
+```codelaw
+match:
+  any:
+    - pattern: findDOMNode($$$A)
+    - pattern: $R.findDOMNode($$$A)
+message: "`findDOMNode` is deprecated; use a ref"
+```
+
+## How to fix
+
+1. Attach a ref to the element you need (`ref={this.ref}`).
+2. Read `ref.current` instead of calling `findDOMNode`.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const el = ReactDOM.findDOMNode(this);
+```
+
+#### Do
+
+```js
+const el = this.ref.current;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const el = ReactDOM.findDOMNode(this);
+```
+
+#### Do
+
+```jsx
+const el = this.ref.current;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const el = ReactDOM.findDOMNode(this);
+```
+
+#### Do
+
+```tsx
+const el = this.ref.current;
+```

package/rules/react/no-is-mounted.md

@@ -0,0 +1,109 @@
+---
+id: react/no-is-mounted
+title: "No this.isMounted()"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "the callback has to be cancelled where it starts"
+stability: preview
+ported_from: [eslint-plugin-react/no-is-mounted]
+since: 0.1.0
+---
+
+Code doesn't call `this.isMounted()`.
+
+**Why:** `isMounted` hides leaks: a callback that outlives the component should be cancelled
+instead.
+
+```codelaw
+match:
+  pattern: this.isMounted()
+message: "`isMounted` is an anti-pattern and gone from ES6 classes"
+```
+
+## How to fix
+
+1. Cancel pending work in `componentWillUnmount`.
+2. Remove the `isMounted` check.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+class A extends React.Component {
+  done() {
+    if (this.isMounted()) {
+      this.setState({ ok: true });
+    }
+  }
+}
+```
+
+#### Do
+
+```js
+class A extends React.Component {
+  componentWillUnmount() {
+    this.request.cancel();
+  }
+  done() {
+    this.setState({ ok: true });
+  }
+}
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+class A extends React.Component {
+  done() {
+    if (this.isMounted()) {
+      this.setState({ ok: true });
+    }
+  }
+}
+```
+
+#### Do
+
+```jsx
+class A extends React.Component {
+  componentWillUnmount() {
+    this.request.cancel();
+  }
+  done() {
+    this.setState({ ok: true });
+  }
+}
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+class A extends React.Component {
+  done() {
+    if (this.isMounted()) {
+      this.setState({ ok: true });
+    }
+  }
+}
+```
+
+#### Do
+
+```tsx
+class A extends React.Component {
+  componentWillUnmount() {
+    this.request.cancel();
+  }
+  done() {
+    this.setState({ ok: true });
+  }
+}
+```

package/rules/react/no-render-return-value.md

@@ -0,0 +1,75 @@
+---
+id: react/no-render-return-value
+title: "The return value of ReactDOM.render is not used"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "code that used the instance needs a ref instead"
+stability: preview
+ported_from: [eslint-plugin-react/no-render-return-value]
+since: 0.1.0
+---
+
+The value `ReactDOM.render` returns is not stored, returned or passed on.
+
+**Why:** It's a legacy handle that is `null` in some cases and gone in newer APIs.
+
+```codelaw
+match:
+  pattern: ReactDOM.render($$$A)
+  inside:
+    stopBy: neighbor
+    any:
+      - kind: variable_declarator
+      - kind: return_statement
+      - kind: assignment_expression
+      - kind: arguments
+message: "Don't use what `ReactDOM.render` returns; use a ref"
+```
+
+## How to fix
+
+1. Pass a ref to the root element and use it instead of the return value.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const app = ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```js
+ReactDOM.render(<App ref={appRef} />, root);
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const app = ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```jsx
+ReactDOM.render(<App ref={appRef} />, root);
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const app = ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```tsx
+ReactDOM.render(<App ref={appRef} />, root);
+```

package/rules/react/no-string-refs.md

@@ -0,0 +1,72 @@
+---
+id: react/no-string-refs
+title: "No string refs"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "the ref object has to be created where the component can reach it"
+stability: preview
+ported_from: [eslint-plugin-react/no-string-refs]
+since: 0.1.0
+---
+
+Refs are objects or callbacks, never strings (`ref="input"`, `this.refs.input`).
+
+**Why:** String refs are legacy, slow, and removed in React 19.
+
+```codelaw
+match:
+  any:
+    - kind: jsx_attribute
+      regex: ^ref=["']
+    - pattern: this.refs.$X
+message: "String refs are legacy; use `useRef`, `createRef` or a callback ref"
+```
+
+## How to fix
+
+1. Create a ref with `useRef` or `createRef`.
+2. Pass it as `ref={…}` and read `.current`.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <input ref="name" />;
+```
+
+#### Do
+
+```js
+const a = <input ref={nameRef} />;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <input ref="name" />;
+```
+
+#### Do
+
+```jsx
+const a = <input ref={nameRef} />;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <input ref="name" />;
+```
+
+#### Do
+
+```tsx
+const a = <input ref={nameRef} />;
+```

package/rules/react/no-unescaped-entities.md

@@ -0,0 +1,69 @@
+---
+id: react/no-unescaped-entities
+title: "No unescaped >, \", ' or } in JSX text"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "the right escape depends on the character and the author's style"
+stability: preview
+ported_from: [eslint-plugin-react/no-unescaped-entities]
+since: 0.1.0
+---
+
+JSX text doesn't contain `>`, `"`, `'` or `}` unescaped.
+
+**Why:** These characters are easy to misread as markup or code, and a stray `}` is usually a typo.
+
+```codelaw
+match:
+  kind: jsx_text
+  regex: '[>"''}]'
+message: "Escape this character in JSX text, e.g. `'` or `{\"'\"}`"
+```
+
+## How to fix
+
+1. Use an HTML entity (`'`, `"`, `>`) or a string expression (`{"'"}`).
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <p>Don't stop</p>;
+```
+
+#### Do
+
+```js
+const a = <p>Don&apos;t stop</p>;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <p>Don't stop</p>;
+```
+
+#### Do
+
+```jsx
+const a = <p>Don&apos;t stop</p>;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <p>Don't stop</p>;
+```
+
+#### Do
+
+```tsx
+const a = <p>Don&apos;t stop</p>;
+```

package/rules/react/no-unknown-property.md

@@ -0,0 +1,69 @@
+---
+id: react/no-unknown-property
+title: "DOM elements use React's prop names, not HTML attribute names"
+languages: [javascript, jsx, tsx]
+fix: auto
+stability: preview
+ported_from: [eslint-plugin-react/no-unknown-property]
+since: 0.1.0
+---
+
+A DOM element in JSX uses React's names for attributes: `className` not `class`, `htmlFor` not
+`for`, `onClick` not `onclick`, `tabIndex` not `tabindex`.
+
+**Why:** React ignores or warns about the HTML spellings, so the attribute silently does nothing.
+
+```codelaw
+native: react/no-unknown-property
+```
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <input tabindex="1" onclick={go} />;
+```
+
+#### Do
+
+```js
+const a = <input tabIndex="1" onClick={go} />;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <input tabindex="1" onclick={go} />;
+```
+
+#### Do
+
+```jsx
+const a = <input tabIndex="1" onClick={go} />;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <label class="x" for="name" onclick={go}>Name</label>;
+```
+
+#### Do
+
+```tsx
+const a = <label className="x" htmlFor="name" onClick={go}>Name</label>;
+```
+
+## Differences from the source
+
+Only HTML spellings React renames are checked (the pack's `react/dom-property-aliases` data table);
+unknown attributes in general are not. In `.js` and `.jsx` files the JavaScript grammar can't parse
+`class=` and `for=` as JSX attributes (they are reserved words), so those two are found only in
+`.tsx`.

package/rules/react/props-type-name.md

@@ -0,0 +1,43 @@
+---
+id: react/props-type-name
+title: "A component's props type is named <Component>Props"
+languages: [tsx]
+fix: suggest
+fix_reason: "renaming a type other files import would break them, so it is offered, not applied"
+stability: preview
+since: 0.1.0
+---
+
+The type of a component's props is named after the component: `CardProps` for `Card`.
+
+**Why:** One naming pattern makes props types easy to find and import.
+
+```codelaw
+native: react/props-type-name
+```
+
+## Examples
+
+### TSX
+
+#### Don't
+
+```tsx
+type CardOptions = { title: string };
+export function Card(props: CardOptions) {
+  return <h2>{props.title}</h2>;
+}
+```
+
+#### Do
+
+```tsx
+type CardProps = { title: string };
+export function Card(props: CardProps) {
+  return <h2>{props.title}</h2>;
+}
+```
+
+## Differences from the source
+
+The type is renamed with its uses in the file; an exported type is reported without a fix.

package/rules/react/require-render-return.md

@@ -0,0 +1,91 @@
+---
+id: react/require-render-return
+title: "A class component's render() returns"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "what to render needs the author"
+stability: preview
+ported_from: [eslint-plugin-react/require-render-return]
+since: 0.1.0
+---
+
+The `render()` method of a class component returns a value on every path.
+
+**Why:** A `render()` that falls off its end returns `undefined`, which is almost always a forgotten
+`return`.
+
+```codelaw
+native: react/require-render-return
+```
+
+## How to fix
+
+1. Return the element, or `null` to render nothing, on every path.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+class Title extends React.Component {
+  render() {
+    <h1>{this.props.text}</h1>;
+  }
+}
+```
+
+#### Do
+
+```js
+class Title extends React.Component {
+  render() {
+    return <h1>{this.props.text}</h1>;
+  }
+}
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+class Title extends React.Component {
+  render() {
+    <h1>{this.props.text}</h1>;
+  }
+}
+```
+
+#### Do
+
+```jsx
+class Title extends React.Component {
+  render() {
+    return <h1>{this.props.text}</h1>;
+  }
+}
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+class Title extends React.Component {
+  render() {
+    <h1>{this.props.text}</h1>;
+  }
+}
+```
+
+#### Do
+
+```tsx
+class Title extends React.Component {
+  render() {
+    return <h1>{this.props.text}</h1>;
+  }
+}
+```

package/rules/react/rules-of-hooks.md

@@ -0,0 +1,128 @@
+---
+id: react/rules-of-hooks
+title: "Hooks are called at the top level of components and hooks"
+languages: [javascript, jsx, typescript, tsx]
+fix: manual
+fix_reason: "moving a hook can change what the code does on the renders that skipped it"
+stability: preview
+ported_from: [eslint-plugin-react-hooks/rules-of-hooks]
+since: 0.1.0
+---
+
+Hooks (`useState`, `useEffect`, any `use…`) are called only at the top level of a function component
+or a custom hook: not in conditions, loops, nested functions, after an early return, in classes, or
+in plain functions.
+
+**Why:** React matches hook calls to state by their order, so a hook that runs on some renders and
+not others mixes up every hook after it.
+
+```codelaw
+native: react/rules-of-hooks
+```
+
+## How to fix
+
+1. Move the hook call to the top level of the component or hook, before any early return.
+2. Put the condition inside the hook (e.g. inside the effect) instead of around it.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+function Profile({ id }) {
+  if (!id) {
+    return null;
+  }
+  const [user] = useState(null);
+  return user;
+}
+```
+
+#### Do
+
+```js
+function Profile({ id }) {
+  const [user] = useState(null);
+  if (!id) {
+    return null;
+  }
+  return user;
+}
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+function Profile({ id }) {
+  if (!id) {
+    return null;
+  }
+  const [user] = useState(null);
+  return user;
+}
+```
+
+#### Do
+
+```jsx
+function Profile({ id }) {
+  const [user] = useState(null);
+  if (!id) {
+    return null;
+  }
+  return user;
+}
+```
+
+### TypeScript
+
+#### Don't
+
+```ts
+function useProfile(id: string) {
+  if (!id) {
+    return null;
+  }
+  return useState(id);
+}
+```
+
+#### Do
+
+```ts
+function useProfile(id: string) {
+  const state = useState(id);
+  return id ? state : null;
+}
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+function Profile({ id }) {
+  if (!id) {
+    return null;
+  }
+  const [user] = useState(null);
+  return user;
+}
+```
+
+#### Do
+
+```tsx
+function Profile({ id }) {
+  const [user] = useState(null);
+  if (!id) {
+    return null;
+  }
+  return user;
+}
+```