Как оптимизировать этот react код?

Есть n массивов. Я вывожу их по отдельности. Каждый элемент массива я вывожу как отдельный элемент. Эти элементы имеют checkbox, который добавляет / удаляет из массива выбранных элементов id элемента. Пока всё просто, но есть проблема. Массивы, которые я вывожу, могут иметь одинаковые элементы. То есть, если в условном первом массиве выбрать элемент, который имеется в других массивах, я должен отобразить выбранными все одинаковые элементы.
Моё решение было таким. Я создал общий массив выбранных элементов. Этот массив я передаю компонентам, которые являются выведенными массивами.
const [chosen, setChosen] = useState<number[]>([]);
const choose = useCallback((number: number) => {
        const {found, index} = binarySearchSync(chosen, number, true); //Просто бинарный поиск по массиву
        if (!found) chosen.splice(-(index + 1), 0, number); else chosen.splice(index, 1)
        setChosen([...chosen])
}, [chosen]);
//... Some code
<ChatListToCreating Chosen={chosen} SetChosen={choose} name={'Важные'} chats={ChatsStore.chatsList[0].chats}/>
<ChatListToCreating Chosen={chosen} SetChosen={choose} name={'Друзья'} chats={ChatsStore.chatsList[1].chats}/>
//and n more times

В компонентах я вывожу элементы примерно так ( компонент довольно большой, выбрал суть ):
interface Props {
    name: string;
    chats: (number | Chat)[];
    Chosen: number[];
    SetChosen: (value: number) => void;
}

export const ChatListToCreating:FC<Props> = memo(({chats, name, Chosen, SetChosen}) => {
//Some code
chats.map(value => {
                                let Chat: Chat;
                                //some code that creates name and avatar and fills in Chat variable
                                const IsItChosen = binarySearchSync(Chosen, Chat.id, true).found == true;
                                console.log(IsItChosen) //n * every n.length times
                                return (
                                    <ChatLineToCreating key={Chat.id} Chat={Chat} SetChosen={() => {SetChosen(Chat.id)}} name={name} avatarSrc={avatarSrc} Chosen={IsItChosen}/>
                                );
})

В дочернем элементе нет ничего интересно, его не прилагаю. Как вы уже могли догаться, при добавлении / удалении элемента из массива происходит рендер всех вышеперечисленных компонентов. Да, react наложит изменения только на нужные, но это всё равно меня пугает!
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы