Check out a free preview of the full Complete Intro to React, v5 course:
The "Index Click Q&A" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers an audience question about the functionality of the incrementing function in the carousel component. Further explanation is given as to why this is a more performant option than using a bind function to do the same task. The carousel is then implemented into the details module.

Get Unlimited Access Now

Transcript from the "Index Click Q&A" Lesson

[00:00:00]
>> Speaker 1: Could you explain the plus sign in front of eventTargetDataSetIndex again?
>> Brian Holt: When you get back something from the data set, it's gonna be a string, right? Like a string five. And I need it to be a number, not a string, right? So if I put +string5. I get back the actual number of five.

[00:00:20]
>> Speaker 1: Okay, so of course, it's an integer.
>> Brian Holt: A number, yeah. So you could have also just said parseInt("5",10) which just means you want it to be in base ten. And that would give you the same thing as well. But plus signs is far less work, so. Very well there might be something like this, stop buying this here.

[00:00:45] So.
>> Speaker 3: And then adding index to that call.
>> Brian Holt: Yeah, and you could have done this as well right, for sure and then not had the data set here.
>> Brian Holt: So then this would have had worked like this instead of getting an event.
>> Brian Holt: There would have been an index like this and then you would've just been calling index.

[00:01:13]
>> Brian Holt: Yes, this works. So let me tell you why people have historically not done this, and then I'll tell you why that's silly that people haven't done it this way.
>> Brian Holt: So this does work. People did not used to do this, because this calling bind used to be very expensive, far more expensive than you would have ever expected.

[00:01:39] It used to be one of the slowest things you could do in Chrome. Now about two years ago, Chrome fixed this and made dot bind much faster. But why is this different from doing it in the constructor? This is different because every time I call render, this is calling bind, right?

[00:02:00] And if that was really so that means you slow down your renders, which means that you're slowing down the performance of your entire application. So people have established the best practice of, don't do it this way. But the good news is, they fixed it. It is much faster now.

[00:02:14] And so this does actually work okay, but we still have to deal with old browsers and so in old browsers, this is still really slow. So it works and it's slow, it's creating and destroying functions every single time. That you run this, which hooks do now anyway. So I'm not really too sure if that's a big deal anymore.

[00:02:36] But the real answer to that question is the dot bind ends up being expensive.