question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Context leaks to later renders when render stream destroyed early

See original GitHub issue

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

If a stream created with .renderToNodeStream() is destroyed before the render completes, memory can be retained unnecessarily by Contexts which were active at the time.

It’s not a memory leak per se as memory use is not unbounded. There’s a limit on number of threads in use and context slots are reused, so memory use can’t increase endlessly.

Would only make a noticeable impact on an application which:

  • renders using .renderToNodeStream() or .renderToStaticMarkup()
  • stores large objects in Context (e.g. large data sets from fetch requests)
  • experiences a spike in traffic which then recedes
  • destroys a lot of streams prematurely (or has errors thrown in rendering which causes streams to be destroyed)

In the above case, when the spike hits, many threads are created for concurrent renderers. Each thread writes data into a slot of the Contexts it uses. When the threads are destroyed before the renders complete, the Context slots are not cleared, and so left filled with data which is no longer useful, but cannot be freed by GC.

When the spike recedes, this memory continues to be retained.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I’ll submit a PR with failing test case and fix shorty.

What is the expected behavior?

When stream is destroyed, it should clean up its resources.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Issue introduced in 961eb65b4ba5de6bbfb6b8a075a924c284541177 which is in 16.7.0.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
gaearoncommented, Feb 14, 2019

Thanks @eliseumds for explaining your case, I added a regression test for it.

1reaction
overlookmotelcommented, Jan 27, 2019

Issue also affects .renderToString() if an error is thrown during the render, leading it being prematurely destroyed, leaving some contexts open.

Many would say that you should terminate the Node process on an unexpected error, but I imagine a lot of people catch it and send status 500 to the client.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to delete the state stack for a JavaScript canvas ...
The only way is to either restore all saved states, or to reset the context by setting some size to the canvas element...
Read more >
Fixing memory leaks in web applications | Read the Tea Leaves
But it's extremely unlikely to leak memory on the client side, since the browser will clear the memory every time you navigate between...
Read more >
Eradicating Memory Leaks In Javascript - LambdaTest
Failure to deal with javascript memory leaks can wreak havoc on your app's performance and can render it unusable.
Read more >
OpenGL Textures and Memory Leaks - Khronos Forums
Hello ! So I'll post this question here, I'm not sure if it has to do with OpenGL or with the OpenGL implementation...
Read more >
Hooks API Reference - React
During subsequent re-renders, the first value returned by useState will always be ... A component calling useContext will always re-render when the context...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found