react-no-inline-functions

Prevent inline functions in React renders with performance metrics. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages with fix suggestions.

💡 Provides suggestions | 🔧 Automatically fixable

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

An inline function written as a prop (onSelect={() => …}, a function expression, or a choice between two) is a new function on every render. It costs a re-render only when the receiver skips re-rendering on equal props: a component the file wraps in React's memo (any spelling, including memo(forwardRef(...))) or a class extending React's PureComponent. The rule reports those. A function child (<Loader>{(data) => …}</Loader>) is the children prop and is judged the same way.

It does not report:

• a host element (<button onClick={() => …}>, <my-widget>): React updates the DOM listener; there is no render to save;
• a component the file defines without memo (a function, an arrow, forwardRef(...), a Component class): it re-renders with its parent whatever its props are;
• a callback passed to a call ({items.map((item) => <li … />)}, onSelect={debounce(() => …)}): it is not itself a prop;
• a function passed by reference (onSelect={handleSelect}).

ConfigurationCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

function TodoList({ todos }: Props) {
  return (
    <div>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onDelete={() => deleteTodo(todo.id)}  // ❌ Inline function
        />
      ))}
    </div>
  );
}

✅ CorrectCopy Anchor Link

function TodoList({ todos }: Props) {
  const onDelete = useCallback((id: string) => deleteTodo(id), []);
  return todos.map((todo) => (
    <TodoItem key={todo.id} todo={todo} onDelete={onDelete} />
  ));
}

// A host element has no render to save.
<button onClick={() => save()}>Save</button>;

Configuration ExamplesCopy Anchor Link

ESLint 9+ (Flat Config)Copy Anchor Link

import reactFeatures from 'eslint-plugin-react-features';
import type { ReactNoInlineFunctionsOptions } from 'eslint-plugin-react-features/types';

const inlineConfig: ReactNoInlineFunctionsOptions = {
  allowInEventHandlers: true, // Allow simple event handlers
  minArraySize: 5, // Only warn for large lists
};

export default [
  {
    plugins: {
      'react-features': reactFeatures,
    },
    rules: {
      'react-features/react-no-inline-functions': ['warn', inlineConfig],
    },
  },
];

ESLint 8 (Legacy Config with JSDoc Types)Copy Anchor Link

/** @type {import('eslint-plugin-react-features/types').ReactNoInlineFunctionsOptions} */
const inlineConfig = {
  allowInEventHandlers: true, // Allow simple event handlers
  minArraySize: 5, // Only warn for large lists
};

module.exports = {
  plugins: ['react-features'],
  rules: {
    'react-features/react-no-inline-functions': ['warn', inlineConfig],
  },
};

For more examples and patterns, see the package README.

Performance ImpactCopy Anchor Link

Comparison with AlternativesCopy Anchor Link

Related RulesCopy Anchor Link

• react-class-to-hooks - Migration to hooks
• required-attributes - React attribute enforcement
• img-requires-alt (planned) - Image accessibility

Further ReadingCopy Anchor Link

• React Performance Optimization - React rendering guide
• useCallback Hook - useCallback documentation
• ESLint MCP Setup - Enable AI assistant integration

Known False PositivesCopy Anchor Link

• A component the file cannot see (an import such as TodoItem above, or a member such as <Ui.Row>) is still checked: whether it compares props by identity is unknown, so the finding may not hold.

Known False NegativesCopy Anchor Link

• A fresh function produced by a call (onSelect={debounce(() => …)}, onSelect={handler.bind(this)}) is not followed.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/react-no-inline-functions": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/react-no-inline-functions': 'error',    },  },});