Some refactor

Author: lourenci

src/ClassComponent.js

@@ -1,21 +1,34 @@
 import React from 'react'
 
-export default class Counter extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { counter: 0 }
+export function withIncrement (Component) {
+  return class extends React.Component {
+    constructor (props) {
+      super(props)
+      this.state = { counter: 0 }
+      this.incrementCounter = this.incrementCounter.bind(this)
+    }
+
+    incrementCounter () {
+      this.setState(state => ({ counter: state.counter + 1 }))
+    }
+
+    render () {
+      return (
+        <Component counter={this.state.counter} increment={this.incrementCounter} />
+      )
+    }
   }
+}
 
+export default class Counter extends React.Component {
   componentDidMount () {
-    document.title = `Class ${this.state.counter}`
+    document.title = `Class ${this.props.counter}`
 
-    this.interval = setInterval(() => {
-      this.setState(state => ({ counter: state.counter + 1 }))
-    }, 2000)
+    this.interval = setInterval(this.props.increment, 2000)
   }
 
   componentDidUpdate () {
-    document.title = `Class ${this.state.counter}`
+    document.title = `Class ${this.props.counter}`
   }
 
   componentWillUnmount () {
@@ -26,8 +39,8 @@ export default class Counter extends React.Component {
     return (
       <div>
         <h2>Class component</h2>
-        <p>{this.state.counter}</p>
-        <button onClick={() => this.setState(state => ({ counter: state.counter + 1 }))}>Increment class component</button>
+        <p>{this.props.counter}</p>
+        <button onClick={this.props.increment}>Increment class component</button>
       </div>
     )
   }

src/FunctionalComponent.js

@@ -1,16 +1,13 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
+import { useIncremental } from './useIncremental'
+import { useTitle } from './useTitle'
 
-export default function (props) {
-  const [counter, setCounter] = useState(0)
+export default function () {
+  const [counter, incrementCounter] = useIncremental(0)
+  useTitle(`Functional ${counter}`)
 
   useEffect(() => {
-    document.title = `Functional ${counter}`
-  })
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCounter(counter => counter + 1)
-    }, 2500)
+    const interval = setInterval(incrementCounter, 2500)
 
     return () => clearInterval(interval)
   })
@@ -19,7 +16,7 @@ export default function (props) {
     <div>
       <h2>Functional component</h2>
       <p>{counter}</p>
-      <button onClick={() => setCounter(counter => counter + 1)}>Increment Functional</button>
+      <button onClick={incrementCounter}>Increment Functional</button>
     </div>
   )
 }

src/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ClassComponent from './ClassComponent'
+import ClassComponent, { withIncrement } from './ClassComponent'
 import FunctionalComponent from './FunctionalComponent'
 
+const IncrementalComponent = withIncrement(ClassComponent)
+
 function App () {
   return (
     <>
-      <ClassComponent />
+      <IncrementalComponent />
       <FunctionalComponent />
     </>
   )

src/useIncremental.js

@@ -0,0 +1,7 @@
+import { useState } from 'react'
+
+export function useIncremental (initialValue) {
+  const [counter, setCounter] = useState(initialValue)
+
+  return [counter, () => setCounter(counter => counter + 1)]
+}

src/useTitle.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react'
+
+export function useTitle (title) {
+  useEffect(() => {
+    document.title = title
+  }, [title])
+}