This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Integrating with 3rd Party Libraries" Lesson
[00:00:00]
>> Brian Holt: Question.
>> Speaker 2: So you mentioned this could have an application for using something like D3, or data visualization stuff, so we need to make some chart and have it stay in our DOM even though React is constantly destroying and replacing things. So can you walk us through, like is this el going to persist now and we can slap a D3 chart into it and it's not gonna be destroyed by React, or how do we do that?
[00:00:30]
>> Brian Holt: Let's see [COUGH] how I can show this to you. So here's how I would do that. Again, you don't have to follow along with me here, cuz I'm just making this stuff out on the fly. I'd make a new component call it D3Wrapper.js or something like that.
[00:00:45] I'd make a import React from react. Class from D3Wrapper extends Component. One, you should definitely watch Shirley Wu's talks on this. She's the world expert on integrating React and D3.
>> Speaker 2: Yeah, she has like an entire course that's coming out on literally D3 plus React.
>> Brian Holt: She's one of my favorite teachers in the entire world, so definitely, definitely catch that.
[00:01:25] She's the magician, like literally the Sorceress of D3.
>> Brian Holt: Okay, so I would, let's say that I'm making things up, I don't know D3 very well. Return div, and here I would have the ref of el, this.el = el, right, so now I have a handle on this.
[00:01:51] I would put this thing called shouldComponentUpdate. And I'm going to say return false. This will make this component never update, ever, right? Which is what we want for the wrapper for D3. And then here in component,
>> Brian Holt: DidMount. Cuz we have to do it after the component mounts cuz that's when the el is actually gonna exist.
[00:02:15] I would say. I'm, again, d3.init(this.el). Whatever that looks like for d3.
>> Brian Holt: And then again on componentWillUnmount. You have to say like d3.destroy or clean up or whatever it is, this.el. Whatever cleanup that would have to be done there. Maybe I shouldn't use D3 cuz I'm sure I'm getting everything wrong about D3, but this is the general pattern.
[00:02:52] Maybe to say this is like lib, or something like that, some sort of library.
>> Brian Holt: So that's what this would look like for basically any library. More or less, the key part being here, here's your ref, here's how you start the application here in componentDidMount, here's how you clean it up.
[00:03:18] And then this shouldComponentUpdate, return false is key, this basically tells React never update this. Never destroy it, never mess with this anymore. And time that React tries to rerender it, it's going to say, hey, I don't need to update it, stop looking, right?
>> Speaker 2: We also have to have shouldComponentUpdate false on any parents of that so that those are also not deleted?
[00:03:42]
>> Brian Holt: Well, if you just stop rendering something, it's going to stop rendering it. So this always would have to be rendered, right? You'd have to take care to make sure that our parent component would not be destroyed but this itself would never update.
>> Brian Holt: But the danger of this now, the shouldComponentUpdate return false, if I was keeping track of state in here, if I updated state it would re-render.
[00:04:12]
>> Brian Holt: All right?
>> Brian Holt: So that's how you would do that.