Check out a free preview of the full Complete Intro to React, v8 course

The "Pure React Q&A" Lesson is part of the full, Complete Intro to React, v8 course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers students' questions regarding if const is always used when creating components and what React.createRoot does. A brief discussion regarding the benefits of using React is also provided in this segment.

Preview
Close

Transcript from the "Pure React Q&A" Lesson

[00:00:00]
>> Yeah, Mark.
>> Do you always use const when creating components?
>> It's a good question. So I have const App = here, totally preference. I use const, and that's just force of habit. It's one of the things like semicolons, I really just profoundly don't care how you choose to do it.

[00:00:22]
It's literally my least favorite thing to argue about, it's these stupid syntactical things, right, of do you do it this way? Do you do it this way? Does it work? Does it compile? Can I read your code? If all those things are yes, I just don't care. I really don't care.

[00:00:38]
So you can put var here. You can put let here. You can put const here, doesn't matter. So maybe stated a little less snarkily, which is hard for me sometimes, it makes no difference to React, right? Just write however you normally write JavaScript. That's a better way to answer that question.

[00:01:04]
>> There's a question around createRoot that wasn't in the previous versions of the course.
>> Correct, okay, yeah. So let's talk about createRoot here, which comes from ReactDOM. This is the new way of rendering to the DOM from React. It used to be ReactDOM just render, right? And it's even still in there, so ReactDOM.render, you don't have to copy this cuz I'm just showing you how it works.

[00:01:36]
And you would do container, App. And this is what it used to look like. Why do we do this now, .createRoot? With React 18, we got a new thing called concurrency, which it used to be concurrent mode and now it's actually just kind of built into React. There's no static mode versus concurrent mode, it's just React mode.

[00:02:01]
Part of this that they did this is so that you can kind of opt into the new features. Cuz as soon as you put createRoot in there, React knows like, okay, this person has updated to the new version of React and they're anticipating that. This will put it into what's called legacy mode, which doesn't have all the new concurrency features of React 18.

[00:02:22]
So in other words, just always do createRoot now, you don't wanna do render anymore, unless you specifically have reasons to stay on the older methodology of rendering React. The other thing that's nice about this is now you have this root thing, that you can just say root, and I think it's you just call render again, and then it'll just re-render this.

[00:02:42]
You have a handle on an object that you can call to force top level re-renders of your entire React application. If you asked me how often I do that, the answer is never, or I haven't yet. I can see reasons. There are reasons that you would want to do that, that I'm having a hard time making up an example of why you'd wanna do that.

[00:03:04]
Maybe you just got new information from, I don't know. I don't know, a web socket or something that came in and you need to rerender your entire React application. Or maybe there's some external third party application thing that's calling into React and you need to rerender that. I guess that's probably the best thing.

[00:03:25]
If you had maybe a React island, right, in the frontend that had Angular on there as well, and you need to pass something from Angular into React, I could see that being a reason. It's like, okay, rerender my entire world. Otherwise, for the most part, you wanna keep all of your state inside of React, so you wouldn't wanna do that.

[00:03:45]
Anyway, that is the nice thing about having a root here. This is a better API than what was there previously. But this is the old API. So yes, that is what createRoot is different of. If you're looking at this and you've never seen the old API before, just forget about it, you never have to use it.

[00:04:03]
Just use the new API always and forever, forget that ReactDOM.render even existed Cool, other questions? Yeah?
>> I'm assuming you're gonna get into this, so probably not answering it right now, but the main benefit of React, just using React in general.
>> Yeah, the value proposition of it.

[00:04:32]
Yeah, when do I wanna answer that? I think I might have kinda covered it a little bit, but I know we just kinda get it as we go on. But it's a very small library to learn to render user interfaces. And it's really great at handling lots of state that generates interfaces from state.

[00:04:55]
It's not super opinionated about your data, it's not super opinionated about where it renders, or a bunch of stuff like that. It really is, it's like I have some state and I want to generate a view out of it. That is my main value proposition too for React.

[00:05:12]
By the end of this course in intermediate React, you'll probably know, I'm gonna say, 90% of the surface area of React, which is awesome, right? There's probably, I don't know, somewhere between 30 and 50 APIs that React ships now, which is knowable, right? You can know all of that.

[00:05:32]
I remember old are like jQuery, right? How many of you think that you've used every single method on jQuery? Or Lodash, that's another good one. For people at home, no one's raising their hand. Which is why, is because no one has. I don't think even the creators and maintainers of it know all of their APIs, there's like 2 or 300, right?

[00:05:50]
It's not knowable, you can't keep all that in your head nor should you. So I think that's why I like React. The one thing, it does it really well. And then there's a bunch of libraries and ecosystem stuff around it to do everything else that you need to do.

[00:06:07]
So that to me is the main value proposition of React.
>> I used all of jQuery, but-
>> I don't believe you [LAUGH]. Let's talk about the weird edge cases of deferreds, cuz there's some weird stuff in there, there's methods to handle things that you just never wanted to do.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now