Custom components unmount and mount with every state update

[mknabe]

I have two use cases I need to cover and I was wondering if there are any examples of these already before I dive into figuring it out on my own

1. An editable table where the data in one row can be edited at a time and saving updates the table
2. A table where each row has a checkbox to select the row then a button to submit the selected rows

Thanks!

[tannerlinsley]

These use cases have not yet been implemented yet. Off the top of my head, you'll need a custom render for the checkbox column, and you'll also need to be keeping track of the editable/checked state outside of the table in react state or redux. Shouldn't be too difficult though. It's just state and templating :) If possible, try and build a very basic version of it on top of one of the examples in the storybook. Then you can PR it as a new story for others to see :)

…

On Wed, Jan 25, 2017 at 9:14 AM mknabe ***@***.***> wrote: I have two use cases I need to cover and I was wondering if there are any examples of these already before I dive into figuring it out on my own 1. An editable table where the data in one row can be edited at a time and saving updates the table 2. A table where each row has a checkbox to select the row then a button to submit the selected rows Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#42>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCXZ9yViB4SA9rS0A2afFldtv5Fkeks5rV3TYgaJpZM4LtrQh> .

[mknabe]

Will do

[mknabe]

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)

[mi-lee]

@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?

[mknabe]

@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>
  );
}

[tannerlinsley]

@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.

[mknabe]

@tannerlinsley looks fixed! 🥇

[tannerlinsley]

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!

[mi-lee]

cool, thanks for getting back to me @mknabe!