mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Andrew Clark
be67db46b6
Adds a second argument to useDeferredValue called initialValue: ```js const value = useDeferredValue(finalValue, initialValue); ``` During the initial render of a component, useDeferredValue will return initialValue. Once that render finishes, it will spawn an additional render to switch to finalValue. This same sequence should occur whenever the hook is hidden and revealed again, i.e. by a Suspense or Activity, though this part is not yet implemented. When initialValue is not provided, useDeferredValue has no effect during initial render, but during an update, it will remain on the previous value, then spawn an additional render to switch to the new value. (This is the same behavior that exists today.) During SSR, initialValue is always used, if provided. This feature is currently behind an experimental flag. We plan to ship it in a non-breaking release.
72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @emails react-core
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import {insertNodesAndExecuteScripts} from '../test-utils/FizzTestUtils';
|
|
|
|
// Polyfills for test environment
|
|
global.ReadableStream =
|
|
require('web-streams-polyfill/ponyfill/es6').ReadableStream;
|
|
global.TextEncoder = require('util').TextEncoder;
|
|
|
|
let act;
|
|
let container;
|
|
let React;
|
|
let ReactDOMServer;
|
|
let ReactDOMClient;
|
|
let useDeferredValue;
|
|
|
|
describe('ReactDOMFizzForm', () => {
|
|
beforeEach(() => {
|
|
jest.resetModules();
|
|
React = require('react');
|
|
ReactDOMServer = require('react-dom/server.browser');
|
|
ReactDOMClient = require('react-dom/client');
|
|
useDeferredValue = require('react').useDeferredValue;
|
|
act = require('internal-test-utils').act;
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
});
|
|
|
|
afterEach(() => {
|
|
document.body.removeChild(container);
|
|
});
|
|
|
|
async function readIntoContainer(stream) {
|
|
const reader = stream.getReader();
|
|
let result = '';
|
|
while (true) {
|
|
const {done, value} = await reader.read();
|
|
if (done) {
|
|
break;
|
|
}
|
|
result += Buffer.from(value).toString('utf8');
|
|
}
|
|
const temp = document.createElement('div');
|
|
temp.innerHTML = result;
|
|
insertNodesAndExecuteScripts(temp, container, null);
|
|
}
|
|
|
|
// @gate enableUseDeferredValueInitialArg
|
|
it('returns initialValue argument, if provided', async () => {
|
|
function App() {
|
|
return useDeferredValue('Final', 'Initial');
|
|
}
|
|
|
|
const stream = await ReactDOMServer.renderToReadableStream(<App />);
|
|
await readIntoContainer(stream);
|
|
expect(container.textContent).toEqual('Initial');
|
|
|
|
// After hydration, it's updated to the final value
|
|
await act(() => ReactDOMClient.hydrateRoot(container, <App />));
|
|
expect(container.textContent).toEqual('Final');
|
|
});
|
|
});
|