Scrolling to item on load

I have a situation where I want to scroll to the current month in a calendar on load. However useEffect is ran only once at the initial render when listRef.current is undefined and that’s it. I would’ve assumed useEffect to run again once listRef.current has a value however it does not. Could this be a bug? Here is the code to reproduce:

function Calendar() {
  const listRef = useRef()

  useEffect(() => {
    listRef.current?.scrollToItem(10)
  }, [listRef.current])

  return (
    <AutoSizer>
      {({ width, height }) => (
        <VariableSizeList
          itemCount={100}
          itemSize={200}
          height={height}
          width={width}
          ref={listRef}
        >
          {({ index, style }) => (
            <Month index={index} key={index} style={style} />
          )}
        </VariableSizeList>
      )}
    </AutoSizer>
  )
}

[jancama2]

This won’t work because of two things:

1. a dependency of the useEffect is a ref, which never changes, or a ref.current value, which changes, but a component won’t re-render itself because of ref.current change (only state or props do it)
2. useEffect is in a bad scope

function CalendarList({ width, height }) {
  const listRef = useRef()

  useEffect(() => {
    listRef.current.scrollToItem(10)
  }, [])

  return (
        <VariableSizeList
          itemCount={100}
          itemSize={200}
          height={height}
          width={width}
          ref={listRef}
        >
          {({ index, style }) => (
            <Month index={index} key={index} style={style} />
          )}
        </VariableSizeList>
  )
}

function Calendar() {
  return (
    <AutoSizer>
      {({ width, height }) => (
        <CalendarList width={width} height={height} />
      )}
    </AutoSizer>
  )
}

This ensures useEffect is called only when the VariableSizeList is actually mounted. The reason why you need to do this is because of AutoSizer which “takes some time” to render its children.

[jancama2]

@pavsidhu np, btw would be better to use useLayoutEffect to avoid some ui flickering