React Tearing issue and its antidotes

A few days ago, I posted a short note about the React Tearing issue on LinkedIn. If that didn’t catch your eye, please find that?post here. As I promised in that post, I’ve written this article to enunciate some of the intriguing facts elaboratively. Anyways, let me restate the Tearing issue again in short. Tearing occurs when the UI updates are not synchronized, resulting in a partial or incomplete update. This can happen when React tries to update the DOM too quickly and doesn’t have time to finish before the next update is triggered. As a result, some parts of the UI may reflect the new state while others are still showing the previous state. Now, let's deep dive to study the problem, potential reasoning, and remedies in detail; Also, let’s get our hands dirty with some snippets.

Reasoning behind the Tearing issue

Tearing issues in React can occur due to the inherent nature of the rendering process and the asynchronous nature of updates. React’s rendering process aims to provide a smooth and performant user interface by efficiently updating the DOM based on the changes in the component’s state or props. I can think of a few potential reasons why tearing issues may occur in React. Let me articulate them as follows:

1. Asynchronous Rendering: React’s rendering process is asynchronous, meaning that state updates and component re-rendering may not happen immediately. React uses a process called “reconciliation” to determine what parts of the UI need to be updated. If multiple state updates occur quickly, they may not be synchronized perfectly with the rendering process, leading to tearing-like effects.
2. Concurrent Mode: React 18 introduced Concurrent Mode, which aims to improve the responsiveness and performance of the user interface by allowing more efficient scheduling of updates. While Concurrent Mode provides benefits such as prioritized rendering, it can also introduce tearing issues due to the concurrent nature of updates.
3. Asynchronous Events: Tearing issues can occur when state updates are triggered by asynchronous events such as timers, network requests, or user interactions. These events may not align perfectly with the rendering process, resulting in tearing-like effects.
4. Rendering Performance: In complex React applications or when dealing with large datasets, the rendering performance can be a contributing factor to tearing. If the rendering process takes longer, it can create a mismatch between state updates and rendering, leading to tearing issues.
5. Concurrent Data Dependencies: If your components have data dependencies on multiple asynchronous sources or APIs, it can lead to tearing issues. When these data dependencies update at different times or rates, it can cause inconsistencies in the rendering process.
6. Complex Component Hierarchy: In a complex component hierarchy with many nested components, tearing issues can arise if updates occur at different levels simultaneously. As updates propagate through the hierarchy, there may be moments when some parts of the UI are out of sync, leading to tearing-like effects.
7. Animations and Transitions: When using animations or transitions in React, the tearing can occur if the animation timing and rendering process are not synchronized. Tearing-like effects can be observed if the animation progresses faster or slower than the rendering updates.
8. Synchronous State Updates: Although React’s state updates are generally asynchronous, there are cases where synchronous updates can introduce tearing. For example, if you perform state updates within a loop or in a tight synchronous callback, it can disrupt the natural asynchronous rendering process and cause tearing.
9. External Libraries or Custom Components: Tearing issues can also be introduced by external libraries or custom components that have their own rendering logic or manage their own state updates. If these components or libraries are not designed to handle concurrent or asynchronous updates properly, tearing can occur. Redux library could be a potential root cause as I experienced in my project.

Boo to Theories — Let’s play with some troubling snippets

Let’s analyze this simple snippet:

import React, { useState, useEffect } from 'react';

const TearingExample = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // Simulating an asynchronous update
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div>Count: {count}</div>;
};

export default TearingExample;        

The potential tearing issue arises when React’s rendering and state updates are not perfectly synchronized. Since the timer triggers the state update every second, it can collide with React’s rendering process, leading to tearing-like effects.

Let’s explore a bit more complex example as follows:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [showChild, setShowChild] = useState(true);

  const toggleChild = () => {
    setShowChild((prevShowChild) => !prevShowChild);
  };

  return (
    <div>
      <button onClick={toggleChild}>Toggle Child</button>
      {showChild && <ChildComponent />}
    </div>
  );
};

const ChildComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default ParentComponent;        

The potential tearing issue arises when the user clicks the “Toggle Child” button rapidly. Since the state update in?ParentComponent?and the state update in?ChildComponent?are asynchronous, there can be a mismatch between the timing of the updates and the rendering process. As a result, the counter may not be perfectly in sync with the visibility of the?ChildComponent, leading to tearing-like effects.

Let’s consider another example as follows:

import React, { useState } from 'react';

const TearingExample = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default TearingExample;        

The potential tearing issue arises when multiple button clicks occur rapidly. Since React’s state updates are asynchronous, if multiple clicks happen fast and repeatedly, the updates may overlap and cause tearing-like effects.

Like these, I can keep on posting such snippets one after another but how to remediate such issues, that’s the most challenging part.

Do RCA of the issue and find proper Antidotes

In my experience, a step-by-step analytical approach may help to analyze the issue and find the appropriate remediation.

1. Examine the component hierarchy where the tearing issue occurs.
2. Analyze how state updates or props changes propagate through the component hierarchy.
3. Check for improper state and event handling or any third-party library influence.

Once the root cause of the issue gets pinpointed, remediation becomes easy. Let’s explore, how to resolve above mentioned tearing issues. This is how I’m going to resolve the first problem stated above.

import React, { useState, useEffect, useTransition } from 'react';

const TearingExample = () => {
  const [count, setCount] = useState(0);
  const [startTransition, isPending] = useTransition();

  useEffect(() => {
    const timer = setInterval(() => {
      startTransition(() => {
        setCount((prevCount) => prevCount + 1);
      });
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [startTransition]);

  return (
    <div>
      <h1>Count: {count}</h1>
      {isPending ? 'Updating...' : null}
    </div>
  );
};

export default TearingExample;        

I used the?useTransition?hook introduced in React 18. The?useTransition?hook allows me to control the timing of updates and achieve smoother transitions.

Now, let’s consider the second example and this is how I’m going to fix the issue.

import React, { useState, unstable_batchedUpdates } from 'react';

const ParentComponent = () => {
  const [showChild, setShowChild] = useState(true);

  const toggleChild = () => {
    unstable_batchedUpdates(() => {
      setShowChild((prevShowChild) => !prevShowChild);
    });
  };

  return (
    <div>
      <button onClick={toggleChild}>Toggle Child</button>
      {showChild && <ChildComponent />}
    </div>
  );
};

const ChildComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    unstable_batchedUpdates(() => {
      setCount((prevCount) => prevCount + 1);
    });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default ParentComponent;        

I’ve used the?unstable_batchedUpdate?function to wrap the state update functions in both?ParentComponent?and?ChildComponent?to allow the action to be batched together. This helps ensure that the updates are applied in a synchronized manner, reducing the likelihood of tearing. Please note, this example is applicable to React18 Concurrent Mode only.

Now, let me solve the last but not least problem:

import React, { useState, useCallback } from 'react';

const TearingExample = () => {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default TearingExample;        

By using?useCallback, I’ve tried mitigating the tearing issue that can occur when rapid button clicks trigger overlapping state updates. The function reference remains stable, allowing React to handle the updates properly and reducing the likelihood of tearing.

Other than these, I can propose a few more generic remediations as follows.

1. Use CSS `overflow: hidden`: Applying `overflow: hidden` to the container element helps to ensure that any partial rendering or tearing artifacts outside of the visible area is not visible to the user. This can help mask tearing if it occurs during the animation.

2. Enable GPU acceleration:?By utilizing CSS properties that trigger GPU acceleration, such as `transform`, we can offload the rendering to the GPU, which can help reduce tearing artifacts. In this example, we use `translateX(-50%)` to horizontally center the red square, which leverages GPU acceleration. I’ll be writing another detailed article on this topic. Stay tuned!

3. Optimize rendering performance:?Implement performance optimization techniques to minimize unnecessary re-renders. In this example, we use `useEffect` with an empty dependency array to ensure that the event listener is added only once during component mounting and removed during unmounting. This prevents unnecessary event listener attachment/detachment and potential re-renders that could contribute to tearing.

Does React-18 invent the Silver Bullet to kill this problem?

In short, No! Nevertheless, React 18 introduces some new features and optimizations that can indirectly contribute to mitigating tearing in certain scenarios:

1. Concurrent Mode: React 18 introduces Concurrent Mode, which allows for more efficient rendering and scheduling of updates. This can help reduce the chances of tearing by ensuring that updates are scheduled and processed to align better with the display’s refresh cycle.

2. Time Slicing:?Time Slicing is a feature in Concurrent Mode that allows React to breaking down large rendering tasks into smaller units, allowing for more granular control over when updates are processed. This can help prevent long-running updates from causing noticeable delays or inconsistencies in the rendering, which could potentially contribute to tearing.

3. Performance Improvements:?React 18 includes various performance improvements and optimizations under the hood. These optimizations aim to make rendering more efficient and responsive, potentially reducing the likelihood of tearing occurring in specific scenarios.

If you have read this article so far, I assume you have already evolved as a cognizant dev to deal with this issue by yourself. So, let me know whether you faced this issue before, how did you fix that, and what recommendations you want to set in? If you genuinely feel interested in this topic, you may follow this engaging?GitHub discussion thread. Let this discussion continues!