Let's try to solve this other issue of whenever we start to collapse the code editor and then resize
the browser, the entire realisable thing just jumps right back out.
We're going to first begin by getting a clear understanding of what is going on behind the scenes to
remember inside of our sizable component, we eventually generate this object right here.
We provide a window to it of window inner with times zero point seventy five.
We then take this entire sizable object and provide it off to the sizable box component.
So let's take a look at a diagram and just understand what that really means.
So here's our component we're putting together.
Here's the library we are using.
We are generating a width prop and providing it down into a sizable box.
So let's imagine for a second that the initial with prop that we put together is maybe six hundred and
fifty pixels.
So we take that prop and provide down to a sizable box internally with sizable box has a piece of state
called maybe with maybe something else.
I don't know what it's actually called, but there's definitely a piece of state inside of a sizable
box that tracks what the current width is of this element.
It's going to get its initial value from the prop that we provide.
So we provide 650.
So with a piece of state inside of that component will be initialized to 650 as well.
Now, from that point in time, a user can then start to drag around that sizable box, shrink it,
expand it or whatever else.
So let's imagine that they shrink it a little bit and that with piece of state internally inside, a
very sizable box gets turned down to maybe about two hundred and fifty pixels.
So to kind of show you that in action, it would be something like if I refresh this page and then shrink
this down to two hundred and fifty pixels now inside of that sizable box component that with piece of
state says, OK, our current with is two hundred and fifty.
Now, at no point in time did we ever update or change the sizable with prop inside of our component.
We have not changed that value.
It's still being calculated by taking a look at the window in her width and multiply that by zero point
seven five.
So where we start to get into trouble is that at some point in time, we are now dragging this window,
our overall browser window.
When I drag this and let go, we are doing a state update inside of our component, so we do an update
inside of here that causes our component to render.
When that occurs, we are going to recalculate this width prop.
So maybe if I shrink down the browser window just a little bit, we then recalculate that with Prop
and maybe now it is a value of, say, five hundred.
Because we are rendering sizable we're going to also render a sizable box because it is a child component.
And when we do so, we're going to take this newly calculated with a five hundred and provide it down
to a sizable box.
Very sizable box takes that new with prop and changes its current with piece of state to match it.
So this turns into five hundred as well, and that's what causes this jumping effect.
So the whole problem here is that sizable box has its own kind of internally managed piece of state
to decide what the current with is.
And whenever we render our sizable component, we provide a new value for this with prop and it overrides
or changes its internal piece of state.
And that's what's causing the jump now that we understand the problem.
Let's take a pause right here and then figure out some way to solve this in the next video.