Skip to content

Commit 00fd6fb

Browse files
Improve Solid adapter.
Use `createEffect` to ensure scrollElement ref is connected to DOM and ownerDocument/window before attempting to update measurements for it. Otherwise, `virtualizer.targetWindow` will be set to null (in _willUpdate), the scrollElement rect to nothing and no items will be displayed. In addition, remove some logic that causes redundant work to be done (e.g. `setOptions` called multiple times, `_willUpdate` called on mount which is a no-op if the scollElement didn't change). Instead rely on the options reactivity to perform the bulk of the work. Also, reset virtual items store when options change to ensure that reactivity is maintained - e.g. so that `measureItem` is called again in a `<For>` loop if `scrollMargin` changed.
1 parent 06d631e commit 00fd6fb

File tree

1 file changed

+4
-5
lines changed

1 file changed

+4
-5
lines changed

packages/solid-virtual/src/index.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '@tanstack/virtual-core'
1010

1111
import {
12-
createComputed,
12+
createEffect,
1313
createSignal,
1414
mergeProps,
1515
onCleanup,
@@ -55,22 +55,19 @@ function createVirtualizerBase<
5555
}
5656

5757
const virtualizer = new Proxy(instance, handler)
58-
virtualizer.setOptions(resolvedOptions)
5958

6059
onMount(() => {
6160
const cleanup = virtualizer._didMount()
62-
virtualizer._willUpdate()
6361
onCleanup(cleanup)
6462
})
6563

66-
createComputed(() => {
64+
createEffect(() => {
6765
virtualizer.setOptions(
6866
mergeProps(resolvedOptions, options, {
6967
onChange: (
7068
instance: Virtualizer<TScrollElement, TItemElement>,
7169
sync: boolean,
7270
) => {
73-
instance._willUpdate()
7471
setVirtualItems(
7572
reconcile(instance.getVirtualItems(), {
7673
key: 'index',
@@ -81,6 +78,8 @@ function createVirtualizerBase<
8178
},
8279
}),
8380
)
81+
setVirtualItems([])
82+
virtualizer._willUpdate()
8483
virtualizer.measure()
8584
})
8685

0 commit comments

Comments
 (0)