---
url: /docs/guide/usage/linter/rules/react/refs.md
---

### What it does

Validates correct usage of refs: `ref.current` may not be read or
written during render, only in event handlers and effects.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
[`react-hooks/refs`](https://react.dev/reference/eslint-plugin-react-hooks/lints/refs).

### Why is this bad?

React may not have attached the ref yet during render, and reading it
does not subscribe the component to updates — the UI silently goes
stale.

### Examples

Examples of **incorrect** code for this rule:

```jsx
import { useRef } from "react";
function Component() {
  const ref = useRef(null);
  const value = ref.current; // read during render
  return <div>{value}</div>;
}
```

Examples of **correct** code for this rule:

```jsx
import { useEffect, useRef } from "react";
function Component() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.focus();
  }, []);
  return <input ref={ref} />;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References