LowFile-scopeJavaScript / TypeScript Plug & play

String references should not be used

Ensure that string refs are not used in React. String refs are deprecated, make components harder to maintain, and reduce composability. Recommend using function-based refs instead.

Add to Mesrai Open workspace

Why this matters

Using string refs in React is deprecated and makes the component slower, harder to maintain, and less composable. Use function-based refs instead.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

const Hello = createReactClass({
  componentDidMount() {
    const component = this.refs.hello; // Noncompliant
    // ...
  },
  render() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Prefer

const Hello = createReactClass({
  componentDidMount() {
    const component = this.hello;
    // ...
  },
  render() {
    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
  }
});

More snippets

Bad

const Hello = createReactClass({
  componentDidMount() {
    const component = this.refs.hello; // Noncompliant
    // ...
  },
  render() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Good

const Hello = createReactClass({
  componentDidMount() {
    const component = this.hello;
    // ...
  },
  render() {
    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
  }
});

Related rules

From the same buckets as this rule.

Critical
Avoid Duplicating String Literals
Store repeated string literals in constants or variables to improve maintainability and reduce redundancy.
duplication-complexitymaintainability
Critical
Avoid Empty Methods
Detect methods that have an empty body. If a method is empty, ensure that a comment is present explaining why it remains unimplemented.
maintainabilityreadability-refactor
Critical
Avoid modifying built-in prototypes
Detect modifications to built-in prototypes. Modifying built-in objects can lead to compatibility issues and unexpected behavior. Recommend creating helper functions instead.
maintainabilitysecurity-hardening

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

const Hello = createReactClass({
  componentDidMount() {
    const component = this.refs.hello; // Noncompliant
    // ...
  },
  render() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Prefer

const Hello = createReactClass({
  componentDidMount() {
    const component = this.hello;
    // ...
  },
  render() {
    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
  }
});

More snippets

Bad

const Hello = createReactClass({
  componentDidMount() {
    const component = this.refs.hello; // Noncompliant
    // ...
  },
  render() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Good

const Hello = createReactClass({
  componentDidMount() {
    const component = this.hello;
    // ...
  },
  render() {
    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
  }
});

Related rules

From the same buckets as this rule.

Critical

Avoid Duplicating String Literals

Store repeated string literals in constants or variables to improve maintainability and reduce redundancy.

duplication-complexitymaintainability

Critical

Avoid Empty Methods

Detect methods that have an empty body. If a method is empty, ensure that a comment is present explaining why it remains unimplemented.

maintainabilityreadability-refactor

Critical

Avoid modifying built-in prototypes

Detect modifications to built-in prototypes. Modifying built-in objects can lead to compatibility issues and unexpected behavior. Recommend creating helper functions instead.

maintainabilitysecurity-hardening