Skip to content

Instantly share code, notes, and snippets.

@Siemko

Siemko/bad.js Secret

Last active May 31, 2020 10:38
Download ZIP

Revisions

  1. Siemko revised this gist May 31, 2020. 2 changed files with 78 additions and 0 deletions.
    39 changes: 39 additions & 0 deletions fast.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    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
    );
    39 changes: 39 additions & 0 deletions slow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    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
    );
  2. Siemko revised this gist May 31, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion good.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ function Good(props) {
    const rootElement = document.getElementById("root");
    ReactDOM.render(
    <React.StrictMode>
    <Good spinner={<Spinner label="count" />} />
    <Good spinner={<Spinner label="good" />} />
    </React.StrictMode>,
    rootElement
    );
  3. Siemko revised this gist May 31, 2020. 2 changed files with 16 additions and 10 deletions.
    13 changes: 8 additions & 5 deletions bad.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,21 @@
    import React from "react";
    import ReactDOM from "react-dom";

    function Logger({ label }) {
    console.log(`${label} render!`);
    function Spinner({ label }) {
    console.log(`[${label}] I started spinning`);
    setTimeout(() => {
    console.log(`[${label}] I stopped spinning!`);
    }, 1000 + Math.random() * 1000);
    return null;
    }

    function Bad(props) {
    function Bad() {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(c => c + 1);
    return (
    <div>
    <button onClick={increment}>The count is {count}</button>
    <Logger label="counter" />
    <button onClick={increment}>[Bad] The count is {count}</button>
    <Spinner label="bad" />
    </div>
    );
    }
    13 changes: 8 additions & 5 deletions good.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,11 @@
    import React from "react";
    import ReactDOM from "react-dom";

    function Logger({ label }) {
    console.log(`${label} render!`);
    function Spinner({ label }) {
    console.log(`[${label}] I started spinning`);
    setTimeout(() => {
    console.log(`[${label}] I stopped spinning!`);
    }, 1000 + Math.random() * 1000);
    return null;
    }

    @@ -11,16 +14,16 @@ function Good(props) {
    const increment = () => setCount(c => c + 1);
    return (
    <div>
    <button onClick={increment}>The count is {count}</button>
    {props.logger}
    <button onClick={increment}>[Good] The count is {count}</button>
    {props.spinner}
    </div>
    );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(
    <React.StrictMode>
    <Good logger={<Logger label="count" />} />
    <Good spinner={<Spinner label="count" />} />
    </React.StrictMode>,
    rootElement
    );
  4. Siemko revised this gist May 30, 2020. 2 changed files with 52 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions bad.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import React from "react";
    import ReactDOM from "react-dom";

    function Logger({ label }) {
    console.log(`${label} render!`);
    return null;
    }

    function Bad(props) {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(c => c + 1);
    return (
    <div>
    <button onClick={increment}>The count is {count}</button>
    <Logger label="counter" />
    </div>
    );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(
    <React.StrictMode>
    <Bad />
    </React.StrictMode>,
    rootElement
    );
    26 changes: 26 additions & 0 deletions good.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import React from "react";
    import ReactDOM from "react-dom";

    function Logger({ label }) {
    console.log(`${label} render!`);
    return null;
    }

    function Good(props) {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(c => c + 1);
    return (
    <div>
    <button onClick={increment}>The count is {count}</button>
    {props.logger}
    </div>
    );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(
    <React.StrictMode>
    <Good logger={<Logger label="count" />} />
    </React.StrictMode>,
    rootElement
    );
  5. Siemko revised this gist May 30, 2020. No changes.
  6. Siemko created this gist May 30, 2020.
    13 changes: 13 additions & 0 deletions suspense-usage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    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>
    );
    }
    5 changes: 5 additions & 0 deletions text.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    import * as React from "react";

    export default function Text() {
    return <p>This is Text component</p>;
    }