Skip to content

Commit

Permalink
Rename to withSuspenseConfig and drop the default config
Browse files Browse the repository at this point in the history
This allow opting out of suspending in some nested scope.

A lot of time when you use this function you'll use it with high level
helpers. Those helpers often want to accept some additional configuration
for suspense and if it should suspend at all. The easiest way is to just
have the api accept null or a suspense config and pass it through. However,
then you have to remember that calling suspendIfNeeded has a default.

It gets simpler by just saying tat you can pass the config. You can have
your own default in user space.
  • Loading branch information
sebmarkbage committed May 16, 2019
1 parent 919826e commit ce030c0
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -745,9 +745,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toFlushAndYield(['S']);

// Schedule an update, and suspend for up to 5 seconds.
React.unstable_suspendIfNeeded(() => ReactNoop.render(<App text="A" />), {
timeoutMs: 5000,
});
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App text="A" />),
{
timeoutMs: 5000,
},
);
// The update should suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
Expand All @@ -759,9 +762,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('S')]);

// Schedule another low priority update.
React.unstable_suspendIfNeeded(() => ReactNoop.render(<App text="B" />), {
timeoutMs: 10000,
});
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App text="B" />),
{
timeoutMs: 10000,
},
);
// This update should also suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
Expand Down Expand Up @@ -1665,7 +1671,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
ReactNoop.render(<Foo />);

// Took a long time to render. This is to ensure we get a long suspense time.
// Could also use something like suspendIfNeeded to simulate this.
// Could also use something like withSuspenseConfig to simulate this.
Scheduler.advanceTime(1500);
await advanceTimers(1500);

Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/React.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import {
useRef,
useState,
} from './ReactHooks';
import {suspendIfNeeded} from './ReactBatchConfig';
import {withSuspenseConfig} from './ReactBatchConfig';
import {
createElementWithValidation,
createFactoryWithValidation,
Expand Down Expand Up @@ -96,7 +96,7 @@ const React = {

version: ReactVersion,

unstable_suspendIfNeeded: suspendIfNeeded,
unstable_withSuspenseConfig: withSuspenseConfig,

__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};
Expand Down
10 changes: 2 additions & 8 deletions packages/react/src/ReactBatchConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,10 @@ import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig

import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';

const DefaultSuspenseConfig: SuspenseConfig = {
timeoutMs: 5000,
loadingDelayMs: 0,
minLoadingDurationMs: 0,
};

// Within the scope of the callback, mark all updates as being allowed to suspend.
export function suspendIfNeeded(scope: () => void, config?: SuspenseConfig) {
export function withSuspenseConfig(scope: () => void, config?: SuspenseConfig) {
const previousConfig = ReactCurrentBatchConfig.suspense;
ReactCurrentBatchConfig.suspense = config || DefaultSuspenseConfig;
ReactCurrentBatchConfig.suspense = config === undefined ? null : config;
try {
scope();
} finally {
Expand Down

0 comments on commit ce030c0

Please sign in to comment.