Skip to content

Commit 3485c24

Browse files
committed
Upgrade react-range to fix memory usage of sliders
As mentioned in https://blog.streamlit.io/six-tips-for-improving-your-streamlit-app-performance/ memory usage struggles in the browser if you have large ranges: > Due to implementation details, high-cardinality sliders don't suffer > from the serialization and network transfer delays mentioned earlier, > but they will still lead to a poor user experience (who needs to > specify house prices up to the dollar?) and high memory usage. In my > testing, the example above increased RAM usage by gigabytes until the > web browser eventually gave up (though this is something that should > be solvable on our end. We'll look into it!) This was caused by a bug in react-range, which I fixed last year. tajo/react-range#178 At the time, I had figured it would get picked up by a random yarn upgrade and didn't worry too much about it. But, apparently yarn doesn't really have an easy way of doing upgrades of transitive dependencies (see yarnpkg/yarn#4986)? I took the suggestion of someone in that thread to delete the entry and let yarn regenerate it. Some technical details about the react-range fix from the original commit message (the "application" is a streamlit app): > We have an application that uses react-range under the hood, and we > noticed that a range input was taking 2GB of RAM on our machines. I > did some investigation and found that regardless of whether the marks > functionality was being used, refs were being created for each > possible value of the range. > We have some fairly huge ranges (we're using the input to scrub a > video with potential microsecond accuracy), and can imagine that > other people are affected by the previous behavior. This change > should allow us to continue using large input ranges without > incurring a memory penalty.
1 parent 0c38057 commit 3485c24

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

frontend/yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14009,9 +14009,9 @@ react-plotly.js@^2.6.0:
1400914009
prop-types "^15.8.1"
1401014010

1401114011
react-range@^1.8.0:
14012-
version "1.8.6"
14013-
resolved "https://registry.yarnpkg.com/react-range/-/react-range-1.8.6.tgz#744e47c410ca1c2cea3cae70ee4c124dc9d4cab6"
14014-
integrity sha512-oEWZD//akyrfCpqXUnm4PJvochNqBvFtirlo+Mn40ItBuqLt+xvz+78V2faWl2zW5QzMQgdizxZ4HS5x5Ot0bw==
14012+
version "1.8.14"
14013+
resolved "https://registry.yarnpkg.com/react-range/-/react-range-1.8.14.tgz#11047f69b365ac6c75c3d715771ebe76b93982ec"
14014+
integrity sha512-v2nyD5106rHf9dwHzq+WRlhCes83h1wJRHIMFjbZsYYsO6LF4mG/mR3cH7Cf+dkeHq65DItuqIbLn/3jjYjsHg==
1401514015

1401614016
react-refresh@^0.11.0:
1401714017
version "0.11.0"

0 commit comments

Comments
 (0)