Description
While testing SSR streaming in latest React 18 experimental and alpha versions, we noticed that context providers are reset to their initial values during rendering under certain conditions.
It works well when handling 1 request at a time. However, when the server gets 2 or more requests at the same time, the context providers seem to get confused. The context is correct at the beginning of the rendering for each request but it gets lost after a while.
There's a reproduction here using @gaearon 's demo: https://codesandbox.io/s/keen-snowflake-8nyo8?file=/src/data.js:1035-1082
To my understanding, since the React tree is wrapped in a provider in SSR, useContext
should never return null
in the server. Have a look at the terminal and see how it actually logs null
sometimes when getting multiple requests.
[0] This should never be null: { read: [Function: read] }
[0] This should never be null: { read: [Function: read] }
[0] This should never be null: null
[0] This should never be null: null
Run the following code from the console to simulate multiple requests:
function doRequest() { return fetch('https://8nyo8.sse.codesandbox.io/', {headers: {accept:'text/html'}}).then(r => r.text()) }
await Promise.all([doRequest(), doRequest()])
We saw this same issue in different setups, using both Webpack and Vite.
Thanks!