react/refs Correctness
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.
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
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/refs": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/refs": "error",
},
});bash
oxlint --deny react/refs --react-pluginVersion
This rule was added in vnext.