Code for 6-loading

Author: tylermcginnis

app/components/Loading.js

@@ -12,35 +12,29 @@ const styles = {
   }
 }
 
-export default class Loading extends React.Component {
-  state = { content: this.props.text }
-  componentDidMount () {
-    const { speed, text } = this.props
+export default function Loading ({ text = 'Loading', speed = 300 }) {
+  const [content, setContent] = React.useState(text)
 
-    this.interval = window.setInterval(() => {
-      this.state.content === text + '...'
-        ? this.setState({ content: text })
-        : this.setState(({ content }) => ({ content: content + '.' }))
+  React.useEffect(() => {
+    const id = window.setInterval(() => {
+      setContent((content) => {
+        return content === `${text}...`
+          ? text
+          : `${content}.`
+      })
     }, speed)
-  }
-  componentWillUnmount () {
-    window.clearInterval(this.interval)
-  }
-  render() {
-    return (
-      <p style={styles.content}>
-        {this.state.content}
-      </p>
-    )
-  }
-}
 
-Loading.propTypes = {
-  text: PropTypes.string.isRequired,
-  speed: PropTypes.number.isRequired,
+    return () => window.clearInterval(id)
+  }, [text, speed])
+
+  return (
+    <p style={styles.content}>
+      {content}
+    </p>
+  )
 }
 
-Loading.defaultProps = {
-  text: 'Loading',
-  speed: 300
+Loading.propTypes = {
+  text: PropTypes.string,
+  speed: PropTypes.number,
 }