gnir-work / react-window-dynamic-list

A naive approach to virtualizing a dynamically sized list
49 stars 9 forks source link

Ref is not accepting functions #9

Closed seahorsepip closed 4 years ago

seahorsepip commented 4 years ago

I had the following (simplified) code:

const listRef = useRef();

<InfiniteLoader>
(({ref}) =>
  <DynamicList ref={r => {
    listRef.current = r; // Set listRef
    ref(r);              // Set infinite loader ref
  }} />
)
</InfiniteLoader>

But dynamic list gave errors about the internal listRef.current being undefined.

This also happens when you try to just use the ref from infinite loader for example:

<InfiniteLoader>
(({ref}) =><DynamicList ref={ref} />)
</InfiniteLoader>

In the end I solved this issue like this:

const listRef = useRef();

<InfiniteLoader>
(({ref}) => {
  ref(listRef); // Set infinite loader ref
  return (
    <DynamicList ref={listRef} /> // Set dynamic list ref
  );
})
</InfiniteLoader>

So that means dynamic list accepts ref as input as seen in example 2 but does not return localRef as output as seen in in example 1. Getting the ref with an arrow function is a common pattern in React though. Could this be added or clarified in the documentation?

gnir-work commented 4 years ago

I will check this PR tomorrow. Thanks for the help! 🐻