React Component Rules

const componentRules = {
  /** Prevent missing displayName in React component definition */
  'react/display-name': ESLintRule;
  /** Enforce ES5 or ES6 class for returning value in render function */
  'react/require-render-return': ESLintRule;
  /** Prevent multiple component definition per file */
  'react/no-multi-comp': ESLintRule;
  /** Prevent usage of setState */
  'react/no-set-state': ESLintRule;
  /** Enforce stateless components to be written as a pure function */
  'react/prefer-stateless-function': ESLintRule;
  /** Enforce ES6 class instead of createClass for React components */
  'react/prefer-es6-class': ESLintRule;
};

// ✓ Good - Component with displayName
function MyComponent() {
  return <div>Hello</div>;
}
MyComponent.displayName = 'MyComponent';

// ✗ Bad - Missing displayName (when rule is enabled)
const MyComponent = () => <div>Hello</div>;

// ✓ Good - Render method returns JSX
class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

// ✗ Bad - Render method doesn't return
class MyComponent extends React.Component {
  render() {
    console.log('rendering');
  }
}

const namingRules = {
  /** Enforce boolean prop naming conventions */
  'react/boolean-prop-naming': ESLintRule;
  /** Enforce component methods order */
  'react/sort-comp': ESLintRule;
  /** Enforce function component definition style */
  'react/function-component-definition': ESLintRule;
  /** Prevent usage of this in stateless functional components */
  'react/no-this-in-sfc': ESLintRule;
  /** Enforce specific placement for static properties */
  'react/static-property-placement': ESLintRule;
};

// ✓ Good - Boolean prop with proper naming
<Component isVisible={true} hasData={false} />

// ✗ Bad - Boolean prop without is/has prefix
<Component visible={true} data={false} />

// ✓ Good - Proper component method order
class MyComponent extends React.Component {
  static propTypes = {};
  constructor() {}
  componentDidMount() {}
  render() {}
}

// ✗ Bad - Methods in wrong order
class MyComponent extends React.Component {
  render() {}
  componentDidMount() {}
  constructor() {}
  static propTypes = {};
}

const statePropsRules = {
  /** Prevent direct mutation of this.state */
  'react/no-direct-mutation-state': ESLintRule;
  /** Prevent usage of this.state within a this.setState */
  'react/no-access-state-in-setstate': ESLintRule;
  /** Prevent usage of setState in constructors */
  'react/state-in-constructor': ESLintRule;
  /** Prevent unused state */
  'react/no-unused-state': ESLintRule;
  /** Prevent unused class component methods */
  'react/no-unused-class-component-methods': ESLintRule;
};

// ✓ Good - Using setState to update state
this.setState({ count: this.state.count + 1 });

// ✗ Bad - Direct state mutation
this.state.count = this.state.count + 1;

// ✓ Good - Using functional setState to avoid state dependency
this.setState(prevState => ({ count: prevState.count + 1 }));

// ✗ Bad - Reading current state in setState
this.setState({ count: this.state.count + 1 });

// ✓ Good - State initialized in constructor
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

// ✗ Bad - State as class property (when rule enforces constructor)
class MyComponent extends React.Component {
  state = { count: 0 };
}

const patternRules = {
  /** Prevent usage of findDOMNode */
  'react/no-find-dom-node': ESLintRule;
  /** Prevent usage of isMounted */
  'react/no-is-mounted': ESLintRule;
  /** Prevent usage of the return value of React.render */
  'react/no-render-return-value': ESLintRule;
  /** Prevent usage of string references */
  'react/no-string-refs': ESLintRule;
  /** Prevent common typos */
  'react/no-typos': ESLintRule;
  /** Prevent usage of UNSAFE_ methods */
  'react/no-unsafe': ESLintRule;
  /** Prevent creating unstable components inside components */
  'react/no-unstable-nested-components': ESLintRule;
};

// ✓ Good - Using refs properly
const MyComponent = () => {
  const inputRef = useRef(null);
  return <input ref={inputRef} />;
};

// ✗ Bad - Using findDOMNode
import { findDOMNode } from 'react-dom';
const node = findDOMNode(this);

// ✓ Good - Avoiding string refs
<input ref={inputRef} />

// ✗ Bad - Using string refs
<input ref="myInput" />

// ✓ Good - Define components outside render
const ChildComponent = () => <div>Child</div>;
const Parent = () => <ChildComponent />;

// ✗ Bad - Creating components inside render
const Parent = () => {
  const ChildComponent = () => <div>Child</div>;
  return <ChildComponent />;
};

const advancedRules = {
  /** Ensure forwardRef is used correctly */
  'react/forward-ref-uses-ref': ESLintRule;
  /** Prevent usage of arrow functions in component lifecycle methods */
  'react/no-arrow-function-lifecycle': ESLintRule;
  /** Prevent object type as default prop */
  'react/no-object-type-as-default-prop': ESLintRule;
  /** Enforce exact prop types */
  'react/prefer-exact-props': ESLintRule;
  /** Enforce read-only props */
  'react/prefer-read-only-props': ESLintRule;
};

// ✓ Good - forwardRef with ref usage
const MyComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// ✗ Bad - forwardRef without using ref
const MyComponent = React.forwardRef((props, ref) => {
  return <input {...props} />;
});

// ✓ Good - Regular method in lifecycle
class MyComponent extends React.Component {
  componentDidMount() {
    this.doSomething();
  }
  
  doSomething() {
    // implementation
  }
}

// ✗ Bad - Arrow function in lifecycle
class MyComponent extends React.Component {
  componentDidMount = () => {
    this.doSomething();
  }
}

const elementRules = {
  /** Enforce button elements to have explicit type attribute */
  'react/button-has-type': ESLintRule;
  /** Enforce onChange or readonly for checked property */
  'react/checked-requires-onchange-or-readonly': ESLintRule;
  /** Prevent usage of children with iframe elements */
  'react/iframe-missing-sandbox': ESLintRule;
  /** Prevent children for void DOM elements */
  'react/void-dom-elements-no-children': ESLintRule;
  /** Prevent adjacent inline elements not separated by whitespace */
  'react/no-adjacent-inline-elements': ESLintRule;
};

// ✓ Good - Button with explicit type
<button type="button">Click me</button>
<button type="submit">Submit</button>

// ✗ Bad - Button without type
<button>Click me</button>

// ✓ Good - Controlled checkbox with onChange
<input type="checkbox" checked={isChecked} onChange={handleChange} />

// ✓ Good - Readonly checkbox
<input type="checkbox" checked={isChecked} readOnly />

// ✗ Bad - Checked without onChange or readOnly
<input type="checkbox" checked={isChecked} />

// ✓ Good - iframe with sandbox
<iframe src="https://example.com" sandbox="allow-scripts" />

// ✗ Bad - iframe without sandbox
<iframe src="https://example.com" />

const hookRules = {
  /** Enforce destructuring and symmetric naming of useState hook value and setter variables */
  'react/hook-use-state': ESLintRule;
};

// ✓ Good - Proper useState destructuring
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(false);

// ✗ Bad - Non-symmetric naming
const [count, updateCount] = useState(0);
const [isVisible, changeVisibility] = useState(false);

{
  "rules": {
    "react/display-name": ["error", { 
      "ignoreTranspilerName": false,
      "checkContextObjects": false 
    }],
    "react/boolean-prop-naming": ["error", { 
      "rule": "^(is|has)[A-Z]([A-Za-z0-9]?)+",
      "message": "Boolean prop names should start with 'is' or 'has'"
    }],
    "react/function-component-definition": ["error", {
      "namedComponents": "arrow-function",
      "unnamedComponents": "arrow-function"
    }],
    "react/sort-comp": ["error", {
      "order": [
        "static-variables",
        "static-methods",
        "instance-variables",
        "lifecycle",
        "everything-else",
        "render"
      ]
    }]
  }
}