usage of ref with VariableSizeList does not re-render when ref.current is set

I’m trying to use ref to set the scroll position when data is available. I believe this broke when upgrading to React 16.8.1.

Minimal example: https://codesandbox.io/s/8p7yy2xw2

[bvaughn]

The logs show that your component renders twice (once with test false and once true) and your effect handler is called twice (once after each render). The first time it’s called, the list ref is null– because you don’t actually render the list when test is fail:

The next time it’s called, the ref points at the newly rendered list. 😄

[heyimalex]

There’s a difference between how renderChild in your example and rowRenderer are being used. In your sandbox. you call renderChild directly, which will execute in place and return a Child element. What’s returned from Parent’s render ultimately looks like this:

<div><Child num={someNumber} /></div>

If you check where react-window uses the children prop, you’ll see it’s using React.createElement and passing in rowRenderer as the type. If we update your sanbox to use React.createElement instead of calling the renderChild directly, what is returned from Parent’s render would look (roughly) like this:

<div><renderChild num={someNumber} /></div>

The big idea is that renderChild(props) and <renderChild {...props} /> look the same, but are handled very differently by React. One executes in place, just like any other function call; React doesn’t know about it because all it sees is what’s returned from render. The other hands off execution to React, and in doing so is treated as an actual component.

The kind of “aha” thing to remember is that <Component {...props} /> is syntactic sugar for React.createElement(Component, props), which ultimately becomes an object kinda like { type: Component, props: props }. Notice Component isn’t called, we just wrapped it up with the props we want it to be called with and return that. React knows what to do with it and takes care of calling it sometime later.

I hope I explained that alright!