ban-react-fc

Prefer function components with typed props over React.FC.

Rule Details Best Practice

React.FC looks convenient, but it comes with baggage: implicit children, awkward generics, and components that tend to end up anonymous in stack traces and DevTools. Prefer plain function declarations with typed props.

Refactoring Steps

Identify React.FC Look for variable declarations using : React.FC<Props> or : FC<Props>.
Convert to Function Change const Component: React.FC<Props> = (...) to function Component(...).
Type Props Directly Move the prop type from the variable annotation to the function parameter list: (props: Props).
Clean Up Check if your component uses children. If so, explicitly add children: ReactNode to your props interface.

Examples

Incorrect

Type Annotations

Bans the use of generic wrapper types for component variables.

export const MyComponent: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};

const Button: FC<ButtonProps> = ({ label }) => <button>{label}</button>;

Correct

Function Declarations

Use standard TypeScript function signatures for your components.

export function MyComponent({ children }: Props) {
  return <div>{children}</div>;
}

function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

Problems with React.FC

DevTools Issues

Obscures names in React DevTools, making it difficult to navigate your component tree.

Implicit Children

Automatically includes children, which can lead to bugs if a component shouldn’t accept them.

Generic Support

React.FC is difficult to use with generic components, whereas function declarations handle them naturally.

require-react-display-names Ensures components have names in DevTools

no-god-components Prevents overly complex components