uiwjs / uiwjs/react-codemirror
BUG: Memory Leak when rerendering CodeMirror
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 161
- PR merge metrics
- No merged PRs in 30d
Description
Hey yall,
I think i found a memory leak in the CodeMirror Component...
You can find the PoC in the following Codesandbox:
CAREFUL: It will fill up your memory in just few minutes...
I used a quite small interval as well as many CodeMirror to speed up the process...
https://codesandbox.io/s/gallant-danilo-nc8euu?file=/src/App.js
Memory usage:

~1 min later:

It seems like Firefox is more affected by this than Chrome.. Chromes memory fills up way slower...
The workaround that i use is the following:
Instead of:
<CodeMirror
theme={theme.colorScheme}
height="500px"
value={originalFilters}
//defaultValue={originalFilters}
placeholder={placeholder}
onChange={setCurrentFilters}
readOnly={readOnly}
/>
I use a memo:
<CodeMirrorMemo
theme={theme.colorScheme}
height="500px"
value={originalFilters}
//defaultValue={originalFilters}
placeholder={placeholder}
onChange={setCurrentFilters}
readOnly={readOnly}
/>
const CodeMirrorMemo = memo(CodeMirror)
I'm not sure what else i could provide right now but feel free to request whatever else i can provide to help out. Thank you :)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and compare rerendering behavior in Firefox and Chrome. Investigate the CodeMirror component involved in the repeated renders, using the reported memo workaround as a comparison. Done means the reproduction no longer causes unbounded memory growth without requiring consumers to wrap the component in memo.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100