Initialize State

[00:00] Alright, so we've got query equals dog plus cat, that should be, or cat plus dog, that should be cat space dog, right here, and these two should be checked when it's working. So with this, we need to create a params variable that's based on URL search params.

[00:15] So let's make params, new URL search params based on the window location search. And then from that, we can say params.get query, and we can fall back, if it ends up being null, we can fall back to an empty string. And that, actually, is it, we're done.

[00:33] So save that, we got cat space dog, everything's working awesome. This is not typically how you're going to do this in a real application, like grabbing it from window location search. Of course, it doesn't run on the server, because there's no window location on the server, and things like that. You're going to be using a router in any real application that you're using, and that router

[00:53] is going to give you a search params hook or something like that. You're not typically going to be doing things directly like this, you'll probably want to use a router for this, but this is how you do it, and now we are able to initialize our state dynamically based on what the current URL is.

[01:12] So I could say, caterpillar, and I must have misspelled it, yep, I think I did. There we go. So we can initialize that based off of the URL search params, and then it falls back, of course, to an empty string.

[01:29] So there you go, initializing with useState and pulling it from the search params, pretty common thing to do.

[00:00] A lot of times in UIs like this, you want to have the UI be shareable. And the way that we share things on the web is with the URL. And so if I wanted to design this URL so that it makes things shareable,

[00:14] then I might add a query and cat dog, and that would have cat and dog in here. But that's not working right now because we don't have our initialization coming from the URL. We initialize it as an empty string.

[00:32] So when this page is loaded, React is like, okay, let me run everything. So we've got our useState. This is initialized as an empty string, so we'll render this UI with the empty string. But we want to initialize it based on the query and the query string up here. So this is how you retrieve that.

[00:49] You make URL search params from the window location search. And then you use this params.getQuery, which will give us our initial query. If that doesn't exist, it could be null. There may be no query. Then we can fall back to an empty string. That makes sense. But then we can use this initial query in our useState call.

[01:08] So this should be pretty quick, but it will allow us to at least land on the page and have those elements in our query, which would be a good thing. So have fun.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Fundamentals

Epic React Basic

Epic React Pro

React Hooks Intro

Intro to Managing UI State

useState

Controlling Inputs

Derive State

Init Callback

Dad Joke Break Managing UI State

Managing UI State

Intro to Side-Effects

useEffect

Effect Cleanup

Dad Joke Break Side-Effects

Side-Effects

Intro to Lifting State

Lift State

Lift More State

Colocate State

Dad Joke Break Lifting State

Lifting The State

Intro to DOM Side-Effects

Refs

Dependencies

Primitive Dependencies

Dad Joke Break DOM Side-Effects

DOM Side-Effects

Intro to Unique IDs

useId

Dad Joke Break Unique IDs

Unique IDs

Intro to Tic Tac Toe

setState callback

Preserve State in localStorage

Add Game History Feature

Dad Joke Break Tic Tac Toe

Tic Tac Toe

Outro to React Hooks 

React Hooks

React Hooks

Transcript

Initialize State

Transcript