Add memoized selector

frontend/src/components/Chat/Chat.jsx

@@ -8,22 +8,20 @@ import {
 } from 'react-bootstrap';
 
 import MessageItem from './MessageItem';
-import { selectChatContent } from '../../store/stateSelectors';
+import { selectChatContent, selectCurrentChatMessages } from '../../store/stateSelectors';
 import { useAuthContext, useSocketContext } from '../../hooks';
 
 const Chat = () => {
   const { t } = useTranslation();
   const { handleEmit } = useSocketContext();
   const { authData } = useAuthContext();
-  const { entities, currentChannel, messages } = useSelector(selectChatContent);
+  const { entities, currentChannel } = useSelector(selectChatContent);
   const focus = useRef();
   const formRef = useRef();
 
   const getActiveChannel = (element) => element.id === currentChannel;
   const chat = entities.find(getActiveChannel);
-  const currentChatMessages = messages.filter(
-    (message) => message.channelId === currentChannel,
-  );
+  const currentChatMessages = useSelector(selectCurrentChatMessages(currentChannel));
   const messagesInChat = currentChatMessages.length;
 
   useEffect(() => focus.current && focus.current.focus(), [chat]);

frontend/src/components/Modals/ModalAddChannel.jsx

@@ -8,16 +8,15 @@ import { toast } from 'react-toastify';
 import { closeModal } from '../../store/modal.slice';
 import { changeActiveChannel } from '../../store/content.slice';
 import { schemaChannel } from '../../services/yupSchemas';
-import { selectModal, selectChatContent } from '../../store/stateSelectors';
+import { selectModal, selectNames } from '../../store/stateSelectors';
 import { useSocketContext } from '../../hooks';
 
 const ModalAddChannel = () => {
   const { Formik } = formik;
   const { handleEmit } = useSocketContext();
   const { t } = useTranslation();
   const { open } = useSelector(selectModal);
-  const { entities } = useSelector(selectChatContent);
-  const names = entities.map((entity) => entity.name);
+  const names = useSelector(selectNames);
   const schema = schemaChannel(names);
   const focus = useRef();
   const dispatch = useDispatch();

frontend/src/store/stateSelectors.js

@@ -1,9 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit';
+
 const selectChatContent = (state) => state.content;
 const selectModal = (state) => state.modal;
-const selectToastContent = (state) => state.modal.toast;
+
+const selectCurrentChatMessages = (currentChannel) => createSelector(
+  (state) => selectChatContent(state),
+  (content) => content.messages.filter((message) => message.channelId === currentChannel),
+);
+
+const selectNames = createSelector(
+  (state) => selectChatContent(state),
+  (content) => content.entities.map((entity) => entity.name),
+);
 
 export {
   selectChatContent,
   selectModal,
-  selectToastContent,
+  selectCurrentChatMessages,
+  selectNames,
 };