Skip to content

Instantly share code, notes, and snippets.

@Siemko

Siemko/bad.js Secret

Last active May 31, 2020
Embed
What would you like to do?
React performance
import React from "react";
import ReactDOM from "react-dom";
function Spinner({ label }) {
console.log(`[${label}] I started spinning`);
setTimeout(() => {
console.log(`[${label}] I stopped spinning!`);
}, 1000 + Math.random() * 1000);
return null;
}
function Bad() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
return (
<div>
<button onClick={increment}>[Bad] The count is {count}</button>
<Spinner label="bad" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Bad />
</React.StrictMode>,
rootElement
);
import React from "react";
import ReactDOM from "react-dom";
function calculateSum(x, y) {
let i = 0;
let wait = Math.random() * 1000000000 + 1000000000;
while (i < wait) {
i++;
}
return x + y;
}
function Sum({ x, y }) {
const sum = React.useMemo(() => calculateSum(x, y), [x, y]);
return (
<div>
The sum of {x} and {y} is {sum}.
</div>
);
}
function Counter() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
return (
<div>
<button onClick={increment}>The count is {count}</button>
<Sum x={2} y={3} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
rootElement
);
import React from "react";
import ReactDOM from "react-dom";
function Spinner({ label }) {
console.log(`[${label}] I started spinning`);
setTimeout(() => {
console.log(`[${label}] I stopped spinning!`);
}, 1000 + Math.random() * 1000);
return null;
}
function Good(props) {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
return (
<div>
<button onClick={increment}>[Good] The count is {count}</button>
{props.spinner}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Good spinner={<Spinner label="good" />} />
</React.StrictMode>,
rootElement
);
import React from "react";
import ReactDOM from "react-dom";
function calculateSum(x, y) {
let i = 0;
let wait = Math.random() * 1000000000 + 1000000000;
while (i < wait) {
i++;
}
return x + y;
}
function Sum({ x, y }) {
const sum = calculateSum(x, y);
return (
<div>
The sum of {x} and {y} is {sum}.
</div>
);
}
function Counter() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
return (
<div>
<button onClick={increment}>The count is {count}</button>
<Sum x={2} y={3} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
rootElement
);
import * as React from "react";
const Text = React.lazy(() => import("./text"));
export default function App() {
return (
<div className="App">
<React.Suspense fallback={<p>Loading...</p>}>
<Text />
</React.Suspense>
</div>
);
}
import * as React from "react";
export default function Text() {
return <p>This is Text component</p>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment