Complete Intro to React v4 Debug Component State in React

[00:00:00]
>> Brian Holt: Now we have this array that we can be confident going forward this represents the state of the world in terms of the pets that we have inside of our API, right. Now what's cool about this is now we can always depend that there's going to be an array of pets.

[00:00:14] That array of pets might be empty, right, but we know that it's always going to be, at any given time, that represents what pets we have. This is another powerful paradigm of React, that rather than trying to think about things as they evolve over time, I get to think about things in terms of snapshots, right.

[00:00:31] Given this state, this React component will look like this. Given an empty array, it's going to look like this. Given an array full of pets, it looks like this. And so it's just always a snapshot given some sort of pets, right. Your components become a function of state, which is powerful.

[00:00:50]
>> Brian Holt: I don't have to care really how it evolves over time.
>> Brian Holt: So,
>> Brian Holt: Just to show you kind of what this looks like first, I'm just gonna show you kinda like a little cool hack that Ryan Florence taught me how to do.
>> Brian Holt: So I have pre which is preformatted, and code which is format this like code.

[00:01:16] And then here I can say, JSON.stringify(this.state, null, 4. This is just going to dump all all of your state out into your dump, so you can actually see what it looks like. So if I go over here and refresh, this is probably super hard for you to see.

[00:01:37] But you can see here all of the stuff that's coming back from the API is just being dumped out.
>> Brian Holt: Right, you can see German Shepherd Dog, right, so that's pretty cool too. That's a really just quick and cheap way of visualizing all your state over time.
>> Speaker 2: Is the four parameter, how many-

[00:02:01]
>> Brian Holt: Indents, yep.