react-in-jsx-scope

Keywords: React, JSX, import, scope, ESLint rule, React 17, LLM-optimized

Prevent missing React in scope when using JSX. This rule is part of eslint-plugin-react-features.

Quick Summary

Rule Details

Before React 17, JSX was transformed to React.createElement(), requiring React in scope.

React Version Behavior

Examples

❌ Incorrect (React < 17)

Awaiting a tested example. The previous snippet was removed because the rule does not behave as the doc claimed; track the regression in benchmarks/FP_FN_REMEDIATION_TRACKER.md.

✅ Correct

// React < 17: Import required
import React from 'react';

export function Component() {
  return <div>Hello</div>;
}

// React 17+: Import optional (rule can be disabled)
export function Component() {
  return <div>Hello</div>;
}

Configuration Examples

Basic Usage (React < 17)

{
  rules: {
    'react-features/react-in-jsx-scope': 'error'
  }
}

React 17+ (Disable Rule)

{
  rules: {
    'react-features/react-in-jsx-scope': 'off'
  }
}

Related Rules

• jsx-key - JSX key requirements
• display-name - Component naming

Further Reading

• New JSX Transform - React blog

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.

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.