This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "shouldComponentUpdate" Lesson
[00:00:00]
>> Brian Holt: Just give a little bit more explanation into ComponentWillUnmount. Let's go into details.js. And I'm gonna do something really bad here. I'm gonna say shouldComponentUpdate, return false. So now I'm gonna go into here, it's never even gonna get past loading, right? Cuz when it first renders for the first time, it shows you loading.
[00:00:26] Then it calls set state to update it and then guess what? Sorry, I'm not gonna re-render it cuz you said shouldComponentUpdate return false.
>> Brian Holt: So that's the danger of shouldComponentUpdate is you can get into situations like this. Imagine you inherited this application and you saw this happen, you'd be like, what is happening?
[00:00:46] I guess, maybe the API's not returning right. It's very opaque of where the bug is coming from. So shouldComponentUpdate is a giant foot gun. This is a really, really easy way to shoot yourself in the foot. Okay but,
>> Brian Holt: For example, let's say you have a really complicated, deeply nested state, and sometimes parts of it update, parts of it don't update.
[00:01:13] You can get really sophisticated here with shouldComponentUpdate of telling React when to update and when not to and when you know it needs to and when you don't. That's what shouldComponentUpdates normally force for performance optimization. So if you have a component that's really slow, go write a fast shouldComponentUpdate, cuz this is gonna get run a lot.
[00:01:32]
>> Brian Holt: Cuz if you don't have a shouldComponentUpdate, React has its own internal version which it does at a diffing against your state, right? And if it sees that your state has stayed the same, it doesn't update. And if it sees that your state has changed, it will update.
[00:01:45] It's pretty fast. React is normally faster than you're gonna write it. [LAUGH] It's fast enough, TM, right? [LAUGH] But sometimes it's not and that's what shouldComponentUpdate's for. If you have something that's totally static, like an SVG. One, don't put SVGs in React. [LAUGH] But if you do, one don't, but if you do, just do a shouldComponentUpdate, return false cuz it's never gonna change, it has no state.
[00:02:11]
>> Brian Holt: But-
>> Student: Why do you say don't put SVGs?
>> Brian Holt: They're complicated, and you start having these crazy long trees right? And it should just be an SVG object, because that's way faster. That allows the browser to do what it does best, which is render stuff.
>> Brian Holt: Now that's not always the truth.
[00:02:35] If you go watch some of Sarah Drasner's talk with the stuff that she does with React in SVGs, she'll put that stuff into it. But she's actually doing manipulations with React into the SVG, which is cool. So if you're doing stuff like that, one, you're probably using something green sock anyway to do it.
[00:02:52] In which case you'd have to use the lib wrapper that I was showing you. But if you're not, if you actually are doing the then you could. But make sure you're actually utilizing React for that. Otherwise, just use HTML objects.