SolidJSS
SolidJS•17mo ago•
16 replies
Mr Void

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

I have a grid view where multiple card components are rendered.

The issue is that all cards are re-rendered when one of the cards' data is updated in the store. Is there a way to prevent re-rendering everything when one object in the array is modified?

This is how the card is modified:

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
        })
    })
}


and here is how i load & filter cards

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>
Was this page helpful?