no-this-in-sfc

Keywords: React, this, stateless, functional component, hooks, SFC, ESLint rule, LLM-optimized

Disallow this from being used in stateless functional components. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Error (correctness)
Auto-Fix	❌ No (requires refactor)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React functional components

Using this in a functional component is always a bug. Functional components don't have a this context like class components do. This usually indicates code that should either be in a class component or refactored to use hooks.

Why This Matters

Issue	Impact	Solution
🔄 undefined behavior	`this` is undefined in SFC	Remove this usage
🐛 Runtime errors	TypeError when accessing properties	Use hooks for state
🔍 Confused intent	Code appears to be class component	Convert to class or use hooks

Examples

❌ Incorrect

// BAD: Using 'this' in functional component
function UserCard(props) {
  // this is undefined or window - NOT what you want!
  const handleClick = () => {
    this.props.onClick();  // Error!
  };
  
  return (
    <div onClick={this.handleClick}>  // Error!
      {this.props.name}               // Error!
    </div>
  );
}

// BAD: Arrow function assigned to variable
const ProfileCard = (props) => {
  return (
    <div>
      {this.props.title}  // 'this' is wrong context!
    </div>
  );
};

✅ Correct

// GOOD: Use props directly
function UserCard(props) {
  const handleClick = () => {
    props.onClick();
  };
  
  return (
    <div onClick={handleClick}>
      {props.name}
    </div>
  );
}

// GOOD: Use destructuring
function UserCard({ name, onClick }) {
  return (
    <div onClick={onClick}>
      {name}
    </div>
  );
}

// GOOD: Use hooks for state
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}

// If you need 'this', use a class component
class UserCard extends React.Component {
  handleClick = () => {
    this.props.onClick();  // 'this' is valid here
  };
  
  render() {
    return <div onClick={this.handleClick}>{this.props.name}</div>;
  }
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/no-this-in-sfc': 'error'
  }
}

react-class-to-hooks - Migration to hooks
no-set-state - Encourage functional components

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.