jacob-beltran · March 6, 2017 19:50 · Mar 6, 2017 · Mar 3, 2017
diff --git a/fallbacks.js b/fallbacks.js
@@ -0,0 +1,32 @@
+/*
+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 }/>
+}