• Omit the value of the prop when it is explicitly . eslint: 

    1. // bad
    2. <Foo
    3.   hidden={true}
    4. />
    6. // good
    7. <Foo
    8.   hidden
    9. />
    11. // good
    12. <Foo hidden />

  • Always include an alt prop on <img> tags. If the image is presentational, alt can be an empty string or the <img> must have role="presentation". eslint: jsx-a11y/alt-text

    1. // bad
    2. <img src="hello.jpg" />
    4. // good
    5. <img src="hello.jpg" alt="Me waving hello" />
    7. // good
    8. <img src="hello.jpg" alt="" />
    10. // good
    11. <img src="hello.jpg" role="presentation" />

  • Do not use words like “image”, “photo”, or “picture” in <img> props. eslint:

  • Use only valid, non-abstract ARIA roles. eslint: 

    1. // bad - not an ARIA role
    2. <div role="datepicker" />
    4. <div role="range" />
    6. // good
    7. <div role="button" />
    1. // bad
    2. <div accessKey="h" />
    4. // good
    5. <div />

  • Avoid using an array index as key prop, prefer a stable ID.

We don’t recommend using indexes for keys if the order of items may change.

  • Always define explicit defaultProps for all non-required props.

    1. // bad
    2. function SFC({ foo, bar, children }) {
    3. return <div>{foo}{bar}{children}</div>;
    4. }
    5. SFC.propTypes = {
    6. foo: PropTypes.number.isRequired,
    7. bar: PropTypes.string,
    8. children: PropTypes.node,
    9. };
    11. // good
    12. function SFC({ foo, bar, children }) {
    14. }
    15. SFC.propTypes = {
    16. foo: PropTypes.number.isRequired,
    17. bar: PropTypes.string,
    18. children: PropTypes.node,
    19. SFC.defaultProps = {
    20. bar: '',
    21. children: null,
    22. };

  • Use spread props sparingly.

    Exceptions:

  • HOCs that proxy down props and hoist propTypes

    1. function HOC(WrappedComponent) {
    2. return class Proxy extends React.Component {
    3.   Proxy.propTypes = {
    4.     text: PropTypes.string,
    5.     isLoading: PropTypes.bool
    6.   };
    8.   render() {
    9.     return <WrappedComponent {...this.props} />
    10.   }
    11. }
    12. }

  • Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.

    1. // bad
    2. render() {
    3. const { irrelevantProp, ...relevantProps  } = this.props;
    4. return <WrappedComponent {...this.props} />
    5. }
    7. // good
    8. render() {
    9. const { irrelevantProp, ...relevantProps  } = this.props;
    11. }