Custom components unmount and mount with every state update about table HOT 9 CLOSED

@mi-lee I mean that if you have a custom render for a column like below. MyComponent will mount/unmount on every state change instead of just re-rendering. It can be a pretty big performance hit depending on what MyComponent is doing.

We are using redux-form and the performance hit was substantial so we had to switch to a different data table library :(

render: (props) => {
  return (
    <span className='number'>
      {props.value}
      <MyComponent />
    </span>
  );
}

from table.

from table.

Will do

from table.

I started implementing my first use case and it was easy enough... but it looks like if you do a custom column render, it will mount/unmount that component on every update which can cause a major slowdown. I'm not sure how to fix this but I plan on looking into it.

Edit: this isn't as much of a problem in production mode (with 25 rows)

from table.

@mknabe, do you mean that it re-rendered the entire table (rather than the cell or row)? I'm also looking for a table with good editing capabilities. Did you end up making a PR?

from table.

@mknabe, this may have been due to some lack of internal key-ing. Have you tried the latest version? This is definitely not the type of functionality I want to keep around, so any help in making it work would be fantastic.

from table.

@tannerlinsley looks fixed! 🥇

from table.

Awesome! Glad to hear :) You can also use standard (non-react) functions as custom renderers so long as they return a primitive that react can render (string, number, boolean, etc) :) Cheers!

from table.

cool, thanks for getting back to me @mknabe!

from table.