I'm working on a Table component, @blueprintjs/table was an inspiration, it works perfectly if a class is wrapping the Table component, but when I'm using pagination, the content stops changing when a function is a wrapper instead. Here's a link to the code that replicates the problem I'm talking about. I added console.logs to show that items visible by cellRenderer is different than items visible on the component root level: https://codesandbox.io/s/beautiful-water-7hgjq

I don't think it's an issue with keys, and the pages do change properly. The exact point of failure that I found is TableRenderer component, because if columnArray is initialized only once, it works only for classes, but if I recreate the array on every children change, it starts working for functions as well. So I'm guessing it has something to do with cellRenderer reference.

What am I missing? Are scopes for class components handled differently in React, or maybe in JavaScript itself?