diff options
Diffstat (limited to 'examples/react-fast-refresh-test/src/components')
3 files changed, 44 insertions, 0 deletions
diff --git a/examples/react-fast-refresh-test/src/components/RenderCounter.tsx b/examples/react-fast-refresh-test/src/components/RenderCounter.tsx new file mode 100644 index 000000000..ed2f00b56 --- /dev/null +++ b/examples/react-fast-refresh-test/src/components/RenderCounter.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export function RenderCounter({ name, children }) { + const counter = React.useRef(1); + return ( + <div className="RenderCounter"> + <div className="RenderCounter-meta"> + <div className="RenderCounter-title"> + {name} rendered <strong>{counter.current++} times</strong> + </div> + <div className="RenderCounter-lastRender"> + LAST RENDER:{" "} + {new Intl.DateTimeFormat([], { + timeStyle: "long", + }).format(new Date())} + </div> + </div> + <div className="RenderCounter-children">{children}</div> + </div> + ); +} diff --git a/examples/react-fast-refresh-test/src/components/app.tsx b/examples/react-fast-refresh-test/src/components/app.tsx new file mode 100644 index 000000000..2edc02545 --- /dev/null +++ b/examples/react-fast-refresh-test/src/components/app.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import { Button } from "./Button"; +import { RenderCounter } from "./RenderCounter"; +export function App() { + return ( + <RenderCounter name="App"> + <div className="AppRoot"> + <h1>This is the root element</h1> + + <Button>Click</Button> + </div> + </RenderCounter> + ); +} diff --git a/examples/react-fast-refresh-test/src/components/button.tsx b/examples/react-fast-refresh-test/src/components/button.tsx new file mode 100644 index 000000000..4c3388670 --- /dev/null +++ b/examples/react-fast-refresh-test/src/components/button.tsx @@ -0,0 +1,9 @@ +import { RenderCounter } from "./RenderCounter"; + +export const Button = ({ children }) => { + return ( + <RenderCounter name="Button"> + <div className="Button">{children}</div> + </RenderCounter> + ); +}; |