title: force component to re-render after redux state change
body: <p>I have a stack navigator with 2 screens, 'Messages' and 'Message'. On the 'Messages'-screen, I want to have an overview of all the people I'm chatting with + the last message in the conversation. I store all conversations in redux, not on the server. My redux state looks like this:</p>
  
  <pre><code>const state = {
      user = [
          {
              userId: 1,
              username: John,
              messages: [...array of messages send to John or from John...]
          },
          {
              userId: 2,
              username: Jane,
              messages: [...array of messages send to Jane or from Jane...]
          }
          ...
      ]
  }
  </code></pre>
  
  <p>On the 'Messages'-screen I have a FlatList component who loops over the users-array in the redux state:</p>
  
  <pre><code>const users = useSelector(state =&gt; state.messages.users)
  
  const renderUserItem = user =&gt; {
      return (
          &lt;View&gt;
              &lt;Text&gt;{user.username}&lt;/Text&gt;
              &lt;Text&gt;{user.messages[user.messages.length-1].message&lt;/Text&gt;
          &lt;/View&gt;
      )
  }
  
  &lt;FlatList
      data={messages}
      renderItem={({item, index}) =&gt; renderUserItem(item)} /&gt;
  </code></pre>
  
  <p>This works, I get an overview of the the conversations I have + the last message. When I click on a conversation on the 'Messages'-screen, I'm send to the 'Message'-screen where I have another FlatList with all the messages of this particular conversation. This code is irrelevant but works to.</p>
  
  <p>The problem is: when I add a new message (through the 'Message'-screen), the redux state is updated: <code>(dispatch(addMessage(userId, message))</code>, but when I'm navigate back to the 'Messages'-screen, I don't see the last message, the screen is not re-rendered even though the redux state changed. When I do a hard refresh, it works.</p>
  
  <p>How can I force a screen to re-render when a redux state has changed. I'm using <strong>stateless</strong> components.</p>
  
  <p><strong>Edit:</strong> my reducer:</p>
  
  <pre><code>const initialState = {
      users: []
  }
  
  const MessagesReducer = (state = initialState, action) =&gt; {
      let array, index, user, messages
      switch (action.type) {
          case 'START_CONVERSATION':
              // action.user is an object which contains userId and username
              array = state.users
              index = array.findIndex(e =&gt; e.userId === action.user.userId)
              if (index &gt; -1) {
                  // conversation already exists
              } else {
              object = {
                  userId: action.user.userId,
                  username: action.user.username,
                  messages: []
              }
              array.push(object)
              return {
                  users: array
              }
          break
          case 'ADD_MESSAGE':
               // action.userId contains the userId of the conversation partner
               // action.message is an object with direction, 
               // message and timestamp in it
               array = state.users
               index = array.findIndex(e =&gt; e.userId === action.userId)
               user = array[index]
               user.messages.push({
                   direction: action.message.direction,
                   message: action.message.message,
                   timestamp: action.message.timestamp
               }
               // get the old user object out of the array
               array.splice(index, 1)
               // push the new user object to the beginning of the array
               array.unshift(user)  
               return {
                  user: array
               }
          break
          default:
              return state
          break
      }
  }
  </code></pre>