Prevent re-rendering many components when object in store-array is updated

updateCard(flashcard: Flashcard) {
    setState("flashcards", "collections", (collections: FlashcardCollection[]) => {
        const tempCollections = [...collections]
    
        return tempCollections.map((collection) => {
            const tempCollection = {...collection}
            const cards = [...tempCollection.flashcards]

            tempCollection.flashcards = cards.map((currentCard) => {
                if (currentCard.id !== flashcard.id) {
                    return currentCard
                }

                return Object.assign({}, currentCard, flashcard)
            })

            return tempCollection
        })
    })
}

const currentCollection = createAsync<FlashcardCollection>(async (prev) => {
    const collection: FlashcardCollection
        = store.flashcards.collections.find(
            (collection) => collection.id === params.collection_id
        )

    return unwrap(collection)
})

const filteredCards = createMemo(() => {
    const coll = currentCollection() as FlashcardCollection
    return coll.flashcards.filter(card => /* filtration condition here */)
})

<For each={filteredCards()}>
    {(flashcard) => <Card data={flashcard} /> }
</For>