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!
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,
useContextshould never returnnullin the server. Have a look at the terminal and see how it actually logsnullsometimes when getting multiple requests.Run the following code from the console to simulate multiple requests:
We saw this same issue in different setups, using both Webpack and Vite.
Thanks!