Large Memory Leak in Firefox

[U1F928]

Issue

There seems to be a significant memory leak in the order of gigabytes when using the Firefox browser

This can lead to the browser tab crashing when writing in the editor for longer periods of time.

Steps to reproduce

1. Visit the demo page

Visit the page https://uiwjs.github.io/react-markdown-editor/ in Firefox

2. Measure the memory usage

Go to the URL about:processes and write down the memory usage of the process containing the demo page.

In this example the memory usage is at 85 MB

3. Make large amount of changes to the content

Make large amount of changes to the contents of the editor.

For example by holding the key a for 2 minutes.

You can use the following Python script for that

import pyautogui
import time
import sys

def hold_key(key_to_hold, duration_seconds):
    """
    Simulates holding down a specific key for a given duration.

    Args:
        key_to_hold (str): The key to hold down (e.g., 'a', 'ctrl', 'shift').
                           For a list of valid key names, see:
                           https://pyautogui.readthedocs.io/en/latest/keyboard.html#keyboard-keys
        duration_seconds (float): How long to hold the key in seconds.
    """
    print(f"Will start holding down the '{key_to_hold}' key in 3 seconds...")
    print("Switch to the target window NOW!")
    time.sleep(3)  # Give you time to switch to the target window

    print(f"Holding down '{key_to_hold}' for {duration_seconds} seconds...")
    start_time = time.time()
    pyautogui.keyDown(key_to_hold)

    try:
        while time.time() - start_time < duration_seconds:
            # Keep the script alive and check duration
            # PyAutoGUI's keyDown is a state change; it doesn't need to be in a loop
            # to maintain the key press. This loop is just for timing.
            time.sleep(0.01) # Small sleep to avoid busy-waiting and allow interruption
    except KeyboardInterrupt:
        print("\nInterrupted by user.")
    finally:
        pyautogui.keyUp(key_to_hold)
        print(f"Released '{key_to_hold}'.")

if __name__ == "__main__":
    key = 'a'
    try:
        # Get duration from command line argument if provided
        if len(sys.argv) > 1:
            duration = float(sys.argv[1])
        else:
            duration = 10  # Default duration in seconds
    except ValueError:
        print("Invalid duration. Please provide a number for seconds.")
        sys.exit(1)

    if duration <= 0:
        print("Duration must be a positive number.")
        sys.exit(1)

    print(f"Script will hold down the '{key}' key for {duration} seconds.")
    print("IMPORTANT: To stop the script prematurely, press CTRL+C in this terminal.")
    print("Make sure the window where you want the key presses to occur is active and focused.")

    hold_key(key, duration)
    print("Script finished.")

and run it for 120 seconds using the command

python3 key-spam.py 120

4. Measure the memory usage again

Go to the URL about:processes and write down the memory usage of the process containing the demo page.

In this example the memory usage is now at 4 GB

[jaywcjlove]

@U1F928 You might want to report this issue to the @codemirror team. I just tested it: when a large amount of content is pasted into the CodeMirror editor and you scroll through it, memory usage keeps increasing and does not get released. Repeatedly scrolling up and down causes memory to continuously grow. This appears to be due to CodeMirror’s lazy rendering mechanism, which is designed to optimize performance. However, in the case of very long text, it doesn’t properly clean up DOM elements or cached data, potentially leading to memory leaks or buildup. It would be great if the official team could optimize this behavior or provide a configuration option to handle it better.

Discuss: https://discuss.codemirror.net

[U1F928]

I just tested it: when a large amount of content is pasted into the CodeMirror editor and you scroll through it, memory usage keeps increasing and does not get released.

Interesting, is it possible that there are multiple memory leaks at play?

I have managed to reproduce the memory leak using the following example where the CodeMirror component is being re-rendered on every change to the data

import { useState } from 'react'
import CodeMirror from '@uiw/react-codemirror';

export function App() {
    const [data, setData] = useState<string>("");

    const onDataChange = (newData: string) => {
            setData(newData);
        }

    return (
        <CodeMirror
            width={"100vh"}
            height={"100vw"}
            value={data}
            onChange={onDataChange}
        />
    );

}
export default App

https://github.com/U1F928/CodeMirror-reproduce-memory-leak/blob/main/src/App.tsx

Once I stop calling the setData function in the onDataChange function the memory leak seems to disappear - meaning that I am no longer able to reproduce the memory leak using the key-spam.py script

[jaywcjlove]

@U1F928 I don’t need to use your example — on the official site https://codemirror.net/, I can reproduce the issue by pasting a large amount of code into the CodeMirror editor and scrolling. The memory usage keeps increasing and doesn’t get released.

[U1F928]

I don’t need to use your example — on the official site https://codemirror.net/, I can reproduce the issue by pasting a large amount of code into the CodeMirror editor and scrolling

Interesting, based on this I think that there are 2 different memory leaks.

As when I go to https://codemirror.net/ and run the key-spam.py script for 120 seconds I fail to reproduce the memory leak. 🤔

[jaywcjlove]

@U1F928 I tested it in Chrome and was able to reproduce the memory leak issue.