"Each block should have a 'key' attribute" warning in a paginated {#each} list
0 reputation · 05 Jun 2025, 06:08 UTC
I'm building a paginated table in Svelte (Svelte 4, SvelteKit) where a load function reads ?page and limit search params, and the component slices a larger dataset with a reactive statement like $: displayed = allData.slice((page-1)*limit, page*limit). The slice renders through an {#each} block.
When I page through the results, the dev console shows the warning Each block should have a 'key' attribute for items that may change. I understand the warning relates to keyed updates, but my rows contain form inputs and a small child component with local state, and I'm unsure what counts as a stable key when the underlying records can be inserted or deleted between page changes.
My questions:
- For a paginated slice, should the key be the record's unique ID, or is the array index acceptable given the slice is rebuilt on every page change?
- Does omitting the key here actually risk stale input/component state when rows reorder, or is it purely a performance concern?
- If I later switch from offset slicing to keyset (cursor) pagination, does the keying strategy need to change?