 
 module.exports = MessageList
 
-MessageItem = React.createClass
-    displayName: 'MessagesItem'
-
-    mixins: [RouterMixin]
+MessageListBody = React.createClass
+    displayName: 'MessageListBody'
 
     shouldComponentUpdate: (nextProps, nextState) ->
         # we must do the comparison manually because the property "onSelect" is
         # a function (therefore it should not be compared)
-        shouldUpdate =
-            not _.isEqual(nextState, @state) \
-            or not Immutable.is(nextProps.message, @props.message) \
-            or not Immutable.is(nextProps.settings, @props.settings) \
-            or nextProps.conversationLength isnt @props.conversationLength \
-            or nextProps.key isnt @props.key \
-            or nextProps.isActive isnt @props.isActive \
-            or nextProps.edited isnt @props.edited \
-            or nextProps.selected isnt @props.selected
+        updatedProps = Object.keys(nextProps).filter (prop) =>
+            return typeof nextProps[prop] isnt 'function' and not (_.isEqual(nextProps[prop], @props[prop]))
+        should = not(_.isEqual(nextState, @state)) or updatedProps.length > 0
+
+        return should
+
+    render: ->
+        messages = @props.messages.map (message, key) =>
+            id = message.get('id')
+            cid = message.get('conversationID')
+            if @props.settings.get('displayConversation')
+                isActive = @props.conversationID is cid
+            else
+                isActive = @props.messageID is id
+            MessageItem
+                message: message,
+                conversationLength: @props.conversationLengths?.get(cid),
+                key: key,
+                isActive: isActive,
+                edited: @props.edited,
+                settings: @props.settings,
+                selected: @props.selected[id]?,
+                onSelect: (val) =>
+                    @props.onSelect id, val
+
+        .toJS()
+        ul className: 'list-unstyled',
+            messages
+
+MessageItem = React.createClass
+    displayName: 'MessagesItem'
+
+    mixins: [RouterMixin]
+
+    shouldComponentUpdate: (nextProps, nextState) ->
+        # we must do the comparison manually because the property "onSelect" is
+        # a function (therefore it should not be compared)
+        updatedProps = Object.keys(nextProps).filter (prop) =>
+            return typeof nextProps[prop] isnt 'function' and not (_.isEqual(nextProps[prop], @props[prop]))
+        shouldUpdate = not _.isEqual(nextState, @state) or updatedProps.length > 0
 
         return shouldUpdate
-
-
 
     render: ->
         message = @props.message

            else
                div null,
                    #p null, @props.counterMessage
                    ul className: 'list-unstyled',
                        messages
                    # If message list is filtered, we can't only rely on message count
                    # So we assume that if query.pageAfter is null, there's no more
                    # messages to display
                    if @props.messages.count() < nbMessages and @props.query.pageAfter?
                        p className: 'text-center',
                            if @props.fetching
                                i className: "fa fa-refresh fa-spin"

            if Object.keys(selected).length is 0
                @setState allSelected: false, edited: false

    render: ->
        compact = @props.settings.get('listStyle') is 'compact'
        filterParams =
            accountID: @props.accountID
            mailboxID: @props.mailboxID
