useAsyncList: queue all the work upfront

WordPress · Feb 20, 2023 · 47e7b5b · 47e7b5b
1 parent 7648347
commit 47e7b5b
Showing 1 changed file with 9 additions and 12 deletions.
diff --git a/packages/compose/src/hooks/use-async-list/index.ts b/packages/compose/src/hooks/use-async-list/index.ts
@@ -57,19 +57,16 @@ function useAsyncList< T >(
  setCurrent( firstItems );
 
  const asyncQueue = createQueue();
- const append = ( nextIndex: number ) => () => {
- if ( list.length <= nextIndex ) {
- return;
- }
- flushSync( () => {
- setCurrent( ( state ) => [
- ...state,
- ...list.slice( nextIndex, nextIndex + step ),
- ] );
+ for ( let i = firstItems.length; i < list.length; i += step ) {
+ asyncQueue.add( {}, () => {
+ flushSync( () => {
+ setCurrent( ( state ) => [
+ ...state,
+ ...list.slice( i, i + step ),
+ ] );
+ } );
  } );
- asyncQueue.add( {}, append( nextIndex + step ) );
- };
- asyncQueue.add( {}, append( firstItems.length ) );
+ }
 
  return () => asyncQueue.reset();
  }, [ list ] );