I encountered a similar issue, but like the OP, I had also included a typo in my code. The video runs quite fast, so I would recommend that anyone following along takes the time to make sure all their code matches what Guil writes. I've slowed the video down quite a bit now.
The toISOString() method of Date instances returns a string representing this date in the , a simplified format based on ISO 8601, which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always UTC, as denoted by the suffix Z.
None.
A string representing the given date in the according to universal time. It's the same format as the one required to be recognized by Date.parse().
RangeError
Thrown if the date is or if it corresponds to a year that cannot be represented in the date string format.
If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
How do I bind a function to a component instance?
There are several ways to make sure functions have access to component attributes like class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
5 and class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6, depending on which syntax and build steps you are using.
Bind in Constructor (ES2015)
class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
Class Properties (ES2022)
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
Bind in Render
class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick.bind(this)}>Click Me</button>; } }
Note:Using
class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
7 in render creates a new function each time the component renders, which may have performance implications (see below).
Arrow Function in Render
class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }
Note: Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.
Is it OK to use arrow functions in render methods?
Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.
If you do have performance issues, by all means, optimize!
Why is binding necessary at all?
In JavaScript, these two code snippets are not equivalent: var method = obj.method; method();
Binding methods helps ensure that the second snippet works the same way as the first one.
With React, typically you only need to bind the methods you pass to other components. For example, class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
8 passes class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
9 so you want to bind it. However, it is unnecessary to bind the class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
0 method or the lifecycle methods: we don’t pass them to other components.
This post by Yehuda Katz explains what binding is, and how functions work in JavaScript, in detail.
Why is my function being called every time the component renders?
Make sure you aren’t calling the function when you pass it to the component: render() { // Wrong: handleClick is called instead of passed as a reference! return <button onClick={this.handleClick()}>Click Me</button> }
Instead, pass the function itself (without parens): render() { // Correct: handleClick is passed as a reference! return <button onClick={this.handleClick}>Click Me</button> }
How do I pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass parameters: <button onClick={() => this.handleClick(id)} />
This is equivalent to calling class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
1: <button onClick={this.handleClick.bind(this, id)} />
Example: Passing params using arrow functions
class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
0
Example: Passing params using data-attributes
Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks. class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
1
How can I prevent a function from being called too quickly or too many times in a row?
If you have an event handler such as class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
2 or class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
3 and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be done by using:
- throttling: sample changes based on a time based frequency (eg )
- debouncing: publish changes after a period of inactivity (eg )
-
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 throttling: sample changes based on
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 (eg
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
8)
See this visualization for a comparison of class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
9 and class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick.bind(this)}>Click Me</button>; } }
0 functions.
Note:class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
5,
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
4 and
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
8 provide a
class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick.bind(this)}>Click Me</button>; } }
4 method to cancel delayed callbacks. You should either call this method from
class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick.bind(this)}>Click Me</button>; } }
5 or check to ensure that the component is still mounted within the delayed function.
Throttle
Throttling prevents a function from being called more than once in a given window of time. The example below throttles a “click” handler to prevent calling it more than once per second. class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
2
Debounce
Debouncing ensures that a function will not be executed until after a certain amount of time has passed since it was last called. This can be useful when you have to perform some expensive calculation in response to an event that might dispatch rapidly (eg scroll or keyboard events). The example below debounces text input with a 250ms delay. class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
3
class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 throttling class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 will fire in the next frame. The browser will work hard to ensure that there are 60 frames per second (60 fps). However, if the browser is unable to it will naturally limit the amount of frames in a second. For example, a device might only be able to handle 30 fps and so you will only get 30 frames in that second. Using class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 for throttling is a useful technique in that it prevents you from doing more than 60 updates in a second. If you are doing 100 updates in a second this creates additional work for the browser that the user will not see anyway.
Note:Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on
class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }
0
class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }
4
Testing your rate limiting
When testing your rate limiting code works correctly it is helpful to have the ability to fast forward time. If you are using class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }
1 then you can use class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }
2 to fast forward time. If you are using class Foo extends Component { handleClick = () => { console.log('Click happened'); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
6 throttling then you may find class Foo extends Component { handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }
4 to be a useful tool to control the ticking of animation frames.