From 1c0d8fc65c86b10d416aa0533dc79ebddafcf26d Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 9 Sep 2020 15:42:08 -0600 Subject: [PATCH] remove all references to suspense config --- package-lock.json | 281 +++++++++--------- package.json | 6 +- .../fetch-approaches/render-as-you-fetch.js | 8 +- src/exercise/03.js | 4 - src/exercise/03.md | 36 +-- src/exercise/04.js | 8 +- src/exercise/05.js | 8 +- src/exercise/06.js | 8 +- src/exercise/07.js | 3 +- src/final/03.extra-1.js | 4 +- src/final/03.extra-2.js | 84 ------ src/final/03.js | 4 +- src/final/04.extra-1.js | 8 +- src/final/04.extra-2.js | 8 +- src/final/04.extra-3.js | 8 +- src/final/04.js | 8 +- src/final/05.extra-1.js | 8 +- src/final/05.extra-2.js | 8 +- src/final/05.js | 8 +- src/final/06.js | 8 +- src/final/07.js | 4 +- src/pokemon.js | 8 +- 22 files changed, 165 insertions(+), 365 deletions(-) delete mode 100644 src/final/03.extra-2.js diff --git a/package-lock.json b/package-lock.json index 67ebb0da..d70ddde6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2759,9 +2759,9 @@ } }, "@types/babel__traverse": { - "version": "7.0.13", - "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.13.tgz", - "integrity": "sha512-i+zS7t6/s9cdQvbqKDARrcbrPvtJGlbYsMkazo03nTAK3RX9FNrLllXys22uiTGJapPOTZTQ35nHh4ISph4SLQ==", + "version": "7.0.14", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.14.tgz", + "integrity": "sha512-8w9szzKs14ZtBVuP6Wn7nMLRJ0D6dfB0VEBEyRgxrZ/Ln49aNMykrghM2FaNn4FJRzNppCSa0Rv9pBRM5Xc3wg==", "dev": true, "requires": { "@babel/types": "^7.3.0" @@ -3340,9 +3340,9 @@ } }, "acorn-jsx": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz", - "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", "dev": true }, "acorn-walk": { @@ -4533,15 +4533,15 @@ } }, "browserslist": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz", - "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==", + "version": "4.14.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz", + "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001111", - "electron-to-chromium": "^1.3.523", + "caniuse-lite": "^1.0.30001125", + "electron-to-chromium": "^1.3.564", "escalade": "^3.0.2", - "node-releases": "^1.1.60" + "node-releases": "^1.1.61" } }, "bser": { @@ -4730,9 +4730,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001123", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz", - "integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==", + "version": "1.0.30001125", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz", + "integrity": "sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA==", "dev": true }, "capture-exit": { @@ -6379,9 +6379,9 @@ } }, "dot-prop": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz", - "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", "dev": true, "requires": { "is-obj": "^2.0.0" @@ -6472,9 +6472,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.561", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.561.tgz", - "integrity": "sha512-f9ESwg7KGKqNzfhJ8QRXBEZA/FpiWohHC/xob/Jk7BwUoKdI2xEhp36Y31AJwc5GygPwoMo/4W3ne7IWncW9Zg==", + "version": "1.3.564", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.564.tgz", + "integrity": "sha512-fNaYN3EtKQWLQsrKXui8mzcryJXuA0LbCLoizeX6oayG2emBaS5MauKjCPAvc29NEY4FpLHIUWiP+Y0Bfrs5dg==", "dev": true }, "elliptic": { @@ -9270,15 +9270,15 @@ "dev": true }, "husky": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.5.tgz", - "integrity": "sha512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz", + "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==", "dev": true, "requires": { "chalk": "^4.0.0", "ci-info": "^2.0.0", "compare-versions": "^3.6.0", - "cosmiconfig": "^6.0.0", + "cosmiconfig": "^7.0.0", "find-versions": "^3.2.0", "opencollective-postinstall": "^2.0.2", "pkg-dir": "^4.2.0", @@ -9287,6 +9287,19 @@ "which-pm-runs": "^1.0.0" }, "dependencies": { + "cosmiconfig": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", + "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -13182,9 +13195,9 @@ } }, "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" }, "node-forge": { "version": "0.9.0", @@ -13322,9 +13335,9 @@ } }, "node-releases": { - "version": "1.1.60", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz", - "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==", + "version": "1.1.61", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz", + "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==", "dev": true }, "node-request-interceptor": { @@ -15583,9 +15596,9 @@ } }, "react": { - "version": "0.0.0-experimental-4c8c98ab9", - "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-experimental-4c8c98ab9.tgz", - "integrity": "sha512-pqLXmUgWtpKJD/KM5o+NbEx1UPSaW53wRBgz3XndCahOCY0TwAAxu5CEOgayvgoTIiusLhJGO9z7fD6B/wuthA==", + "version": "0.0.0-experimental-94c0244ba", + "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-experimental-94c0244ba.tgz", + "integrity": "sha512-67fLM+CA1w96JM0Ju5dv9lE3q1qSxVAi1iAOOyhXddhQJfs85bAJNM+gEMPBKbrhbhJGyHL1mLh1xqpOzokQ4w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -15804,13 +15817,13 @@ } }, "react-dom": { - "version": "0.0.0-experimental-4c8c98ab9", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-4c8c98ab9.tgz", - "integrity": "sha512-HOcYHzwcrm94CZ5YyZsLMNnuJCZA3uN+OTfhNJwVXUs5lXKiWcyiWCe9bwk7l0hPEYot2CI4dhQOQ4XMnCEbSQ==", + "version": "0.0.0-experimental-94c0244ba", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-94c0244ba.tgz", + "integrity": "sha512-rvyWGIxrtjImQaeo3/27ORpU5i7fTzPlQH/xkEI/wlLfuJ2zi7Tideln8y9xM2BA5mYA74sH103bMbIQbPWtGQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "scheduler": "0.0.0-experimental-4c8c98ab9" + "scheduler": "0.0.0-experimental-94c0244ba" } }, "react-error-boundary": { @@ -16824,15 +16837,15 @@ } }, "rollup-plugin-terser": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz", - "integrity": "sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz", + "integrity": "sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==", "dev": true, "requires": { "@babel/code-frame": "^7.5.5", "jest-worker": "^24.9.0", "rollup-pluginutils": "^2.8.2", - "serialize-javascript": "^2.1.2", + "serialize-javascript": "^4.0.0", "terser": "^4.6.2" }, "dependencies": { @@ -16846,12 +16859,6 @@ "supports-color": "^6.1.0" } }, - "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", - "dev": true - }, "supports-color": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", @@ -16907,9 +16914,9 @@ } }, "rxjs": { - "version": "6.6.2", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz", - "integrity": "sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==", + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz", + "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==", "requires": { "tslib": "^1.9.0" }, @@ -17171,9 +17178,9 @@ } }, "scheduler": { - "version": "0.0.0-experimental-4c8c98ab9", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-4c8c98ab9.tgz", - "integrity": "sha512-32GW0cUH+xaLuFLbIa2q47p9FrHtQFCzPzFs5Ltf8jHZ1DOLNX6H6LoDdw1oKbTJf/gD4eWCtxAYeIhDs9eEwA==", + "version": "0.0.0-experimental-94c0244ba", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-94c0244ba.tgz", + "integrity": "sha512-F+eZM/SpbZj8Ugh7AU5dWydx/iwJwI91PGAEEtc01cvO28ojXaxEjBqUscKNNNJM0xUumoFmmDmEOfAr/wKyoA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -21099,9 +21106,9 @@ } }, "whatwg-fetch": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.0.tgz", - "integrity": "sha512-rsum2ulz2iuZH08mJkT0Yi6JnKhwdw4oeyMjokgxd+mmqYSd9cPpOQf01TIWgjxG/U4+QR+AwKq6lSbXVxkyoQ==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz", + "integrity": "sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==", "dev": true }, "whatwg-mimetype": { @@ -21111,9 +21118,9 @@ "dev": true }, "whatwg-url": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.2.1.tgz", - "integrity": "sha512-ZmVCr6nfBeaMxEHALLEGy0LszYjpJqf6PVNQUQ1qd9Et+q7Jpygd4rGGDXgHjD8e99yLFseD69msHDM4YwPZ4A==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.2.2.tgz", + "integrity": "sha512-PcVnO6NiewhkmzV0qn7A+UZ9Xx4maNTI+O+TShmfE4pqjoCMwUMjkvoNhNHPTvgR7QH9Xt3R13iHuWy2sToFxQ==", "dev": true, "requires": { "lodash.sortby": "^4.7.0", @@ -21189,27 +21196,27 @@ "dev": true }, "workbox-background-sync": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-5.1.3.tgz", - "integrity": "sha512-V/R95aPxYjbKCaVzUTihrZ9ObGOnzoA5n60r0DQ747p8Pj15/dDTYixonKhhlvavTiNezUrp+wTQBvZvcd/ETA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz", + "integrity": "sha512-AH6x5pYq4vwQvfRDWH+vfOePfPIYQ00nCEB7dJRU1e0n9+9HMRyvI63FlDvtFT2AvXVRsXvUt7DNMEToyJLpSA==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-broadcast-update": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-5.1.3.tgz", - "integrity": "sha512-HJ7FDmgweRcYp8fMiFbkmhaTjMYhMByURe5+TempnCi7cT5NNbyaG4T+rg8NWYxAeumSAB3JQF6XD/z34vRRHA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-5.1.4.tgz", + "integrity": "sha512-HTyTWkqXvHRuqY73XrwvXPud/FN6x3ROzkfFPsRjtw/kGZuZkPzfeH531qdUGfhtwjmtO/ZzXcWErqVzJNdXaA==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-build": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-5.1.3.tgz", - "integrity": "sha512-cssa2cKAi/FNp2P2m2DjF/UsXlVX6b1HgkXOjBTraFkIeyZEKxN1F1DnxOpGkdM/bPPRa7y5OmUvjOpgOd9apA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-5.1.4.tgz", + "integrity": "sha512-xUcZn6SYU8usjOlfLb9Y2/f86Gdo+fy1fXgH8tJHjxgpo53VVsqRX0lUDw8/JuyzNmXuo8vXX14pXX2oIm9Bow==", "dev": true, "requires": { "@babel/core": "^7.8.4", @@ -21227,27 +21234,27 @@ "pretty-bytes": "^5.3.0", "rollup": "^1.31.1", "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-terser": "^5.2.0", + "rollup-plugin-terser": "^5.3.1", "source-map": "^0.7.3", "source-map-url": "^0.4.0", "stringify-object": "^3.3.0", "strip-comments": "^1.0.2", "tempy": "^0.3.0", "upath": "^1.2.0", - "workbox-background-sync": "^5.1.3", - "workbox-broadcast-update": "^5.1.3", - "workbox-cacheable-response": "^5.1.3", - "workbox-core": "^5.1.3", - "workbox-expiration": "^5.1.3", - "workbox-google-analytics": "^5.1.3", - "workbox-navigation-preload": "^5.1.3", - "workbox-precaching": "^5.1.3", - "workbox-range-requests": "^5.1.3", - "workbox-routing": "^5.1.3", - "workbox-strategies": "^5.1.3", - "workbox-streams": "^5.1.3", - "workbox-sw": "^5.1.3", - "workbox-window": "^5.1.3" + "workbox-background-sync": "^5.1.4", + "workbox-broadcast-update": "^5.1.4", + "workbox-cacheable-response": "^5.1.4", + "workbox-core": "^5.1.4", + "workbox-expiration": "^5.1.4", + "workbox-google-analytics": "^5.1.4", + "workbox-navigation-preload": "^5.1.4", + "workbox-precaching": "^5.1.4", + "workbox-range-requests": "^5.1.4", + "workbox-routing": "^5.1.4", + "workbox-strategies": "^5.1.4", + "workbox-streams": "^5.1.4", + "workbox-sw": "^5.1.4", + "workbox-window": "^5.1.4" }, "dependencies": { "fs-extra": { @@ -21270,101 +21277,101 @@ } }, "workbox-cacheable-response": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-5.1.3.tgz", - "integrity": "sha512-lOJEwK2T4KWFNdhRFUKxTPBIO5hIYm9E/nYgMq5h/IH3iHPHlBPuFwRMaQy+TTCGWWTA85NomQOjVw1bj65RLw==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-5.1.4.tgz", + "integrity": "sha512-0bfvMZs0Of1S5cdswfQK0BXt6ulU5kVD4lwer2CeI+03czHprXR3V4Y8lPTooamn7eHP8Iywi5QjyAMjw0qauA==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-core": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-5.1.3.tgz", - "integrity": "sha512-TFSIPxxciX9sFaj0FDiohBeIKpwMcCyNduydi9i3LChItcndDS6TJpErxybv8aBWeCMraXt33TWtF6kKuIObNw==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-5.1.4.tgz", + "integrity": "sha512-+4iRQan/1D8I81nR2L5vcbaaFskZC2CL17TLbvWVzQ4qiF/ytOGF6XeV54pVxAvKUtkLANhk8TyIUMtiMw2oDg==", "dev": true }, "workbox-expiration": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-5.1.3.tgz", - "integrity": "sha512-8YhpmIHqIx+xmtxONADc+di4a3zzCsvVHLiKq6T3vJZUPnqV2jzx+51+UHMUh3T5w5Z5SFC14l0V/jesRbuMKg==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-5.1.4.tgz", + "integrity": "sha512-oDO/5iC65h2Eq7jctAv858W2+CeRW5e0jZBMNRXpzp0ZPvuT6GblUiHnAsC5W5lANs1QS9atVOm4ifrBiYY7AQ==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-google-analytics": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-5.1.3.tgz", - "integrity": "sha512-ouK6xIJa+raFcO29TgwKFU/Hv1ejqSYzCzH9lI2B/4z/Wdnb8maL6mMIojQ8j5SohwKswMZmLDl0Az2PCmX11w==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-5.1.4.tgz", + "integrity": "sha512-0IFhKoEVrreHpKgcOoddV+oIaVXBFKXUzJVBI+nb0bxmcwYuZMdteBTp8AEDJacENtc9xbR0wa9RDCnYsCDLjA==", "dev": true, "requires": { - "workbox-background-sync": "^5.1.3", - "workbox-core": "^5.1.3", - "workbox-routing": "^5.1.3", - "workbox-strategies": "^5.1.3" + "workbox-background-sync": "^5.1.4", + "workbox-core": "^5.1.4", + "workbox-routing": "^5.1.4", + "workbox-strategies": "^5.1.4" } }, "workbox-navigation-preload": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-5.1.3.tgz", - "integrity": "sha512-29SPQMAccOgbq3BT9Gz7k+ydy0mcKKR0Rmkmd46tnujutiL4ooE57fBhwsA+c6OlLcYdisvilKlV2YWEtKWfgQ==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-5.1.4.tgz", + "integrity": "sha512-Wf03osvK0wTflAfKXba//QmWC5BIaIZARU03JIhAEO2wSB2BDROWI8Q/zmianf54kdV7e1eLaIEZhth4K4MyfQ==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-precaching": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-5.1.3.tgz", - "integrity": "sha512-9jjBiB00AOI0NnI320ddnhvlL3bjMrDoI3211kEaxcRWh0N2fX25uVn0O8N8u1gWY4tIfwZAn/DgtAU13cFhYA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-5.1.4.tgz", + "integrity": "sha512-gCIFrBXmVQLFwvAzuGLCmkUYGVhBb7D1k/IL7pUJUO5xacjLcFUaLnnsoVepBGAiKw34HU1y/YuqvTKim9qAZA==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-range-requests": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-5.1.3.tgz", - "integrity": "sha512-uUvEoyEUx86LJc7mtmy/6U8xuK0guXU2FnPimt17zDbsC8FSOaPxc92rxtD6xmDSYrI4FqIebypBCjgIe+sfxA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-5.1.4.tgz", + "integrity": "sha512-1HSujLjgTeoxHrMR2muDW2dKdxqCGMc1KbeyGcmjZZAizJTFwu7CWLDmLv6O1ceWYrhfuLFJO+umYMddk2XMhw==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-routing": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-5.1.3.tgz", - "integrity": "sha512-F+sAp9Iy3lVl3BEG+pzXWVq4AftzjiFpHDaZ4Kf4vLoBoKQE0hIHet4zE5DpHqYdyw+Udhp4wrfHamX6PN6z1Q==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-5.1.4.tgz", + "integrity": "sha512-8ljknRfqE1vEQtnMtzfksL+UXO822jJlHTIR7+BtJuxQ17+WPZfsHqvk1ynR/v0EHik4x2+826Hkwpgh4GKDCw==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "workbox-strategies": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-5.1.3.tgz", - "integrity": "sha512-wiXHfmOKnWABeIVW+/ye0e00+2CcS5y7SIj2f9zcdy2ZLEbcOf7B+yOl5OrWpBGlTUwRjIYhV++ZqiKm3Dc+8w==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-5.1.4.tgz", + "integrity": "sha512-VVS57LpaJTdjW3RgZvPwX0NlhNmscR7OQ9bP+N/34cYMDzXLyA6kqWffP6QKXSkca1OFo/v6v7hW7zrrguo6EA==", "dev": true, "requires": { - "workbox-core": "^5.1.3", - "workbox-routing": "^5.1.3" + "workbox-core": "^5.1.4", + "workbox-routing": "^5.1.4" } }, "workbox-streams": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-5.1.3.tgz", - "integrity": "sha512-8kt70eBd1RXL0qenxEnch3Cd7VyW3O0CkeGBN4Bikt307nIV5Q0JciLA5o0CRteijawYOiTq0/px4GDBv1obgQ==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-5.1.4.tgz", + "integrity": "sha512-xU8yuF1hI/XcVhJUAfbQLa1guQUhdLMPQJkdT0kn6HP5CwiPOGiXnSFq80rAG4b1kJUChQQIGPrq439FQUNVrw==", "dev": true, "requires": { - "workbox-core": "^5.1.3", - "workbox-routing": "^5.1.3" + "workbox-core": "^5.1.4", + "workbox-routing": "^5.1.4" } }, "workbox-sw": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-5.1.3.tgz", - "integrity": "sha512-Syk6RhYr/8VdFwXrxo5IpVz8Og2xapHTWJhqsZRF+TbxSvlaJs8hrvVPd7edn5ZiiVdPhE9NTeOTOg1+D+FGoA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-5.1.4.tgz", + "integrity": "sha512-9xKnKw95aXwSNc8kk8gki4HU0g0W6KXu+xks7wFuC7h0sembFnTrKtckqZxbSod41TDaGh+gWUA5IRXrL0ECRA==", "dev": true }, "workbox-webpack-plugin": { @@ -21382,12 +21389,12 @@ } }, "workbox-window": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-5.1.3.tgz", - "integrity": "sha512-oYvfVtPLET7FUrhOzbk0R+aATVmpdQBkmDqwyFH4W2dfVqJXTvTXzuGP5Pn9oZ8jMTB3AYW43yhYBlLYM3mYyg==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-5.1.4.tgz", + "integrity": "sha512-vXQtgTeMCUq/4pBWMfQX8Ee7N2wVC4Q7XYFqLnfbXJ2hqew/cU1uMTD2KqGEgEpE4/30luxIxgE+LkIa8glBYw==", "dev": true, "requires": { - "workbox-core": "^5.1.3" + "workbox-core": "^5.1.4" } }, "worker-farm": { diff --git a/package.json b/package.json index 8bbc4a7d..36388020 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,13 @@ "@testing-library/react": "^11.0.2", "chalk": "^4.1.0", "codegen.macro": "^4.0.0", - "react": "0.0.0-experimental-4c8c98ab9", - "react-dom": "0.0.0-experimental-4c8c98ab9", + "react": "0.0.0-experimental-94c0244ba", + "react-dom": "0.0.0-experimental-94c0244ba", "react-error-boundary": "^2.3.1", "react-icons": "^3.11.0" }, "devDependencies": { - "husky": "^4.2.5", + "husky": "^4.3.0", "npm-run-all": "^4.1.5", "prettier": "^2.1.1", "react-scripts": "^4.0.0-next.77", diff --git a/src/examples/fetch-approaches/render-as-you-fetch.js b/src/examples/fetch-approaches/render-as-you-fetch.js index 40a07d2e..8f272f34 100644 --- a/src/examples/fetch-approaches/render-as-you-fetch.js +++ b/src/examples/fetch-approaches/render-as-you-fetch.js @@ -15,12 +15,6 @@ const PokemonInfo = React.lazy(() => window.useRealAPI = true -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -35,7 +29,7 @@ function getPokemonResource(name) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/exercise/03.js b/src/exercise/03.js index 8c01229b..fc3f2996 100644 --- a/src/exercise/03.js +++ b/src/exercise/03.js @@ -23,10 +23,6 @@ function PokemonInfo({pokemonResource}) { ) } -// 🐨 create a SUSPENSE_CONFIG variable right here and configure timeoutMs to -// whatever feels right to you, then try it out and tweek it until you're happy -// with the experience. - function createPokemonResource(pokemonName) { // 🦉 once you've finished the exercise, play around with the delay... // the second parameter to fetchPokemon is a delay so you can play around diff --git a/src/exercise/03.md b/src/exercise/03.md index d6462a49..770c8c65 100644 --- a/src/exercise/03.md +++ b/src/exercise/03.md @@ -14,10 +14,8 @@ be cool to make that go away 😉 The API for this is a hook called `useTransition`. Here's what that looks like: ```javascript -const SUSPENSE_CONFIG = {timeoutMs: 4000} - function Component() { - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() // etc... function handleClick() { @@ -48,14 +46,6 @@ transparent if `isPending` is true. This is a good one to play around with setting the `delay` argument to `fetchPokemon` a bit. -**BREAKING CHANGE ALERT:** The version of React in this project works like it -does in the recorded videos. However in the latest experimental builds of React, -the `SUSPENSE_CONFIG` option to `useTransition` has been completely removed. -Read more about this here: https://github.com/facebook/react/pull/19703 - -Here's your reminder that you're learning about experimental software which can -change at any moment without notice 😅 - ## Extra Credit ### 1. 💯 use css transitions @@ -72,30 +62,6 @@ Instead of using inline styles, dynamically apply the class name `pokemon-loading` if `isPending` is true to take advantage of this. The styles are in `src/styles.css` if you want to take a look. -### 2. 💯 avoid flash of loading content - -[Production deploy](https://react-suspense.netlify.app/isolated/final/03.extra-2.js) - -**EXPERIMENTAL AND AWKWARD API AHEAD** - -Our previous improvement is great. We're not showing the loading state for 300ms -so we're pretty good. But what if the request takes 350ms? Then we're right back -where we started! The user will see a flash of loading state for 50ms. - -What we really need is a way to say: "Hey React, if this transition takes 300ms, -then I want you to keep the transition state around for at least 500ms total no -matter what." - -Now, this API is a little strange, it's not documented (so it's pretty likely to -change). In my testing of it, it was kind of inconsistent, so I think it may be -buggy. But to make this happen, you can add the following properties to your -`SUSPENSE_CONFIG`: - -- `busyDelayMs`: Set this to the time of our CSS transition. This is the part - that says "if the transition takes X amount of time" -- `busyMinDurationMs`: Set this to the total time you want the transition state - to persist if we surpass the `busyDelayMs` time. - ## 🦉 Elaboration and Feedback
diff --git a/src/exercise/04.js b/src/exercise/04.js index 1db1b4b4..d3d9ab7f 100644 --- a/src/exercise/04.js +++ b/src/exercise/04.js @@ -23,12 +23,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - // 🐨 create a pokemonResourceCache object // 🐨 create a getPokemonResource function which accepts a name checks the cache @@ -42,7 +36,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/exercise/05.js b/src/exercise/05.js index 54468761..3f757b2f 100644 --- a/src/exercise/05.js +++ b/src/exercise/05.js @@ -42,12 +42,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -66,7 +60,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/exercise/06.js b/src/exercise/06.js index 53189f8f..7971edb9 100644 --- a/src/exercise/06.js +++ b/src/exercise/06.js @@ -24,12 +24,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -51,7 +45,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') // 🐨 move these two lines to a custom hook called usePokemonResource - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) // 🐨 call usePokemonResource with the pokemonName. // It should return both the pokemonResource and isPending diff --git a/src/exercise/07.js b/src/exercise/07.js index 9a35f164..31f0ec99 100644 --- a/src/exercise/07.js +++ b/src/exercise/07.js @@ -32,10 +32,9 @@ const fallback = (
) -const SUSPENSE_CONFIG = {timeoutMs: 4000} function App() { - const [startTransition] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) function handleSubmit(pokemonName) { diff --git a/src/final/03.extra-1.js b/src/final/03.extra-1.js index ba58b78f..6a50f53e 100644 --- a/src/final/03.extra-1.js +++ b/src/final/03.extra-1.js @@ -24,15 +24,13 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = {timeoutMs: 4000} - function createPokemonResource(pokemonName) { return createResource(fetchPokemon(pokemonName)) } function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/03.extra-2.js b/src/final/03.extra-2.js deleted file mode 100644 index 81d738ab..00000000 --- a/src/final/03.extra-2.js +++ /dev/null @@ -1,84 +0,0 @@ -// useTransition for improved loading states -// 💯 avoid flash of loading content -// http://localhost:3000/isolated/final/03.extra-2.js - -import React from 'react' -import { - fetchPokemon, - PokemonInfoFallback, - PokemonForm, - PokemonDataView, - PokemonErrorBoundary, -} from '../pokemon' -import {createResource} from '../utils' - -function PokemonInfo({pokemonResource}) { - const pokemon = pokemonResource.read() - return ( -
-
- {pokemon.name} -
- -
- ) -} - -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - -function createPokemonResource(pokemonName) { - return createResource(fetchPokemon(pokemonName)) -} - -function App() { - const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) - const [pokemonResource, setPokemonResource] = React.useState(null) - - React.useEffect(() => { - if (!pokemonName) { - setPokemonResource(null) - return - } - startTransition(() => { - setPokemonResource(createPokemonResource(pokemonName)) - }) - }, [pokemonName, startTransition]) - - function handleSubmit(newPokemonName) { - setPokemonName(newPokemonName) - } - - function handleReset() { - setPokemonName('') - } - - return ( -
- -
-
- {pokemonResource ? ( - - } - > - - - - ) : ( - 'Submit a pokemon' - )} -
-
- ) -} - -export default App diff --git a/src/final/03.js b/src/final/03.js index 89b6df42..93828d0b 100644 --- a/src/final/03.js +++ b/src/final/03.js @@ -23,15 +23,13 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = {timeoutMs: 4000} - function createPokemonResource(pokemonName) { return createResource(fetchPokemon(pokemonName)) } function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/04.extra-1.js b/src/final/04.extra-1.js index 8e170b43..0376b570 100644 --- a/src/final/04.extra-1.js +++ b/src/final/04.extra-1.js @@ -24,12 +24,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} const PokemonResourceCacheContext = React.createContext(getPokemonResource) @@ -53,7 +47,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) const getPokemonResource = usePokemonResourceCache() diff --git a/src/final/04.extra-2.js b/src/final/04.extra-2.js index 0e8608dc..bd9c7e6e 100644 --- a/src/final/04.extra-2.js +++ b/src/final/04.extra-2.js @@ -24,12 +24,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const PokemonResourceCacheContext = React.createContext() function PokemonCacheProvider({children}) { @@ -68,7 +62,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) const getPokemonResource = usePokemonResourceCache() diff --git a/src/final/04.extra-3.js b/src/final/04.extra-3.js index fb17252b..d0fe8076 100644 --- a/src/final/04.extra-3.js +++ b/src/final/04.extra-3.js @@ -24,12 +24,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const PokemonResourceCacheContext = React.createContext() function PokemonCacheProvider({children, cacheTime}) { @@ -85,7 +79,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) const getPokemonResource = usePokemonResourceCache() diff --git a/src/final/04.js b/src/final/04.js index 7c208fb4..ddfbe5aa 100644 --- a/src/final/04.js +++ b/src/final/04.js @@ -23,12 +23,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -47,7 +41,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/05.extra-1.js b/src/final/05.extra-1.js index c999637e..41926eeb 100644 --- a/src/final/05.extra-1.js +++ b/src/final/05.extra-1.js @@ -39,12 +39,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -65,7 +59,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/05.extra-2.js b/src/final/05.extra-2.js index 710052f6..e0b450fe 100644 --- a/src/final/05.extra-2.js +++ b/src/final/05.extra-2.js @@ -30,12 +30,6 @@ function preloadImage(src) { }) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -56,7 +50,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/05.js b/src/final/05.js index 1f8e4882..c39b45f6 100644 --- a/src/final/05.js +++ b/src/final/05.js @@ -48,12 +48,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -72,7 +66,7 @@ function createPokemonResource(pokemonName) { function App() { const [pokemonName, setPokemonName] = React.useState('') - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) React.useEffect(() => { diff --git a/src/final/06.js b/src/final/06.js index aeb2cc2a..684f3fa5 100644 --- a/src/final/06.js +++ b/src/final/06.js @@ -24,12 +24,6 @@ function PokemonInfo({pokemonResource}) { ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const pokemonResourceCache = {} function getPokemonResource(name) { @@ -50,7 +44,7 @@ function createPokemonResource(pokemonName) { function usePokemonResource(pokemonName) { const [pokemonResource, setPokemonResource] = React.useState(null) - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() React.useEffect(() => { if (!pokemonName) { diff --git a/src/final/07.js b/src/final/07.js index f2c0380e..047f549e 100644 --- a/src/final/07.js +++ b/src/final/07.js @@ -30,10 +30,8 @@ const fallback = ( ) -const SUSPENSE_CONFIG = {timeoutMs: 4000} - function App() { - const [startTransition] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition] = React.useTransition() const [pokemonResource, setPokemonResource] = React.useState(null) function handleSubmit(pokemonName) { diff --git a/src/pokemon.js b/src/pokemon.js index 87197c7b..372252bc 100644 --- a/src/pokemon.js +++ b/src/pokemon.js @@ -240,12 +240,6 @@ function PokemonForm({ ) } -const SUSPENSE_CONFIG = { - timeoutMs: 4000, - busyDelayMs: 300, - busyMinDurationMs: 700, -} - const PokemonResourceCacheContext = React.createContext({}) function usePokemonResourceCache() { @@ -272,7 +266,7 @@ function createPokemonResource(pokemonName) { function usePokemonResource(pokemonName) { const [pokemonResource, setPokemonResource] = React.useState(null) - const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG) + const [startTransition, isPending] = React.useTransition() const getPokemonResource = usePokemonResourceCache() React.useEffect(() => {