React Performance: Fallback Values Example

fallbacks.js

/*
Sometimes a fallback value or object may be created in the render function
( or prop value ) to avoid undefined value errors. In these cases, it's best
to define the fallbacks as a constant external to the component instead of
creating a new literal.
/*

/* Bad */
render() {
  let thingys = [];
  // If this.props.thingys is not defined a new array literal is created above.
  if( this.props.thingys ) {
    thingys = this.props.thingys;
  }

  return <ThingyHandler thingys={ thingys }/>
}

/* Bad */
render() {
  // This has functionally the same outcome as the above example.
  return <ThingyHandler thingys={ this.props.thingys || [] }/>
}

/* Good */

// Declare outside of component
const NO_THINGYS = [];

render() {
  return <ThingyHandler thingys={ this.props.thingys || NO_THINGYS }/>
}