 refs are a way that we stop using react inside of react. I know it's super confusing, but sadly, if you want to learn how to use react, it's so opinionated that you almost have to start with the ways that you opt out of using react in order to do stuff in the DOM that you want to do. So on the react docs, there's a section of differences between refs and state. Perhaps you're thinking that ref seems less strict than state. You can mutate them instead of always having to use state. Setting functions, for instance. But in most cases, you'll want to use state refs are an escape hatch. You'll hear this word a lot in reactor. These words, this phrase a lot in react escape hatch. And pretty much anytime you see this, it means just doing basic DOM stuff that the browser lets you do. OK, so here's how state and refs compare. Not a big list, but let's go through all of it. So use ref initial state. So when you call this, it's going to create a state object with one property on it called current, and it will provide the initial value. But then after that, you can change it as much as you want. This is per component, by the way. So this isn't like one value across all of your components. Now, state, on the other hand, provides this setter function. And so you've probably seen this. You get the you get a tuple or array with the value and the setter function. We have this in our code over here. And you have to call that setter function on order to update the state at which time the component re-renders and everything renders with a new value. Now, that brings us to the second thing. Rest do not trigger updates. So if I were to update this ref right here or anywhere, the component won't re-render. This is a way in which you're opting out of react state. Obviously, using the setter function will re-render the component. Refs are mutable so you can modify and update current value outside of the rendering process. And then I think this is super funny. The in quotes in mutable because this value is also mutable inside of this function, but the component only re-renders when you call the setter function. So yes, it's still mutable. You can still change it inside of the function declaration, but it won't re-render. And then obviously in a ref, you shouldn't render this so we don't want to use the value right inside of render. However, state we can use at any time. So let's look at a couple of examples because I think these examples are actually great. So we have a basic click counter where we have state in this and we have a handle function right here and every time we click the button, that handle function gets called and we update our state via this set state function. Now let's look at the same thing, but with everything implemented in with refs. Now this is not something that you would ever do. It's just a counter example where we create refs. There's no setter function. And so we just manipulate this thing right in place. Now because we're not using that react life cycle to change the state of the component, when we click this button, nothing happens. Okay, so what does that mean for our show more component? Okay, so the assignment right here is to now put this value that we get from our content ref into state so that we can use it inside of our render function. That means that we'll need a new state object. Let's call this content height. We're gonna set this to the string none. I'm gonna fully abuse the fact that I'm using JavaScript here and let it be the string none or whatever we get back from scroll height. So if it's expanded, we no longer wanna use none, we want to use content height. Okay, tracking so far. Now the next thing that we need to do instead of alerting this ref for scroll height, we want to set content height like that, perfect. Okay, now when we click this, yes, we get that breezy smooth cool animation that we set right here in our transition that wasn't working because it doesn't honor none as a value. Now let's get to the problem for tomorrow. If I hit refresh on this real quick, you'll notice that the first one doesn't do what we want it to. It doesn't have that nice smooth transition. And the reason is because this value is none at the first render. Your job is to use use effect to get that value and put it on this state when the component renders the first time. If you're not familiar with use effect, you're gonna have to read this doc. It's wonderful. It's way better than anything that I could tell you about use effect. So go read that. You'll have a better understanding of it. But again, all you have to do is just get that value the first time this component renders and put on state so that you can see that nice smooth transition every single time. Now, if you wanna see what we worked on yesterday to get to this point, that's gonna be up here. And then tomorrow's solution will be down here. I'll see you in the next one. Bye.