From the course: React Essential Training

Unlock this course with a free trial

Join today to access over 24,000 courses taught by industry experts.

Handling state with nested components

Handling state with nested components - React.js Tutorial

From the course: React Essential Training

Handling state with nested components

- [Narrator] Right now we have our app component. This is managing state, and there are some child components that this is rendering as well. So we have header and we have main. A best practice that is often talked about in React is how we want as much as possible to lift state up in our application. And what that means is we want it to be as high up in the tree as possible. As much as possible we want to minimize the number of times we're calling useState in these smaller components because then it can make it harder to track these changes and things get out of sync pretty quickly. So a recommendation that I have for you is to create your state within, say, the app component or whatever the root component is in your application. And then you can pass these values down as properties to child components. So what we want to do here is quickly show a demo of this. So here in our app we have the status. Now we can pass this status down to a child component using a variable name. So let's…

Contents