Handler Allocation Examples

handler.tsx

class ParentComponent extends React.Component<any, any>{
    render(): JSX.Element {
        return (
            <div>
                <EveryRenderComponent id={1} doTheThing={this.doTheNumberThing} />
                <OnMountComponent id={2} doTheThing={this.doTheNumberThing} />
                <OnParentComponent id={3} doTheThing={this.doTheDataSetThing} />
            </div>
        )
    }

    doTheNumberThing = (id: number) => {
        console.log("Zhu Li! Do the thing", id);
    }

    doTheDataSetThing = (event: any) => {
        console.log("Zhu Li! Do the thing", event.target.dataSet.id);
    }    
}

// Allocates handler on every render. IS BAD.
class EveryRenderComponent extends React.Component<any, any> {
    render(): JSX.Element {
        return (
            <button onClick={() => this.props.doTheThing(this.props.id)}/>
        );
    }
}

// Allocates handler on initializing only.
class OnMountComponent extends React.Component<any, any> {
    render(): JSX.Element {
        return (
            <button onClick={this.doTheThing}/>
        );
    }

    private doTheThing = (event: any) => {
        this.props.doTheThing(this.props.id);
    }
}

// Handler is allocated once per parent. Seems ideal for huge lists of items.
class OnParentComponent extends React.Component<any, any> {
    render(): JSX.Element {
        return (
            <button onClick={this.props.doTheThing} data-id={this.props.id}/>
        );        
    }
}