Complete Intro to React v4

Complete Intro to React v4 The Problem of Sharing State


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "The Problem of Sharing State" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

A tour through the issue with sharing state between components. In the React v4 git repository, Brian shows how you can structure sharing state between components without using the context feature that ships with React 16.3+.

Get Unlimited Access Now

Transcript from the "The Problem of Sharing State" Lesson

>> Brian Holt: So what happens, in fact this is actually a problem that we have right now in our application. We have this adopt me page like the results page, right. And then we have a SearchParams page but they're not talking to each other yet. We have state that lives in one route and we need to pass it to the other route, right.

[00:00:18] So how do we do that? Well, there's actually quite a elegant and simple way of doing that which typically I would advise you how to do. The way that I would do that, if I come into my code here, is I would move everything from SearchParams. So breed, animal, and location I would move this up into App.js, right.

[00:00:40] Because this is the common parent between results and SearchParams. And then I would pass both those things in as props to result in searchParams, right. And then both of them would have access to the same shared data. In general this is what I would advise you to do.

[00:00:58] This is what React was designed around as being able to share your state as props to children, right. And then I would move the handle breed selector into app as well, and pass those event selectors in. So that the children can call functions on the parents, right. In fact, I have this code written out for you and I wanna show it to you, here without context this branch down here.

>> Brian Holt: Okay, I have it open as a pull request so we can see the div.
>> Brian Holt: So if you look into app.js, we start tracking all the stuff in state. So you can see we have city-state up here, which there's a conflict between what router wanted to call it's location and what I wanted to call location.

[00:01:55] So I called it city-state instead here and then I have all these methods. Can I just say view, here we go.
>> Brian Holt: So I moved the state up here into app, and then I probably make this a little bit bigger too.
>> Brian Holt: And then I moved all these event handlers into app.js

>> Brian Holt: And well as get breeze as well.
>> Brian Holt: And then notice that I start passing all these things into SearchParams and into Results as well. So this is how I would typically advise you how to do it, right. Move everything into App.js, the common parent, and then pass all those event handlers into both of them, if they need to handle events, as well as all the state.

[00:02:47] And now, Results and SearchParams can individually use these things as prompts. So just what that looks like inside of. So instead here in results, because this is getting passed in from the parent I'd refer to location as the stop prompts at location. Animal at the stop prompt of animal.

[00:03:05] And then I would use all that data inside of results.js. In general this is how you wanna handle this kind of thing, right. Does that make sense? This is the entire magic of React, it's just passing props around and managing state, and that's really it. And honestly we can end the class here, and you would have a pretty good understanding now of how React works.

[00:03:27] The only thing that's left is advanced features, and that's what the rest this course is gonna be about, everything else is just managing state and props and components. States, props, and components and that's really the end of it. This is why I like React, this is why I teach React, this is why I write React at every job that I go to is because it's knowable, right.

[00:03:48] A day and a half and you're done with knowing what React does. Now that's not the complete picture, we still have to talk about the ecosystem around it but in general what I've shown you here is just passing at state and prompts.
>> Brian Holt: But it wouldn't be fun to end here, we got tons more stuff to talk about.

[00:04:08] So we'll start getting more into the advance stuff here, more of like the intermediate react stuff.