Props, State, and PropTypes

Relevant source files

• packages/eslint-config-airbnb/rules/react.js
• react/README.md

This document details the Airbnb JavaScript Style Guide's best practices for prop validation using PropTypes, defining default props, managing component state, and implementing event handlers in React components. These conventions ensure type safety, predictable component behavior, and consistent event handling patterns.

For information about React component structure and method ordering, see page 3.1. For JSX syntax and formatting rules, see page 3.3.

Props

Props (short for "properties") are React's mechanism for passing data from parent to child components. The Airbnb style guide provides specific conventions for using props effectively.

Naming Conventions

• Use PascalCase for React components and camelCase for their instances react/README.md86-100
• Props Naming: Avoid using DOM component prop names (like style, className) for different purposes to prevent developer confusion and bugs react/README.md142-155

Boolean Props

• Enforce boolean attributes notation in JSX: omit the value of the prop when it is explicitly true packages/eslint-config-airbnb/rules/react.js72-74
• For boolean prop naming, follow established conventions (though the rule react/jsx-handler-names is off by default in the core config) packages/eslint-config-airbnb/rules/react.js88-93

Sources: react/README.md142-155 packages/eslint-config-airbnb/rules/react.js72-74 packages/eslint-config-airbnb/rules/react.js88-93

PropTypes Validation

The Airbnb style guide requires explicit prop type validation using the PropTypes library to catch type errors during development.

Required PropTypes Rules

• Always define propTypes for all components that receive props packages/eslint-config-airbnb/rules/react.js227-233
• Forbidden Prop Types: any, array, and object are forbidden because they are too vague. Use arrayOf, objectOf, or shape instead to explicitly note what they contain packages/eslint-config-airbnb/rules/react.js60-66 react/README.md31
• Prevent unused prop definitions to keep the codebase clean packages/eslint-config-airbnb/rules/react.js361-365

PropTypes Definition Pattern

For class components, define propTypes and defaultProps as static properties. The rule react/static-property-placement enforces this outside the class body in the current configuration packages/eslint-config-airbnb/rules/react.js491-499

PropTypes Validation Flow:

Sources: packages/eslint-config-airbnb/rules/react.js60-66 packages/eslint-config-airbnb/rules/react.js227-233 packages/eslint-config-airbnb/rules/react.js491-499 react/README.md31

Default Props

The react/require-default-props rule enforces that every non-required prop must have a corresponding entry in defaultProps packages/eslint-config-airbnb/rules/react.js398-401

Default Props Rules

• Define explicit defaultProps for all non-required props packages/eslint-config-airbnb/rules/react.js398-401
• Do not provide defaultProps for props marked as isRequired packages/eslint-config-airbnb/rules/react.js413-415
• Sorting of defaultProps is available but disabled by default packages/eslint-config-airbnb/rules/react.js160-164

Sources: packages/eslint-config-airbnb/rules/react.js398-415 packages/eslint-config-airbnb/rules/react.js160-164

Spread Props and Destructuring

Destructuring Assignment

The react/destructuring-assignment rule enforces always using destructuring for props, state, and context to improve code readability and make dependencies explicit packages/eslint-config-airbnb/rules/react.js445-447

Props Spreading

The react/jsx-props-no-spreading rule restricts the use of JSX spread syntax to prevent accidental prop forwarding and unintended DOM attributes packages/eslint-config-airbnb/rules/react.js501-508

Allowed use cases:

• Spreading is explicitly allowed for DOM components in the config packages/eslint-config-airbnb/rules/react.js506
• ignoreRefs is enabled for jsx-no-bind to allow passing refs via spreading or props packages/eslint-config-airbnb/rules/react.js111

Sources: packages/eslint-config-airbnb/rules/react.js445-508 packages/eslint-config-airbnb/rules/react.js111

State

State represents the internal data of a component. The Airbnb style guide provides strict guidelines for managing it properly.

State Initialization

If a component has internal state, prefer class extends React.Component over React.createClass react/README.md35-53 The react/state-in-constructor rule enforces initializing state in the component constructor packages/eslint-config-airbnb/rules/react.js487-489

Sources: packages/eslint-config-airbnb/rules/react.js487-489 react/README.md35-53

State Updates

Safe State Updates

The react/no-access-state-in-setstate rule prevents accessing this.state within setState() calls, which can lead to bugs due to React's asynchronous state updates packages/eslint-config-airbnb/rules/react.js449-451

setState in Lifecycle Methods

Several rules restrict setState usage in specific lifecycle methods to prevent infinite update loops:

• react/no-did-update-set-state: Prevents setState in componentDidUpdate packages/eslint-config-airbnb/rules/react.js195-197
• react/no-will-update-set-state: Prevents setState in componentWillUpdate packages/eslint-config-airbnb/rules/react.js186-188
• react/no-did-mount-set-state: Disallows setState in componentDidMount (set to 'off' for server-rendering compatibility but generally discouraged) packages/eslint-config-airbnb/rules/react.js182-184

State Update Lifecycle:

Sources: packages/eslint-config-airbnb/rules/react.js182-197 packages/eslint-config-airbnb/rules/react.js449-451

State Best Practices

• Unused State: The react/no-unused-state rule prevents defining state properties that are never read packages/eslint-config-airbnb/rules/react.js417-419
• Deprecated APIs: The react/no-is-mounted rule prevents using the deprecated isMounted() API packages/eslint-config-airbnb/rules/react.js178-180

Sources: packages/eslint-config-airbnb/rules/react.js178-419

Event Handlers

Naming Conventions

The react/jsx-handler-names rule defines the standard pattern for event handlers, though it is disabled by default in the standard configuration packages/eslint-config-airbnb/rules/react.js88-93:

• Handler methods: handleEvent (e.g., handleClick)
• Handler props: onEvent (e.g., onClick)

Event Handler Data Flow:

Binding Event Handlers

The react/jsx-no-bind rule prevents creating new function instances on every render. The config allows arrow functions but forbids .bind() and non-arrow functions in JSX props packages/eslint-config-airbnb/rules/react.js108-116

• allowArrowFunctions: true packages/eslint-config-airbnb/rules/react.js112
• allowBind: false packages/eslint-config-airbnb/rules/react.js114
• ignoreDOMComponents: true is enabled to allow flexibility on standard HTML elements packages/eslint-config-airbnb/rules/react.js115

Sources: packages/eslint-config-airbnb/rules/react.js88-116

Summary Table: Key Rules for Props, State, and Events

Category	ESLint Rule	Severity	Description
Props	react/forbid-prop-types	error	Forbids any, array, object packages/eslint-config-airbnb/rules/react.js62-66
Props	react/require-default-props	error	Enforces defaultProps for optional props packages/eslint-config-airbnb/rules/react.js398-401
Props	react/jsx-no-bind	error	Prevents .bind() in JSX props packages/eslint-config-airbnb/rules/react.js110-116
State	react/state-in-constructor	error	Enforces state initialization in constructor packages/eslint-config-airbnb/rules/react.js487-489
State	react/no-unused-state	error	Prevents unused state variables packages/eslint-config-airbnb/rules/react.js417-419
State	react/no-access-state-in-setstate	error	Prevents this.state inside setState packages/eslint-config-airbnb/rules/react.js449-451

Sources: packages/eslint-config-airbnb/rules/react.js18-603