React: Passing Functions to Components
September 17th, 2022
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