IssueRaiser

[React 19] Suspense throttling behavior (`FALLBACK_THROTTLE_MS`) kicks in too often

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --> React version: 19.0.0 Related Issues: #30408, #31697 This may be the intended behavior, but I'm opening this issue anyway because enough discussion hasn't been done in the related issues IMO and the current behavior still feels poor to me in that it makes it too easy to slow down actual user experience. ## Steps To Reproduce <details> <summary>Code</summary> ```jsx const zero = Promise.resolve(0); function getNumber(num) { return new Promise((resolve) => { setTimeout(() => resolve(num), 100); }); } function App() { const [count, setCount] = useState(zero); const countValue = use(count); useEffect(() => { console.log("countValue =", countValue, Date.now()); }, [countValue]); return ( <button onClick={() => { console.log("click", Date.now()); setCount(getNumber(countValue + 1)); }} > count is {countValue} </button> ); } ``` </details> In short, when a rerendering suspends, you always have to wait for 300ms even if underlying data fetching has finished sooner. In the attached example, when user pushes the button, a new Promise is passed to `use()`, which triggers Suspense. Even though that Promise resolves exactly after 100ms, the UI is updated only after 300ms. I e

Posted by uhyo on Dec 17, 2024, 1:21 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.2,000 issues0 comments

reliability (SaaS)

[React 19] Suspense throttling behavior (`FALLBACK_THROTTLE_MS`) kicks in too often

uhyoDec 17, 2024, 1:21 PM

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --> React version: 19.0.0 Related Issues: #30408, #31697 This may be the intended behavior, but I'm opening this issue anyway because enough discussion hasn't been done in the related issues IMO and the current behavior still feels poor to me in that it makes it too easy to slow down actual user experience. ## Steps To Reproduce <details> <summary>Code</summary> ```jsx const zero = Promise.resolve(0); function getNumber(num) { return new Promise((resolve) => { setTimeout(() => resolve(num), 100); }); } function App() { const [count, setCount] = useState(zero); const countValue = use(count); useEffect(() => { console.log("countValue =", countValue, Date.now()); }, [countValue]); return ( <button onClick={() => { console.log("click", Date.now()); setCount(getNumber(countValue + 1)); }} > count is {countValue} </button> ); } ``` </details> In short, when a rerendering suspends, you always have to wait for 300ms even if underlying data fetching has finished sooner. In the attached example, when user pushes the button, a new Promise is passed to `use()`, which triggers Suspense. Even though that Promise resolves exactly after 100ms, the UI is updated only after 300ms. I e

Comments (0)

No comments yet. Start the discussion.

Comment on this issue