diff --git a/packages/react-reconciler/src/ReactFiberScheduler.js b/packages/react-reconciler/src/ReactFiberScheduler.js index 47fd98f69b65d..46cef6cec6c02 100644 --- a/packages/react-reconciler/src/ReactFiberScheduler.js +++ b/packages/react-reconciler/src/ReactFiberScheduler.js @@ -1094,8 +1094,22 @@ export default function( } function computeInteractiveExpiration(currentTime: ExpirationTime) { - // Should complete within ~500ms. 600ms max. - const expirationMs = 500; + let expirationMs; + // We intentionally set a higher expiration time for interactive updates in + // dev than in production. + // If the main thread is being blocked so long that you hit the expiration, + // it's a problem that could be solved with better scheduling. + // People will be more likely to notice this and fix it with the long + // expiration time in development. + // In production we opt for better UX at the risk of masking scheduling + // problems, by expiring fast. + if (__DEV__) { + // Should complete within ~500ms. 600ms max. + expirationMs = 500; + } else { + // In production things should be more responsive, 150ms max. + expirationMs = 150; + } const bucketSizeMs = 100; return computeExpirationBucket(currentTime, expirationMs, bucketSizeMs); }