Understanding Weird Behavior in React: A Dive into Cell List Component

As a React developer, encountering unexpected behavior is a common occurrence. In this article, we'll delve into a peculiar issue in the Cell List component and examine how to rectify it.

The Problem

Whenever we click on the plus text cell or plus code at the bottom of the component, we observe weird behavior. For instance, when we click on the plus text cell, the cell we are hovering over fades out momentarily and fades back in while a new cell is added to the bottom of the component.

Understanding the Problem

To comprehend this problem, let's quickly review the logic inside the Cell List component. The Cell List component renders all different cells using a fragment that has a key property assigned to it. Additionally, an add cell and a cell list item are displayed, and an add cell at the bottom is also shown. However, unlike the other cells, the last add cell does not have a key property since it is not created inside an array.

Now let's visualize this issue and see what is going on. The component consists of an add cell, followed by a few text cells, and another add cell at the bottom. Suppose we have only one cell in our Redux store with an ID of "AAA," and we apply a key to the react fragment wrapping the add cell and text cell, which is "AAA."

Next, when we click on the plus text or plus code while hovering over the bottom-most add cell, we generate a brand new cell, randomly generate an ID, add it to our order array, and add the cell to our Redux store. Since we updated our Redux store, we notify the React side of our application that data has changed, which leads to a re-render of the components.

As we re-render, we insert a new block, having the same HTML as the add cell and text cell components, right above the bottom-most add cell. We assign this new block a key property of "BBB" and an ID of "BBB." Herein lies the issue: we're inserting a brand new set of HTML elements and shifting everything below it in the DOM. Consequently, we observe the weird behavior of the original bottom-most add cell fading out, while a new cell appears below it.

Solutions

Now that we know what's causing the problem, let's explore few solutions to fix it.

1. Insert a Fragment Instead of an Element: Instead of inserting a new set of HTML elements, we can reduce it to just a single fragment containing our add and text cells. This way, we're not shifting anything in the DOM, and we do not have to worry about the oddly behaving cells.

2. Wrap Cell List in a Div: Use a div wrapper to contains the add and text cells and the bottom-most add cell. When we hover over the bottom-most add cell, we insert a new div, then everything below it gets shifted. This eliminates the need to insert new HTML elements and therefore prevents the weird behavior.

3. Switch to Absolute Positioning: Another solution is to switch from relative positioning to absolute positioning, where all cell items would be positioned within the parent div. This way, we can insert new items without shifting other components in the DOM.

In conclusion, encountering unexpected behavior is not unusual while working with React. Nevertheless, by understanding the root cause of the problem, we can develop effective solutions that prevent the oddities that we observe. In this case, we were able to explain the peculiar behavior we witnessed in the Cell List component and suggest alternative approaches to mitigate it.