measureRef prevents component list item component memoization

[vinczemarton]

Bug Report

Describe the Bug

I'm testing the library and with dynamic sizing I cannot get a memoized component to work. What I can see is that measureRef is always a new reference which prevents us from using memo() to its effect.

Maybe moving the measureRef function to the top component level and wrapping it in useCallback can help, but I'm having trouble making a working PR.

How to Reproduce

1. Start from the Dynamic Size example.
2. add some logging to keep track of renders
3. add memoization to the accordion component

You can see that adding memoization does not change how many times a component is rendered. It is rerendered whenever something new is added/removed from the list.

It seems to be the measureRef reference as when I don't provide the measureRef function to the component it seems to work fine.

CodeSandbox Link

Show me the bug on CodeSandbox.

Expected Behavior

Only the newly inserted elements should rerender.

Screenshots

Your Environment

• Device: [MacBook Pro]
• OS: [macOS]
• Browser: [Chrome]
• Version: [latest]