From fb42df0fc174697e6638aacfdb0d37b5014c3124 Mon Sep 17 00:00:00 2001 From: inokawa <48897392+inokawa@users.noreply.github.com> Date: Fri, 6 Dec 2024 01:47:49 +0900 Subject: [PATCH] Refactor state update on render --- src/core/store.ts | 21 ++++++++++++--------- src/react/VGrid.tsx | 8 ++------ src/react/Virtualizer.tsx | 8 ++------ src/react/WindowVirtualizer.tsx | 4 +--- src/solid/Virtualizer.tsx | 8 ++------ src/solid/WindowVirtualizer.tsx | 4 +--- src/svelte/Virtualizer.svelte | 8 ++------ src/svelte/WindowVirtualizer.svelte | 4 +--- 8 files changed, 23 insertions(+), 42 deletions(-) diff --git a/src/core/store.ts b/src/core/store.ts index d765be26..daceff38 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -397,15 +397,18 @@ export const createVirtualStore = ( break; } case ACTION_ITEMS_LENGTH_CHANGE: { - if (payload[1]) { - applyJump(updateCacheLength(cache, payload[0], true)); - _scrollMode = SCROLL_BY_SHIFT; - mutated = UPDATE_VIRTUAL_STATE; - } else { - updateCacheLength(cache, payload[0]); - // https://github.com/inokawa/virtua/issues/552 - // https://github.com/inokawa/virtua/issues/557 - mutated = UPDATE_VIRTUAL_STATE; + const [length, isShift] = payload; + if (cache._length !== length) { + if (isShift) { + applyJump(updateCacheLength(cache, length, true)); + _scrollMode = SCROLL_BY_SHIFT; + mutated = UPDATE_VIRTUAL_STATE; + } else { + updateCacheLength(cache, length); + // https://github.com/inokawa/virtua/issues/552 + // https://github.com/inokawa/virtua/issues/557 + mutated = UPDATE_VIRTUAL_STATE; + } } break; } diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx index cd4f9c60..e93739a8 100644 --- a/src/react/VGrid.tsx +++ b/src/react/VGrid.tsx @@ -240,12 +240,8 @@ export const VGrid = forwardRef( ]; }); // The elements length and cached items length are different just after element is added/removed. - if (rowCount !== vStore.$getItemsLength()) { - vStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [rowCount]); - } - if (colCount !== hStore.$getItemsLength()) { - hStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [colCount]); - } + vStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [rowCount]); + hStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [colCount]); const vRerender = useRerender(vStore); const hRerender = useRerender(hStore); diff --git a/src/react/Virtualizer.tsx b/src/react/Virtualizer.tsx index 4eb16756..2e756e75 100644 --- a/src/react/Virtualizer.tsx +++ b/src/react/Virtualizer.tsx @@ -219,12 +219,8 @@ export const Virtualizer = forwardRef( }); // The elements length and cached items length are different just after element is added/removed. - if (count !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, shift]); - } - if (startMargin !== store.$getStartSpacerSize()) { - store.$update(ACTION_START_OFFSET_CHANGE, startMargin); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, shift]); + store.$update(ACTION_START_OFFSET_CHANGE, startMargin); const rerender = useRerender(store); diff --git a/src/react/WindowVirtualizer.tsx b/src/react/WindowVirtualizer.tsx index f8e77785..23a77a39 100644 --- a/src/react/WindowVirtualizer.tsx +++ b/src/react/WindowVirtualizer.tsx @@ -169,9 +169,7 @@ export const WindowVirtualizer = forwardRef< ]; }); // The elements length and cached items length are different just after element is added/removed. - if (count !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, shift]); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, shift]); const rerender = useRerender(store); diff --git a/src/solid/Virtualizer.tsx b/src/solid/Virtualizer.tsx index f88c3776..c2897dbc 100644 --- a/src/solid/Virtualizer.tsx +++ b/src/solid/Virtualizer.tsx @@ -242,9 +242,7 @@ export const Virtualizer = (props: VirtualizerProps): JSX.Element => { on( () => props.data.length, (count) => { - if (count !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]); } ) ); @@ -253,9 +251,7 @@ export const Virtualizer = (props: VirtualizerProps): JSX.Element => { on( () => props.startMargin || 0, (value) => { - if (value !== store.$getStartSpacerSize()) { - store.$update(ACTION_START_OFFSET_CHANGE, value); - } + store.$update(ACTION_START_OFFSET_CHANGE, value); } ) ); diff --git a/src/solid/WindowVirtualizer.tsx b/src/solid/WindowVirtualizer.tsx index b983da75..e0e0721a 100644 --- a/src/solid/WindowVirtualizer.tsx +++ b/src/solid/WindowVirtualizer.tsx @@ -181,9 +181,7 @@ export const WindowVirtualizer = ( on( () => props.data.length, (len) => { - if (len !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [len, props.shift]); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [len, props.shift]); } ) ); diff --git a/src/svelte/Virtualizer.svelte b/src/svelte/Virtualizer.svelte index 7c510ab5..4271d73c 100644 --- a/src/svelte/Virtualizer.svelte +++ b/src/svelte/Virtualizer.svelte @@ -86,15 +86,11 @@ }); $effect.pre(() => { - if (data.length !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]); }); $effect.pre(() => { - if (startMargin !== store.$getStartSpacerSize()) { - store.$update(ACTION_START_OFFSET_CHANGE, startMargin); - } + store.$update(ACTION_START_OFFSET_CHANGE, startMargin); }); let prevJumpCount: number | undefined; diff --git a/src/svelte/WindowVirtualizer.svelte b/src/svelte/WindowVirtualizer.svelte index 05888976..f76411b2 100644 --- a/src/svelte/WindowVirtualizer.svelte +++ b/src/svelte/WindowVirtualizer.svelte @@ -79,9 +79,7 @@ }); $effect.pre(() => { - if (data.length !== store.$getItemsLength()) { - store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]); - } + store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]); }); let prevJumpCount: number | undefined;