Speed up friendlyDatetime component in react files

the friendlyDatetime component was taking almost
all of the time in rendering newFiles.
I guess some of the tz, $.fudgeDate,
$.datetimestring, etc. functions inside of it were
super slow.

for the folder i was testing it went from ~8000ms
to ~200ms

test plan:

in new files,
in a folder with tons of files/folders load the page
it should be a lot faster than without this commit

another way to tell is to shift-click to select
a bunch of things, it should be fast. before it was
slow.

Change-Id: If8a0b99d0f11a1d2bf3a4e93303b9f510e8d23ef
Reviewed-on: https://gerrit.instructure.com/41020
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jason Madsen <jmadsen@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>

app/coffeescripts/react_files/components/FriendlyDatetime.coffee

@@ -6,6 +6,27 @@ define [
   'jquery.instructure_date_and_time'
 ], (React, tz, _, $) ->
 
+
+  slowRender = ->
+    datetime = @props.datetime
+    return React.DOM.time() unless datetime?
+    datetime = tz.parse(datetime) unless _.isDate datetime
+    fudged = $.fudgeDateForProfileTimezone(datetime)
+
+    @transferPropsTo React.DOM.time {
+      title: $.datetimeString(datetime)
+      dateTime: datetime.toISOString()
+    },
+      React.DOM.span className: 'visible-desktop',
+        # something like: Mar 6, 2014
+        $.friendlyDatetime(fudged)
+
+
+      React.DOM.span className: 'hidden-desktop',
+        # something like: 3/3/2014
+        fudged.toLocaleDateString()
+
+
   FriendlyDatetime = React.createClass
 
     propTypes:
@@ -14,22 +35,8 @@ define [
         React.PropTypes.instanceOf(Date)
       ])
 
-    render: ->
-      datetime = @props.datetime
-      return React.DOM.time() unless datetime?
-      datetime = tz.parse(datetime) unless _.isDate datetime
-      fudged = $.fudgeDateForProfileTimezone(datetime)
-      timeTitle = $.datetimeString(datetime)
-
-
-      @transferPropsTo React.DOM.time {
-        title: $.datetimeString(datetime)
-        dateTime: datetime.toISOString()
-      },
-        React.DOM.span className: 'visible-desktop',
-          # something like: Mar 6, 2014
-          $.friendlyDatetime(fudged)
-        React.DOM.span className: 'hidden-desktop',
-          # something like: 3/3/2014
-          fudged.toLocaleDateString()
-
+    # The original render function is really slow because of all
+    # tz.parse, $.fudge, $.datetimeString, etc.
+    # As long as @props.datetime stays same, we don't have to recompute our output.
+    # memoizing like this beat React.addons.PureRenderMixin 3x
+    render: _.memoize(slowRender, -> @props.datetime)