title: React component not detecting change in redux state
body: <p>I'm doing a chat service.</p>
  <p><a href="https://i.stack.imgur.com/0VbBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0VbBV.png" alt="enter image description here" /></a></p>
  <p>Everything is working fine, expect the following functionality :</p>
  <ul>
  <li>when a new message comes, I want the chatroom list (on the left side) to be updated. The chatroom of the new message should move to the first position. However, the component doesn't detect the change automatically. I need to click on the list to have it updated.</li>
  </ul>
  <p>To do so, I tried the following reducer :</p>
  <pre class="lang-js prettyprint-override"><code>case NEW_CHAT_MESSAGE:
        const setRoomFirst = (array, roomId) =&gt; {
          const chatIndex = array.findIndex((arr) =&gt; arr._id === roomId);
          array.push(...array.splice(0, chatIndex));
          return { arr: array, hasBeenUpdated: chatIndex !== -1 };
        };
  
        const rooms = state.rooms;
  
        // move room to first position
        const updatedRooms = setRoomFirst(rooms, action.payload.message.chatRoom);
  
        if (updatedRooms.hasBeenUpdated) {
          // will always be the first room
          updatedRooms.arr[0].messages.push(action.payload.message);
        }
  
        return { ...state, rooms: updatedRooms.arr };
      default:
        return state;
    }
  </code></pre>
  <p>The component that will manage the state of the chat :</p>
  <pre class="lang-js prettyprint-override"><code>function Chat() {
    const classes = useStyle();
    const dispatch = useDispatch();
  
    const callback = useCallback(
      (rooms) =&gt; {
        console.log(&quot;dispatch&quot;);
        dispatch(newChatMessage(rooms));
      },
      [dispatch]
    );
  
    const { roomId } = useParams();
    const rooms = useSelector(ChatRoomsSelector);
  
    const [selectedRoom, setSelectedRoom] = useState(
      roomId || (rooms.length ? rooms[0]._id : null)
    );
  
    const oldRoomsValue = usePrevious(rooms);
  
    useEffect(() =&gt; {
      console.log(&quot;rooms has changed&quot;, rooms);
      if (!selectedRoom) {
        setSelectedRoom(roomId || (rooms.length ? rooms[0]._id : null));
      }
      if (oldRoomsValue !== rooms) {
        console.log(&quot;a change in rooms has been detected&quot;);
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [rooms]);
  
    const onSelect = useCallback((roomId) =&gt; {
      setSelectedRoom(roomId);
    }, []);
  
    const current = rooms.filter((room) =&gt; room._id === selectedRoom)[0];
  
    return (
      &lt;Container&gt;
        &lt;Typography variant=&quot;h1&quot; className={classes.title}&gt;
          Messagerie
        &lt;/Typography&gt;
        &lt;Grid container spacing={2}&gt;
          &lt;Grid item xs={4}&gt;
            &lt;ChatListContainer
              rooms={rooms}
              roomSelected={selectedRoom}
              onSelect={onSelect}
            /&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={8}&gt;
            {current &amp;&amp; &lt;ChatContentContainer room={current} /&gt;}
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Container&gt;
    );
  }
  
  export default Chat;
  </code></pre>
  <p>Thank you in advance for your help! :)</p>