Skip to content

looped render for suspense child bug reproduction #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SuperOleg39 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

looped render for suspense child bug reproduction #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
yarn-error.log
.history
.vscode
36,098 changes: 36,089 additions & 9 deletions react-18-stream/build/main.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion react-18-stream/build/main.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions react-18-stream/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"concurrently": "^5.3.0",
"express": "^4.17.1",
"nodemon": "^2.0.6",
"react": "^18",
"react-dom": "^18",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.3",
"resolve": "1.12.0",
"rimraf": "^3.0.2",
Expand Down
3 changes: 2 additions & 1 deletion react-18-stream/server/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
'use strict';

const babelRegister = require('@babel/register');

babelRegister({
ignore: [/[\\\/](build|server\/server|node_modules)[\\\/]/],
presets: [['react-app', {runtime: 'automatic'}]],
presets: [['react-app', {runtime: 'automatic', useESModules: false}]],
plugins: ['@babel/transform-modules-commonjs'],
});

Expand Down
74 changes: 68 additions & 6 deletions react-18-stream/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,61 @@
* LICENSE file in the root directory of this source tree.
*
*/

import React from 'react';
import Html from './Html';

export default function App({assets}) {
const components = [];
const components = [];

for (let i = 0; i <= 1000; i++) {
components.push(<HeavyComponent key={i} />);
}

class CmpWithSetState extends React.Component {
constructor(props) {
super(props);
setTimeout(() => {
this.setState({ foo: "bar" });
}, 100);
}

for (let i = 0; i <= 1000; i++) {
components.push(<HeavyComponent />);
render() {
console.log("render CmpWithSetState");
return <>
<p>Another Component</p>
{components}
</>;
}
}

function AnotherCmp() {
console.log("render AnotherCmp");
// if (typeof window === 'undefined') {
// throw Error("something wrong");
// }
return <>
<p>Another Component {typeof window === 'undefined' ? 1 : 2}</p>
{components}
</>;
}

export default function App({assets}) {
return (
<Html assets={assets} title="Hello">
<h1>React 18 stream</h1>
{components}

{/* <ErrorBoundary> */}
<React.Suspense>
<CmpWithSetState />
</React.Suspense>
{/* </ErrorBoundary> */}

<p>some text</p>

{/* <ErrorBoundary> */}
<React.Suspense>
<AnotherCmp />
</React.Suspense>
{/* </ErrorBoundary> */}
</Html>
);
}
Expand Down Expand Up @@ -59,3 +100,24 @@ function HeavyComponent() {
</>
);
}

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return this.props.fallback;
}

return this.props.children;
}
}
4 changes: 3 additions & 1 deletion react-18-stream/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@
import {hydrateRoot} from 'react-dom/client';
import App from './App';

hydrateRoot(document, <App assets={window.assetManifest} />);
hydrateRoot(document, <App assets={window.assetManifest} />, { onRecoverableError: (error, errorInfo) => {
console.error('recoverable error', error, errorInfo)
}});
26 changes: 13 additions & 13 deletions react-18-stream/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4138,13 +4138,13 @@ rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-dom@^18:
version "18.0.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
react-dom@^18.2.0:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
dependencies:
loose-envify "^1.1.0"
scheduler "^0.21.0"
scheduler "^0.23.2"

react-error-boundary@^3.1.3:
version "3.1.3"
Expand All @@ -4153,10 +4153,10 @@ react-error-boundary@^3.1.3:
dependencies:
"@babel/runtime" "^7.12.5"

react@^18:
version "18.0.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
react@^18.2.0:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
dependencies:
loose-envify "^1.1.0"

Expand Down Expand Up @@ -4416,10 +4416,10 @@ safe-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

scheduler@^0.21.0:
version "0.21.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
scheduler@^0.23.2:
version "0.23.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
dependencies:
loose-envify "^1.1.0"

Expand Down