Rules
no-create-ref
Full Name in eslint-plugin-react-x
react-x/no-create-refFull Name in @eslint-react/eslint-plugin
@eslint-react/no-create-refPresets
xrecommendedrecommended-typescriptrecommended-type-checked
Description
Disallow createRef in function components.
createRef() is a legacy API that is not recommended for use in new code. Instead, prefer using useRef() with function components.
Examples
Failing
import React, { createRef } from "react";
function MyComponent() {
const ref = React.createRef<HTMLDivElement>();
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// - [Deprecated] Use 'useRef' instead.
return <div ref={ref} />;
}Passing
import React, { useRef } from "react";
function MyComponent() {
const ref = useRef<HTMLDivElement>(null);
return <div ref={ref} />;
}import React, { createRef } from "react";
class MyComponent extends React.Component {
inputRef = createRef();
// ...
}Implementation
Further Reading
See Also
no-string-refs
Disallows using deprecatedstring refs.