Move functions out of render and into getters

ui/src/shared/components/Annotations.js

@@ -45,31 +45,23 @@ class Annotations extends Component {
       staticLegendHeight,
     } = this.props
 
-    const annotations = visibleAnnotations(
-      dygraph,
-      this.props.annotations
-    ).filter(a => a.id !== TEMP_ANNOTATION.id)
-    const tempAnnotation = this.props.annotations.find(
-      a => a.id === TEMP_ANNOTATION.id
-    )
-
     return (
       <div className="annotations-container">
         {mode === ADDING &&
-          tempAnnotation && (
+          this.tempAnnotation && (
             <NewAnnotation
               dygraph={dygraph}
-              tempAnnotation={tempAnnotation}
+              isTempHovering={isTempHovering}
+              tempAnnotation={this.tempAnnotation}
+              staticLegendHeight={staticLegendHeight}
+              onUpdateAnnotation={handleUpdateAnnotation}
               onDismissAddingAnnotation={handleDismissAddingAnnotation}
               onAddingAnnotationSuccess={handleAddingAnnotationSuccess}
-              onUpdateAnnotation={handleUpdateAnnotation}
-              isTempHovering={isTempHovering}
               onMouseEnterTempAnnotation={handleMouseEnterTempAnnotation}
               onMouseLeaveTempAnnotation={handleMouseLeaveTempAnnotation}
-              staticLegendHeight={staticLegendHeight}
             />
           )}
-        {annotations.map(a => (
+        {this.annotations.map(a => (
           <Annotation
             key={a.id}
             mode={mode}
@@ -82,6 +74,17 @@ class Annotations extends Component {
       </div>
     )
   }
+
+  get annotations() {
+    return visibleAnnotations(
+      this.props.dygraph,
+      this.props.annotations
+    ).filter(a => a.id !== TEMP_ANNOTATION.id)
+  }
+
+  get tempAnnotation() {
+    return this.props.annotations.find(a => a.id === TEMP_ANNOTATION.id)
+  }
 }
 
 const {arrayOf, bool, func, number, shape, string} = PropTypes