Binding

why?

options

• (a) bind in constructor (ES2015)

• (b) class properties (ES2022)

• (c) bind in render

• (d) arrow function in Render

• ?? why no (e) pass the parent object

(a) bind in constructor (ES2015)

constructor(props) {

super(props)

this.setUser = this.setUser.bind(this)

}

 

<button onClick={this.handleClick}

(b) class properties (ES2022)

handleClick = () => {

// use 'this'

};

 

<button onClick={this.handleClick}

(c) bind in render

😞 creates a new function each render

<button onClick={this.handleClick.bind(this)}

(d) arrow function in Render

😞 creates a new function each render

<button onClick={() => this.handleClick()}

?? why no (e) pass the parent object (if subcomponent)

// parent

class Parent implements IHandleClicksFromChild extends ... {

render() {

<Child clickHandler={this}

 

//child

interface IHandleClicksFromChild {

click: () => void

}

 

class Child extends Component<{clickHandler: IHandleClicksFromChild}>

 

// still uses 'this', so same problem here

this.props.clickHandler.click()

 

//eg. arrow function in render

<button onClick={() => this.props.clickHandler.click()}

• maybe causes memory leaks?

• could pass it as an interface instead of the entire component

• Child would have to bind then anyway to interact with UI things

Passing parameters

• arrow function in Render

• bind in render

• using data-attributes

prevent function called too often

• Throttle

• Debounce

• requestAnimationFrame throttling

(src: Passing Functions to Components – React)