diff --git a/docs/en/AfterTimeout.md b/docs/en/AfterTimeout.md index 8f28aff5..71f34acf 100644 --- a/docs/en/AfterTimeout.md +++ b/docs/en/AfterTimeout.md @@ -1,6 +1,6 @@ # `` -Renders its children only after a specified timeout. Useful to +Renders its children only after a specified timeout. Useful for improving perceived performance by not blocking the main event loop. diff --git a/package.json b/package.json index 9cce9433..dd110d54 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,8 @@ "throttle-debounce": "^2.0.1" }, "peerDependencies": { - "react": "^16.4.0", - "react-dom": "^16.4.0", - "prop-types": "^15.6.1", + "react": "^17", + "react-dom": "^17", "tslib": "*" }, "devDependencies": { @@ -71,11 +70,10 @@ "jest": "^23.6.0", "mkdirp": "0.5.1", "mocha": "5.0.0", - "prop-types": "^15.6.0", - "react-dom": "^16.2.0", + "react-dom": "^17", "react-markdown": "3.1.4", - "react-test-renderer": "16.2.0", - "react": "^16.2.0", + "react-test-renderer": "17", + "react": "^17", "rimraf": "2.6.2", "semantic-release": "^15.5.0", "to-string-loader": "1.1.5", diff --git a/src/AfterTimeout/index.ts b/src/AfterTimeout/index.ts index d376933b..ccb91e9c 100644 --- a/src/AfterTimeout/index.ts +++ b/src/AfterTimeout/index.ts @@ -1,37 +1,21 @@ -import {Component} from 'react'; +import * as React from 'react'; export interface IAfterTimeoutProps { ms?: number; } -export interface IAfterTimeoutState { - ready: boolean; -} - -export class AfterTimeout extends Component { - static defaultProps = { - ms: 200 - }; - - state: IAfterTimeoutState = { - ready: false - }; +export const AfterTimeout: React.FC = ({ms = 200, children}) => { + const [ready, setReady] = React.useState(false); - timer; + React.useEffect(() => { + const timer = setTimeout(() => { + setReady(true); + }, ms); - componentDidMount () { - this.timer = setTimeout(() => { - this.setState({ - ready: true - }); - }, this.props.ms); - } + return () => { + clearTimeout(timer); + }; + }, [ms]); - componentWillUnmount () { - clearTimeout(this.timer); - } - - render () { - return this.state.ready ? this.props.children : null; - } -} + return ready ? children : null; +}; diff --git a/yarn.lock b/yarn.lock index 16f6d964..7775994f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3875,7 +3875,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.12, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -8675,14 +8675,14 @@ react-docgen@^3.0.0-beta11: node-dir "^0.1.10" recast "^0.15.0" -react-dom@^16.2.0: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7" +react-dom@^17: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - schedule "^0.5.0" + scheduler "^0.20.2" react-error-overlay@^4.0.1: version "4.0.1" @@ -8728,10 +8728,20 @@ react-inspector@^2.2.2: babel-runtime "^6.26.0" is-dom "^1.0.9" +"react-is@^16.12.0 || ^17.0.0 || ^18.0.0": + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" + integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== + react-is@^16.4.2, react-is@^16.5.2: version "16.5.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3" +react-is@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -8755,6 +8765,14 @@ react-modal@^3.3.2: react-lifecycles-compat "^3.0.0" warning "^3.0.0" +react-shallow-renderer@^16.13.1: + version "16.15.0" + resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" + integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== + dependencies: + object-assign "^4.1.1" + react-is "^16.12.0 || ^17.0.0 || ^18.0.0" + react-side-effect@^1.1.3: version "1.1.5" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" @@ -8777,13 +8795,15 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" -react-test-renderer@16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" +react-test-renderer@17: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c" + integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ== dependencies: - fbjs "^0.8.16" object-assign "^4.1.1" - prop-types "^15.6.0" + react-is "^17.0.2" + react-shallow-renderer "^16.13.1" + scheduler "^0.20.2" react-test-renderer@^16.0.0-0: version "16.5.2" @@ -8818,14 +8838,13 @@ react-universal-interface@^0.3.1: version "0.3.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.3.2.tgz#bf80f962ce976c6aba67ab3baaf26be447c26e80" -react@^16.2.0: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42" +react@^17: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - schedule "^0.5.0" read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1: version "1.0.1" @@ -9489,6 +9508,14 @@ schedule@^0.5.0: dependencies: object-assign "^4.1.1" +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"