'Update state more efficiently in React native?

I'm building a checklist app with multiple tabs. It works but when the list grows larger, it's not performing very snappy when I want to check 1 item for instance. I have the feeling this is because the entire state (consisting of all items in all tabs) is updated, when I just want to update 1 item. The tabs and items are generated dynamically (ie, at compile-time I don't know how many tabs there will be). Any idea how this could be done more efficiently? This is the (stripped down) state provider:

export default class InpakStateProvider extends React.Component {

state = {projectName: " ", tabs: [{name: " ", items: [{checked: false, name: " "}]}]};   

DeleteItem = (categoryname: string, itemname: string) => {
    let stateTabs = this.state.tabs;

    var tab = stateTabs.find((tab) => tab.name == categoryname);
    if(tab){
        let index = tab.items.findIndex(el => el.name === itemname);
        tab.items.splice(index, 1);
    }

    this.setState({projectName: this.state.projectName, tabs: stateTabs})      
};

CheckItem = (categoryname: string, itemname: string) => {
    var tab = this.state.tabs.find((tab) => tab.name == categoryname);
    if(tab){
        let index = tab.items.findIndex(el => el.name === itemname);
        tab.items[index] = { ...tab.items[index], checked: !tab.items[index].checked };
    }

    this.setState({projectName: this.state.projectName, tabs: this.state.tabs}); 
};

ClearChecks = () => {

    let stateTabs = this.state.tabs; 

    stateTabs.forEach((tab) => { 
        let tabItems = [...tab.items];
        tabItems.forEach((item) => item.checked = false);           
    });

    this.setState({projectName: this.state.projectName, tabs: stateTabs})       
}

render(){
    return (           
        <Context.Provider
            value={{
                projectName: this.state.projectName,
                tabs: this.state.tabs,                                
                DeleteItem: this.DeleteItem,
                CheckItem: this.CheckItem,
                ClearChecks: this.ClearChecks,             
            }}
        >
            {this.props.children}
        </Context.Provider>
    );
}

}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source