I have an application that is essentially a search with dropdown filters. The idea is to make them seamless with no buttons. When a user reaches the bottom of the page, fetchBooks is called again, except this time it adds on to the list instead of replacing it wholesale. Inversely, if a user types something else in or chooses a different dropdown option, the idea is to use all the selections (which are now parts of the state) to construct an API query with params and get a whole new set which can then increase in size as a user traverses it.

Upon render, there are several state variables that are created via useState().

const bookTitle, setBookTitle = useState()
const isFiction, setIsFiction = useState()

I’m using our homegrown component library to implement the dropdowns but they have simple controls – onChange, initialValue – nothing crazy.

I’m using something similar to detect if a user reaches the end of the list:

useEffect(() => {
   const onScroll = function () {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        fetchBooks(true) // true indicates we want to add to the list
      }
   }
   window.addEventListener('scroll', onScroll)
   return () => window.removeEventListener('scroll', onScroll)
}, [])

The problem is that whenever fetchBooks is called the second time around, all of the values of dropdowns stored in state are undefined. I could try to modify the code not to identify too much but that’d be a bit of a project.

My question is – does this ring any bells? Why would a function that exists in the same context of one component see stored state variables as undefined?