1 00:00:01,080 --> 00:00:05,040 Let's try to solve this other issue of whenever we start to collapse the code editor and then resize 2 00:00:05,040 --> 00:00:09,060 the browser, the entire realisable thing just jumps right back out. 3 00:00:09,570 --> 00:00:13,750 We're going to first begin by getting a clear understanding of what is going on behind the scenes to 4 00:00:13,770 --> 00:00:18,200 remember inside of our sizable component, we eventually generate this object right here. 5 00:00:18,630 --> 00:00:23,450 We provide a window to it of window inner with times zero point seventy five. 6 00:00:24,030 --> 00:00:29,370 We then take this entire sizable object and provide it off to the sizable box component. 7 00:00:31,070 --> 00:00:34,520 So let's take a look at a diagram and just understand what that really means. 8 00:00:35,000 --> 00:00:36,650 So here's our component we're putting together. 9 00:00:37,200 --> 00:00:38,840 Here's the library we are using. 10 00:00:39,360 --> 00:00:43,250 We are generating a width prop and providing it down into a sizable box. 11 00:00:43,610 --> 00:00:49,010 So let's imagine for a second that the initial with prop that we put together is maybe six hundred and 12 00:00:49,010 --> 00:00:49,880 fifty pixels. 13 00:00:50,420 --> 00:00:56,840 So we take that prop and provide down to a sizable box internally with sizable box has a piece of state 14 00:00:56,840 --> 00:00:58,760 called maybe with maybe something else. 15 00:00:58,950 --> 00:01:03,200 I don't know what it's actually called, but there's definitely a piece of state inside of a sizable 16 00:01:03,200 --> 00:01:06,740 box that tracks what the current width is of this element. 17 00:01:07,400 --> 00:01:10,190 It's going to get its initial value from the prop that we provide. 18 00:01:10,640 --> 00:01:12,140 So we provide 650. 19 00:01:12,290 --> 00:01:16,440 So with a piece of state inside of that component will be initialized to 650 as well. 20 00:01:17,270 --> 00:01:22,970 Now, from that point in time, a user can then start to drag around that sizable box, shrink it, 21 00:01:22,970 --> 00:01:24,290 expand it or whatever else. 22 00:01:24,650 --> 00:01:28,850 So let's imagine that they shrink it a little bit and that with piece of state internally inside, a 23 00:01:28,850 --> 00:01:32,720 very sizable box gets turned down to maybe about two hundred and fifty pixels. 24 00:01:33,560 --> 00:01:39,770 So to kind of show you that in action, it would be something like if I refresh this page and then shrink 25 00:01:39,770 --> 00:01:45,530 this down to two hundred and fifty pixels now inside of that sizable box component that with piece of 26 00:01:45,530 --> 00:01:48,680 state says, OK, our current with is two hundred and fifty. 27 00:01:49,730 --> 00:01:56,220 Now, at no point in time did we ever update or change the sizable with prop inside of our component. 28 00:01:56,240 --> 00:01:57,640 We have not changed that value. 29 00:01:57,830 --> 00:02:02,870 It's still being calculated by taking a look at the window in her width and multiply that by zero point 30 00:02:02,870 --> 00:02:03,680 seven five. 31 00:02:04,710 --> 00:02:10,259 So where we start to get into trouble is that at some point in time, we are now dragging this window, 32 00:02:10,289 --> 00:02:11,790 our overall browser window. 33 00:02:12,840 --> 00:02:19,440 When I drag this and let go, we are doing a state update inside of our component, so we do an update 34 00:02:19,440 --> 00:02:22,290 inside of here that causes our component to render. 35 00:02:22,920 --> 00:02:26,490 When that occurs, we are going to recalculate this width prop. 36 00:02:27,030 --> 00:02:32,910 So maybe if I shrink down the browser window just a little bit, we then recalculate that with Prop 37 00:02:32,910 --> 00:02:36,660 and maybe now it is a value of, say, five hundred. 38 00:02:37,820 --> 00:02:44,190 Because we are rendering sizable we're going to also render a sizable box because it is a child component. 39 00:02:44,450 --> 00:02:49,610 And when we do so, we're going to take this newly calculated with a five hundred and provide it down 40 00:02:49,700 --> 00:02:51,290 to a sizable box. 41 00:02:51,880 --> 00:02:56,880 Very sizable box takes that new with prop and changes its current with piece of state to match it. 42 00:02:57,380 --> 00:03:02,360 So this turns into five hundred as well, and that's what causes this jumping effect. 43 00:03:03,200 --> 00:03:08,270 So the whole problem here is that sizable box has its own kind of internally managed piece of state 44 00:03:08,420 --> 00:03:10,030 to decide what the current with is. 45 00:03:10,430 --> 00:03:16,640 And whenever we render our sizable component, we provide a new value for this with prop and it overrides 46 00:03:16,640 --> 00:03:19,120 or changes its internal piece of state. 47 00:03:19,280 --> 00:03:22,680 And that's what's causing the jump now that we understand the problem. 48 00:03:22,850 --> 00:03:26,330 Let's take a pause right here and then figure out some way to solve this in the next video.