useListDrawer filterOptions cause infinite loop

[HriBB]

Describe the Bug

I am trying to show a custom ListDrawer with a predefined filter.

import { useListDrawer } from '@payloadcms/ui'

const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
  collectionSlugs: ['routes'],
  filterOptions: {
    routes: {
      location: { equals: fields.location.value },
    },
  },
})

But as soon as I set the filterOptions prop, I get an Error: Maximum update depth exceeded..

I am porting my app from v2 to v3 beta. Using beta 111 ATM.

Looking at the code, the same problem exists in the latest beta and probably in the stable version as well (at least it did when I last tried).

So I copy-pasted ListDrawer component into the project and if I remove filterOptions prop from const MemoizedDrawer = useMemo() dependency array, it works fine.

const MemoizedDrawer = useMemo(() => {
  return (props) => (
    <ListDrawer
      {...props}
      closeDrawer={closeDrawer}
      collectionSlugs={collectionSlugs}
      drawerSlug={drawerSlug}
      filterOptions={filterOptionsRef.current}
      key={drawerSlug}
      selectedCollection={selectedCollection}
      uploads={uploads}
    />
  )
}, [
  drawerSlug,
  collectionSlugs,
  uploads,
  closeDrawer,
  selectedCollection,
  //filterOptions
])

Not really sure why this is happening. Need to investigate further. Maybe some prop is being mutated? Am I doing something wrong?

Link to the code that reproduces this issue

https://github.com/HriBB/payload-listdrawer-repro

Reproduction Steps

useListDrawer and define a filterOptions prop

import { useListDrawer } from '@payloadcms/ui'

const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
  collectionSlugs: ['routes'],
  filterOptions: {
    routes: {
      location: { equals: fields.location.value },
    },
  },
})

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Binaries:
Node: 20.17.0
npm: 10.9.0
Yarn: N/A
pnpm: 9.12.2
Relevant Packages:
payload: 3.0.0-beta.111
next: 15.0.0-canary.173
@payloadcms/db-mongodb: 3.0.0-beta.111
@payloadcms/db-postgres: 3.0.0-beta.111
@payloadcms/graphql: 3.0.0-beta.111
@payloadcms/next/utilities: 3.0.0-beta.111
@payloadcms/plugin-form-builder: 3.0.0-beta.111
@payloadcms/plugin-nested-docs: 3.0.0-beta.111
@payloadcms/plugin-seo: 3.0.0-beta.111
@payloadcms/richtext-lexical: 3.0.0-beta.111
@payloadcms/richtext-slate: 3.0.0-beta.111
@payloadcms/translations: 3.0.0-beta.111
@payloadcms/ui/shared: 3.0.0-beta.111
react: 19.0.0-rc-3edc000d-20240926
react-dom: 19.0.0-rc-3edc000d-20240926
Operating System:
Platform: linux
Arch: x64
Version: #8-Ubuntu SMP PREEMPT_DYNAMIC Mon Sep 16 13:41:20 UTC 2024
Available memory (MB): 31049
Available CPU cores: 22

[jmikrut]

Hey @HriBB — you are causing an infinite loop because you are making a new object for your filterOptions each time you render here:

const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
  collectionSlugs: ['routes'],
  // This is a newly created object each time the parent component renders!
  filterOptions: {
    routes: {
      location: { equals: fields.location.value },
    },
  },
})

To fix, you could store the filterOptions in state so it does not change:

const [myFilterOptions] = useState({
  routes: {
    location: { equals: fields.location.value },
  },
});

const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
  collectionSlugs: ['routes'],
  // Now the object will be equal in subsequent renders
  filterOptions: myFilterOptions,
})

[HriBB]

Ahhh such a beginner mistake :) Would be worth mentioning this in the docs ;)

Thanks