profile
viewpoint

Ask questionsOld references retained by memoizedProps in fiber

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

Bug (or misunderstanding on my part)

What is the current behavior?

Fibers seem to retain stale references to old data via memoizedProps / memoizedState

Demo:

https://jsfiddle.net/0tfq4p5r/

This demo just puts some big strings in the state (and into the props of a child component). If you click the button it will replace the array of strings with an empty array. At this point if you inspect the memory usage you will see that both memoizedState and memoizedProps are still holding references to the original array of strings and that memory can't be collected.

What is the expected behavior?

I was expecting no references to the old data to be retained, so that the memory could be reclaimed immediately.

I ran into this when testing an app with a large dataset that is near my browser's heap limit. If I want to replace that with a different, equally large dataset, and I attempt to make the first large dataset GC-able by removing it from my Redux store before putting the second dataset in the store, I wind up with the old dataset still resident in memory due to being retained by memoizedProps of a fiber.

I noticed this PR that sounds possibly related:

https://github.com/facebook/react/pull/14276

and tested against current master (f1bf281) but still had the issue with memoizedProps.

Right now I'm working around this by clearing the props twice consecutively before loading the new data. Is that the intended solution for this situation?

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

macOS High Sierra 10.13.6 (17G65) Chrome Version 70.0.3538.110 (Official Build) (64-bit) React 16.6.3 Don't know about previous versions of React.

facebook/react

Answer questions alkemir

Actually, it seems like our issue is some kind of starvation. We update a component every second, and this causes a leak. But if we update every 10 seconds, exactly the same code will not increase the amount of memory consumed. If we stop the updates, the GC is able to reclaim the memory. Should I open a new issue about this?

useful!

Related questions

Disable react strict mode on third party libraries hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 2
Warning: Unknown DOM property for. Did you mean htmlFor? hot 2
React@16.9 block `javascript:void(0);` hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
DevTools: Updating state or props in devtools does not trigger component update. hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Stale values for useState inside callback functions hot 1
ReactDomServer - renderToString Failing with Context Provider on IE11 hot 1
Keep getting `TypeError: Cannot read property 'scrollTop' of null` in a custom hook... hot 1
Route based code splitting, Loading chunk 0 failed after new deployment hot 1
map through connected component, get data of last saga call within all componenets hot 1
Github User Rank List