Есть 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 наложит изменения только на нужные, но это всё равно меня пугает!