Skip to content

Commit 922dda3

Browse files
committed
Revert "experimental_use(promise) for SSR (#25214)"
This reverts commit a0abef3
1 parent 6dadce2 commit 922dda3

File tree

6 files changed

+37
-581
lines changed

6 files changed

+37
-581
lines changed

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 0 additions & 260 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ let Suspense;
1919
let SuspenseList;
2020
let useSyncExternalStore;
2121
let useSyncExternalStoreWithSelector;
22-
let use;
2322
let PropTypes;
2423
let textCache;
2524
let window;
@@ -43,7 +42,6 @@ describe('ReactDOMFizzServer', () => {
4342
Suspense = React.Suspense;
4443
if (gate(flags => flags.enableSuspenseList)) {
4544
SuspenseList = React.SuspenseList;
46-
use = React.experimental_use;
4745
}
4846

4947
PropTypes = require('prop-types');
@@ -5286,264 +5284,6 @@ describe('ReactDOMFizzServer', () => {
52865284
console.error = originalConsoleError;
52875285
}
52885286
});
5289-
5290-
// @gate enableUseHook
5291-
it('basic use(promise)', async () => {
5292-
const promiseA = Promise.resolve('A');
5293-
const promiseB = Promise.resolve('B');
5294-
const promiseC = Promise.resolve('C');
5295-
5296-
function Async() {
5297-
return use(promiseA) + use(promiseB) + use(promiseC);
5298-
}
5299-
5300-
function App() {
5301-
return (
5302-
<Suspense fallback="Loading...">
5303-
<Async />
5304-
</Suspense>
5305-
);
5306-
}
5307-
5308-
await act(async () => {
5309-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
5310-
pipe(writable);
5311-
});
5312-
5313-
// TODO: The `act` implementation in this file doesn't unwrap microtasks
5314-
// automatically. We can't use the same `act` we use for Fiber tests
5315-
// because that relies on the mock Scheduler. Doesn't affect any public
5316-
// API but we might want to fix this for our own internal tests.
5317-
//
5318-
// For now, wait for each promise in sequence.
5319-
await act(async () => {
5320-
await promiseA;
5321-
});
5322-
await act(async () => {
5323-
await promiseB;
5324-
});
5325-
await act(async () => {
5326-
await promiseC;
5327-
});
5328-
5329-
expect(getVisibleChildren(container)).toEqual('ABC');
5330-
5331-
ReactDOMClient.hydrateRoot(container, <App />);
5332-
expect(Scheduler).toFlushAndYield([]);
5333-
expect(getVisibleChildren(container)).toEqual('ABC');
5334-
});
5335-
5336-
// @gate enableUseHook
5337-
it('basic use(context)', async () => {
5338-
const ContextA = React.createContext('default');
5339-
const ContextB = React.createContext('B');
5340-
const ServerContext = React.createServerContext(
5341-
'ServerContext',
5342-
'default',
5343-
);
5344-
function Client() {
5345-
return use(ContextA) + use(ContextB);
5346-
}
5347-
function ServerComponent() {
5348-
return use(ServerContext);
5349-
}
5350-
function Server() {
5351-
return (
5352-
<ServerContext.Provider value="C">
5353-
<ServerComponent />
5354-
</ServerContext.Provider>
5355-
);
5356-
}
5357-
function App() {
5358-
return (
5359-
<>
5360-
<ContextA.Provider value="A">
5361-
<Client />
5362-
</ContextA.Provider>
5363-
<Server />
5364-
</>
5365-
);
5366-
}
5367-
5368-
await act(async () => {
5369-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
5370-
pipe(writable);
5371-
});
5372-
expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
5373-
5374-
// Hydration uses a different renderer runtime (Fiber instead of Fizz).
5375-
// We reset _currentRenderer here to not trigger a warning about multiple
5376-
// renderers concurrently using these contexts
5377-
ContextA._currentRenderer = null;
5378-
ServerContext._currentRenderer = null;
5379-
ReactDOMClient.hydrateRoot(container, <App />);
5380-
expect(Scheduler).toFlushAndYield([]);
5381-
expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
5382-
});
5383-
5384-
// @gate enableUseHook
5385-
it('use(promise) in multiple components', async () => {
5386-
const promiseA = Promise.resolve('A');
5387-
const promiseB = Promise.resolve('B');
5388-
const promiseC = Promise.resolve('C');
5389-
const promiseD = Promise.resolve('D');
5390-
5391-
function Child({prefix}) {
5392-
return prefix + use(promiseC) + use(promiseD);
5393-
}
5394-
5395-
function Parent() {
5396-
return <Child prefix={use(promiseA) + use(promiseB)} />;
5397-
}
5398-
5399-
function App() {
5400-
return (
5401-
<Suspense fallback="Loading...">
5402-
<Parent />
5403-
</Suspense>
5404-
);
5405-
}
5406-
5407-
await act(async () => {
5408-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
5409-
pipe(writable);
5410-
});
5411-
5412-
// TODO: The `act` implementation in this file doesn't unwrap microtasks
5413-
// automatically. We can't use the same `act` we use for Fiber tests
5414-
// because that relies on the mock Scheduler. Doesn't affect any public
5415-
// API but we might want to fix this for our own internal tests.
5416-
//
5417-
// For now, wait for each promise in sequence.
5418-
await act(async () => {
5419-
await promiseA;
5420-
});
5421-
await act(async () => {
5422-
await promiseB;
5423-
});
5424-
await act(async () => {
5425-
await promiseC;
5426-
});
5427-
await act(async () => {
5428-
await promiseD;
5429-
});
5430-
5431-
expect(getVisibleChildren(container)).toEqual('ABCD');
5432-
5433-
ReactDOMClient.hydrateRoot(container, <App />);
5434-
expect(Scheduler).toFlushAndYield([]);
5435-
expect(getVisibleChildren(container)).toEqual('ABCD');
5436-
});
5437-
5438-
// @gate enableUseHook
5439-
it('using a rejected promise will throw', async () => {
5440-
const promiseA = Promise.resolve('A');
5441-
const promiseB = Promise.reject(new Error('Oops!'));
5442-
const promiseC = Promise.resolve('C');
5443-
5444-
// Jest/Node will raise an unhandled rejected error unless we await this. It
5445-
// works fine in the browser, though.
5446-
await expect(promiseB).rejects.toThrow('Oops!');
5447-
5448-
function Async() {
5449-
return use(promiseA) + use(promiseB) + use(promiseC);
5450-
}
5451-
5452-
class ErrorBoundary extends React.Component {
5453-
state = {error: null};
5454-
static getDerivedStateFromError(error) {
5455-
return {error};
5456-
}
5457-
render() {
5458-
if (this.state.error) {
5459-
return this.state.error.message;
5460-
}
5461-
return this.props.children;
5462-
}
5463-
}
5464-
5465-
function App() {
5466-
return (
5467-
<Suspense fallback="Loading...">
5468-
<ErrorBoundary>
5469-
<Async />
5470-
</ErrorBoundary>
5471-
</Suspense>
5472-
);
5473-
}
5474-
5475-
const reportedServerErrors = [];
5476-
await act(async () => {
5477-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
5478-
onError(error) {
5479-
reportedServerErrors.push(error);
5480-
},
5481-
});
5482-
pipe(writable);
5483-
});
5484-
5485-
// TODO: The `act` implementation in this file doesn't unwrap microtasks
5486-
// automatically. We can't use the same `act` we use for Fiber tests
5487-
// because that relies on the mock Scheduler. Doesn't affect any public
5488-
// API but we might want to fix this for our own internal tests.
5489-
//
5490-
// For now, wait for each promise in sequence.
5491-
await act(async () => {
5492-
await promiseA;
5493-
});
5494-
await act(async () => {
5495-
await expect(promiseB).rejects.toThrow('Oops!');
5496-
});
5497-
await act(async () => {
5498-
await promiseC;
5499-
});
5500-
5501-
expect(getVisibleChildren(container)).toEqual('Loading...');
5502-
expect(reportedServerErrors.length).toBe(1);
5503-
expect(reportedServerErrors[0].message).toBe('Oops!');
5504-
5505-
const reportedClientErrors = [];
5506-
ReactDOMClient.hydrateRoot(container, <App />, {
5507-
onRecoverableError(error) {
5508-
reportedClientErrors.push(error);
5509-
},
5510-
});
5511-
expect(Scheduler).toFlushAndYield([]);
5512-
expect(getVisibleChildren(container)).toEqual('Oops!');
5513-
expect(reportedClientErrors.length).toBe(1);
5514-
if (__DEV__) {
5515-
expect(reportedClientErrors[0].message).toBe('Oops!');
5516-
} else {
5517-
expect(reportedClientErrors[0].message).toBe(
5518-
'The server could not finish this Suspense boundary, likely due to ' +
5519-
'an error during server rendering. Switched to client rendering.',
5520-
);
5521-
}
5522-
});
5523-
5524-
// @gate enableUseHook
5525-
it("use a promise that's already been instrumented and resolved", async () => {
5526-
const thenable = {
5527-
status: 'fulfilled',
5528-
value: 'Hi',
5529-
then() {},
5530-
};
5531-
5532-
// This will never suspend because the thenable already resolved
5533-
function App() {
5534-
return use(thenable);
5535-
}
5536-
5537-
await act(async () => {
5538-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
5539-
pipe(writable);
5540-
});
5541-
expect(getVisibleChildren(container)).toEqual('Hi');
5542-
5543-
ReactDOMClient.hydrateRoot(container, <App />);
5544-
expect(Scheduler).toFlushAndYield([]);
5545-
expect(getVisibleChildren(container)).toEqual('Hi');
5546-
});
55475287
});
55485288

55495289
describe('useEvent', () => {

0 commit comments

Comments
 (0)