1
00:00:01,510 --> 00:00:05,350
We're going to spend a little bit of time trying to figure out why we are seeing this really weird behavior

2
00:00:05,380 --> 00:00:11,320
whenever we click on plus Texel or plus code down here at the very bottom, if I click on plus text,

3
00:00:11,920 --> 00:00:16,660
the one that I'm moused over or hovering over kind of fades out for a month, then fades back in and

4
00:00:16,660 --> 00:00:19,390
I see another ad cell at the bottom suddenly fade out.

5
00:00:19,750 --> 00:00:23,290
So again, just a little bit weird behavior and I want to figure out why this is occurring.

6
00:00:23,890 --> 00:00:27,490
But to understand this problem, first, we're going to go and get a quick reminder on some of the logic

7
00:00:27,490 --> 00:00:30,070
that we wrote out inside of our cell list component.

8
00:00:30,850 --> 00:00:34,270
OK, so back inside my editor, I'm inside of Cell List.

9
00:00:35,560 --> 00:00:39,550
And you will recall that inside of here, we put together rendered cells.

10
00:00:40,500 --> 00:00:45,390
So this is where we render over or iterate over all of our different cells, we produce a fragment for

11
00:00:45,390 --> 00:00:45,960
each one.

12
00:00:45,990 --> 00:00:48,240
That fragment has a key property assigned to it.

13
00:00:48,780 --> 00:00:51,750
And then we show and add cell and cell list item.

14
00:00:52,620 --> 00:00:55,140
We also show a cell at the very bottom as well.

15
00:00:55,420 --> 00:01:00,450
That one does not get a key property because it is not being created inside of a list or really inside

16
00:01:00,450 --> 00:01:00,960
of an array.

17
00:01:01,960 --> 00:01:05,019
Now that we got that reminder, let's go take a quick look at a diagram.

18
00:01:06,200 --> 00:01:09,470
OK, so this diagram is just a little bit weird, let me just explain it very quickly.

19
00:01:10,130 --> 00:01:12,250
In the very center is what we see in the UI.

20
00:01:12,560 --> 00:01:18,530
So we've got our ad cell component and then possibly a tech cell and another ad cell at the very bottom.

21
00:01:19,140 --> 00:01:23,900
Let's imagine for a second that we've got one cell inside of our Redock store and that it has an idea

22
00:01:23,900 --> 00:01:25,220
of AAA.

23
00:01:25,760 --> 00:01:27,620
So here's the cell for that cell.

24
00:01:28,880 --> 00:01:35,300
And we've applied a key to the react fragment rapping, ad sell and sell that key is a.

25
00:01:36,320 --> 00:01:40,340
Then on the right hand side, of course, we've got a reduc store inside, there is order and right

26
00:01:40,340 --> 00:01:43,460
now the only cell we have is the cell with AAA.

27
00:01:44,480 --> 00:01:49,700
Now, let's imagine what happens whenever we mouseover the very bottom out cell right here and click

28
00:01:49,700 --> 00:01:51,920
on less text or plus code.

29
00:01:52,580 --> 00:01:55,220
The first thing we're going to do is generate a brand new cell.

30
00:01:55,250 --> 00:02:00,890
We're going to randomly generate an ID, add it into our order array and add the cell itself into our

31
00:02:00,890 --> 00:02:01,790
data object.

32
00:02:02,100 --> 00:02:04,280
But right now, we'll just worry about the order array.

33
00:02:05,060 --> 00:02:09,530
I'm going to imagine that this new cell has an ID of BBB.

34
00:02:10,970 --> 00:02:15,770
So as soon as we update our state inside of redux, we're going to communicate over to the side of application

35
00:02:15,920 --> 00:02:20,900
that some data just change and we need to render all of our different components that's going to cause

36
00:02:20,900 --> 00:02:22,370
cell list to render.

37
00:02:22,690 --> 00:02:27,230
That means we're going to take all the different cells that we now have in this order and render out

38
00:02:27,230 --> 00:02:28,220
a list using them.

39
00:02:29,090 --> 00:02:32,000
When we do so, we can then imagine.

40
00:02:33,280 --> 00:02:37,570
That we create a new block just like this and stick it right there.

41
00:02:37,750 --> 00:02:41,020
It will have a key of BB and an ID.

42
00:02:42,100 --> 00:02:43,030
Of BBB.

43
00:02:44,310 --> 00:02:48,750
Now, the really key thing I want you to understand here is that when we add in this new element right

44
00:02:48,750 --> 00:02:51,660
here, we are really inserting it directly into the dam.

45
00:02:52,110 --> 00:02:58,350
So we are inserting a brand new set of HTML elements that include everything for the ADD cell component

46
00:02:58,350 --> 00:02:59,520
and the textile component.

47
00:03:01,080 --> 00:03:07,090
Everything below that point gets essentially shifted down in the dome, so the very bottom ads sell

48
00:03:07,110 --> 00:03:08,700
this one right here that does not have a key.

49
00:03:08,820 --> 00:03:11,970
It gets shifted down, but it's still the same elements.

50
00:03:11,970 --> 00:03:14,390
It's the same each HTML elements that exist inside the dome.

51
00:03:14,400 --> 00:03:19,140
We are just moving them down the screen a little bit to accommodate this new item that we are inserting.

52
00:03:20,090 --> 00:03:25,910
This kind of explains the weird behavior that we are seeing when you and I inside the browser look on

53
00:03:25,910 --> 00:03:30,290
plus text, we see something fadeout down there at the very bottom.

54
00:03:30,650 --> 00:03:34,820
This right here, the one that is now being displayed, the ad says at the very bottom is the same one

55
00:03:34,820 --> 00:03:35,870
that we're clicking on right here.

56
00:03:35,870 --> 00:03:41,330
When I click on plus text right here, this element, this entire component is being moved down the

57
00:03:41,330 --> 00:03:41,750
screen.

58
00:03:42,020 --> 00:03:47,780
And because my cursor is no longer over it, we apply and opacity of zero back to it because we're no

59
00:03:47,780 --> 00:03:48,390
longer hovering.

60
00:03:48,920 --> 00:03:52,820
So it's going to very gently fade out over that span of about point three seconds.

61
00:03:53,960 --> 00:04:00,500
At the same time, we are inserting a brand new ad sell right here as well, and because now as we instantly

62
00:04:00,500 --> 00:04:06,170
inserted my cursor is right over that element, we are hovering over it, which means we are going to

63
00:04:06,170 --> 00:04:08,090
adjust its opacity to one point.

64
00:04:08,090 --> 00:04:12,480
Oh, so all this stuff just completely explains the behavior that we're seeing here.

65
00:04:12,500 --> 00:04:18,079
It's all just kind of working, believe it or not, exactly as we could or really should be expecting.

66
00:04:19,070 --> 00:04:22,580
It's just because of how we've set up all these different elements, how they're being moved around

67
00:04:22,700 --> 00:04:27,520
the screen and this entire hover opacity rule that we end up with this kind of weird looking behavior.

68
00:04:27,830 --> 00:04:30,770
But again, at the end of the day, this is really what we asked for.

69
00:04:31,580 --> 00:04:34,840
Like I said, I want to now we kind of understand what's going on here.

70
00:04:34,850 --> 00:04:39,020
I want to spend just a little bit of time to take a look at a couple of different solutions we can use

71
00:04:39,020 --> 00:04:39,940
to fix this up.

72
00:04:40,430 --> 00:04:43,160
So let's start taking a look at these different solutions in the next video.