react-render-types-setup

React Render Types — Setup

Install and configure eslint-plugin-react-render-types to enforce component composition constraints at lint time.

Prerequisites

• ESLint >= 9 (flat config)
• TypeScript >= 5
• @typescript-eslint/parser >= 8
• A working tsconfig.json

Install

npm install eslint-plugin-react-render-types --save-dev

ESLint Configuration

Typed linting is required — the plugin uses TypeScript's type checker for cross-file component identity.

Recommended (extends preset)

// eslint.config.js
import tseslint from "typescript-eslint";
import reactRenderTypes from "eslint-plugin-react-render-types";

export default [
  ...tseslint.configs.recommended,
  reactRenderTypes.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
];

Manual (pick rules individually)

// eslint.config.js
import reactRenderTypes from "eslint-plugin-react-render-types";
import tsParser from "@typescript-eslint/parser";

export default [
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        projectService: true,
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      "react-render-types": reactRenderTypes,
    },
    rules: {
      "react-render-types/valid-render-return": "error",
      "react-render-types/valid-render-prop": "error",
      "react-render-types/valid-renders-jsdoc": "warn",
      "react-render-types/renders-uses-vars": "error",
    },
  },
];

Typed Linting

Two options — pick one:

Option 1: projectService (recommended)

parserOptions: {
  projectService: true,
}

Automatically infers tsconfig for each file.

Option 2: Explicit project path

parserOptions: {
  project: './tsconfig.json',
  // Monorepos: project: ['./tsconfig.json', './packages/*/tsconfig.json'],
}

Rules

Rule	Default	Purpose
valid-render-return	error	Component return matches its @renders declaration
valid-render-prop	error	Props/children receive compatible components
valid-renders-jsdoc	warn	@renders syntax is well-formed (braces, PascalCase)
renders-uses-vars	error	Prevents no-unused-vars on @renders references
require-renders-annotation	off	Requires @renders on all components