petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

Providing a react Ref to scrollerRef is generating an error #274

Closed Ethorsen closed 2 years ago

Ethorsen commented 3 years ago

A react ref created with React.createRef/useRef will spit out an error if given directly to scrollerRef prop;

This will generate an error

const scrollerRef = useRef();
<Virtuoso
   scrollerRef={scrollerRef}

Work around for now, give a callback function

const scrollerRef = useRef();
<Virtuoso
   scrollerRef={(ref) => { scrollerRef.current = ref; }}

https://codesandbox.io/s/long-pine-e9g8g?file=/src/App.js

petyosi commented 3 years ago

Can confirm that - it does not accept a react ref. The TS signature and the docs describe that. The workaround is not that much of a problem, but I am open to PRs.

gajus commented 2 years ago

You should memoize that callback

const handleScrollerRef = useCallback((ref) => {
  scrollerRef.current = ref;
}, []);