         error: null
 
     promise.catch (error) =>
-      @safelySetState
+      @safelySetState promise,
         pending: false
         resolved: false
         rejected: true
         value: null
         error: error
 
-  safelySetState: (state) ->
-    if @isMounted()
+  safelySetState: (promise, state) ->
+    if @isMounted() and promise is @props.promise
       @setState state
 
   render: ->
     if @state.resolved
       try
-        @props.then.call this, @state.value
-      catch e
-        @props.catch.call this, e
+        @renderResolved @state.value
+      catch error
+        @renderRejected error
 
     else if @state.rejected
-      @props.catch.call this, @state.error
+      @renderRejected @state.error
 
     else
       # Until the initial promise is resolved or rejected, show the given children.

module.exports = React.createClass
  displayName: 'PromiseRenderer'

  pendingClass: 'promise-pending'

  propTypes:
    promise: React.PropTypes.instanceOf(Promise).isRequired
    then: React.PropTypes.func.isRequired
    catch: React.PropTypes.func

  getDefaultProps: ->
    catch: @::defaultCatch

  getInitialState: ->

      pending: true

    promise.then (value) =>
      @safelySetState promise,
        pending: false
        resolved: true
        rejected: false
