Add React.startTransition

[rickhanlonii]

Overview

Experimental only

This PR adds startTransition to the isomorphic package.

Details

The useTransition hook allows deferring an update from appearing on the screen until all content is loaded in the next screen. As a hook this is useful because most of the time the trigger for an update is inside an event, like a click handler:

function App() {
  const [currentPage, setPage] = useState('home');
  const [startTransition, isPending] = useTransition();

  function handleClick(nextPage) {
    startTransition(() => {
      setPage(nextPage);
    })
  }

  return <Page page={currentPage} onClick={handleClick} isPending={isPending} /> 
}

But this doesn't cover use cases that which don't have access to hooks. Sometimes you may want to trigger an update that causes a transition from outside of a component:

let setPageOutsideComponent;

function App() {
  const [currentPage, setPage] = useState('home');
  setPageOutsideComponent = setPage;

  return <Page page={currentPage} /> 
}

// This could be in a data listener, or action creator.
// Anything that could trigger an update from outside the component.
setPageOutsideComponent('about');

These use cases also need to be able to defer an update, and for that we're exposing React.startTransition:

React.startTransition(() => {
  setPageOutsideComponent('about');
});

Importantly, there's no isPending value because there's no mechanism to update that value. If you need to track the pending status of a transition, you should use a hook which has a built-in ability to update the pending state as it changes.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5c11731:

Sandbox	Source
React	Configuration

[sizebot]

Details of bundled changes.

Comparing: c4e0768...5c11731

react

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-jsx-runtime.development.js	0.0%	0.0%	37.3 KB	37.3 KB	10.73 KB	10.74 KB	NODE_DEV
react.development.js	+0.4%	+0.4%	112.35 KB	112.81 KB	27.24 KB	27.35 KB	UMD_DEV
react-jsx-runtime.production.min.js	0.0%	🔺+0.2%	984 B	984 B	614 B	615 B	NODE_PROD
react-unstable-cache.development.js	0.0%	+0.2%	1.05 KB	1.05 KB	588 B	589 B	NODE_DEV
React-dev.js	+0.5%	+0.4%	88.68 KB	89.15 KB	21.16 KB	21.25 KB	RN_FB_DEV
React-prod.js	🔺+2.2%	🔺+1.2%	17.13 KB	17.51 KB	4.54 KB	4.6 KB	RN_FB_PROD
react-unstable-cache.profiling.min.js	0.0%	+0.2%	866 B	866 B	562 B	563 B	NODE_PROFILING
React-profiling.js	+2.2%	+1.2%	17.13 KB	17.51 KB	4.54 KB	4.6 KB	RN_FB_PROFILING
react-jsx-dev-runtime.development.js	0.0%	0.0%	36.72 KB	36.72 KB	10.56 KB	10.56 KB	NODE_DEV
react-jsx-dev-runtime.production.min.js	0.0%	🔺+0.6%	478 B	478 B	330 B	332 B	NODE_PROD
react-jsx-dev-runtime.profiling.min.js	0.0%	+0.3%	477 B	477 B	330 B	331 B	NODE_PROFILING
react.production.min.js	🔺+1.0%	🔺+0.7%	12.32 KB	12.44 KB	4.79 KB	4.82 KB	UMD_PROD
react-jsx-runtime.profiling.min.js	0.0%	+0.2%	983 B	983 B	614 B	615 B	NODE_PROFILING
react.profiling.min.js	+0.9%	+0.7%	15.84 KB	15.98 KB	5.89 KB	5.93 KB	UMD_PROFILING
react.development.js	+0.6%	+0.5%	74.16 KB	74.59 KB	19.66 KB	19.76 KB	NODE_DEV
react.production.min.js	🔺+1.6%	🔺+0.8%	7.52 KB	7.64 KB	2.96 KB	2.98 KB	NODE_PROD
React-dev.js	+0.5%	+0.4%	96.61 KB	97.08 KB	23.42 KB	23.52 KB	FB_WWW_DEV
React-prod.js	🔺+2.3%	🔺+1.2%	16.87 KB	17.26 KB	4.38 KB	4.43 KB	FB_WWW_PROD
React-profiling.js	+2.3%	+1.2%	16.87 KB	17.26 KB	4.38 KB	4.43 KB	FB_WWW_PROFILING

React: size: 🔺+1.0%, gzip: 🔺+0.7%

Size changes (experimental)

Generated by 🚫 dangerJS against 5c11731

[sizebot]

Details of bundled changes.

Comparing: c4e0768...5c11731

react

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-jsx-runtime.development.js	0.0%	0.0%	37.29 KB	37.29 KB	10.73 KB	10.73 KB	NODE_DEV
react-jsx-runtime.production.min.js	0.0%	🔺+0.2%	971 B	971 B	606 B	607 B	NODE_PROD
React-dev.js	+0.5%	+0.4%	89.68 KB	90.15 KB	21.35 KB	21.45 KB	RN_FB_DEV
React-prod.js	🔺+2.2%	🔺+1.1%	17.27 KB	17.66 KB	4.59 KB	4.64 KB	RN_FB_PROD
React-profiling.js	+2.2%	+1.1%	17.27 KB	17.66 KB	4.59 KB	4.64 KB	RN_FB_PROFILING
react-jsx-dev-runtime.development.js	0.0%	0.0%	36.7 KB	36.7 KB	10.56 KB	10.56 KB	NODE_DEV
react-jsx-dev-runtime.production.min.js	0.0%	🔺+0.3%	465 B	465 B	321 B	322 B	NODE_PROD
react-jsx-dev-runtime.profiling.min.js	0.0%	+0.3%	464 B	464 B	321 B	322 B	NODE_PROFILING
react.production.min.js	0.0%	-0.0%	11.2 KB	11.2 KB	4.47 KB	4.47 KB	UMD_PROD
react-jsx-runtime.profiling.min.js	0.0%	+0.2%	970 B	970 B	606 B	607 B	NODE_PROFILING
react.development.js	0.0%	-0.0%	70.3 KB	70.3 KB	18.93 KB	18.93 KB	NODE_DEV
React-dev.js	+0.5%	+0.4%	97.61 KB	98.08 KB	23.65 KB	23.74 KB	FB_WWW_DEV
React-prod.js	🔺+2.3%	🔺+1.1%	17.02 KB	17.4 KB	4.43 KB	4.48 KB	FB_WWW_PROD
React-profiling.js	+2.3%	+1.1%	17.02 KB	17.4 KB	4.43 KB	4.48 KB	FB_WWW_PROFILING

React: size: 0.0%, gzip: -0.0%

Size changes (stable)

Generated by 🚫 dangerJS against 5c11731

[gaearon]

Does this also need an unprefixed export like others?

[rickhanlonii]

Nice catch, it doesn't need it but yes it should have it.

[gaearon]

lgtm but I don't have all context

[acdlite]

Nit: Can we rename this to .currentTransition please? To match the convention of the other ref-like things

[acdlite]

I guess it was already like that so it's fine. We can rethink the internal data structure later.