Editing while filtering becomes extremely slow (unusable) on 3000 rows

UI Components for React
Post Reply
n4zroth
Posts: 3
Joined: 03 Jul 2020, 19:04

05 Jul 2020, 01:55

After changing some code from the example to make editing while filtering work, editing becomes so slow it's unusable. I'm guessing it's because state update happens on every key press which is necessary because the value of the edit InputText is bound to the state. What can I do to improve performance or do differently altogether? My editing code looks as follows:

Code: Select all

    onEditorValueChange = (props, value) => {
        let entries= [...this.state.entries];
        let index = entries.findIndex(p => p.id === props.rowData.id);
        if (index !== -1) {
            entries[index][props.field] = value;
        }
        this.setState({entries: entries});
    }

    yearEditor = props => {
        return <InputText type={"text"}
                          value={this.state.entries[this.state.entries.findIndex(p => p.id === props.rowData.id)]["year"]}
                          onChange={(e) => this.onEditorValueChange(props, e.target.value)}/>;
    }
and setting editor={this.yearEditor} on the appropriate column.

n4zroth
Posts: 3
Joined: 03 Jul 2020, 19:04

05 Jul 2020, 02:16

Actually I was able to fix it via a workaround: I'm binding not value but defaultValue of the InputText to the current state and switched from onChange to onKeypress and then only change the state on "Enter".

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest