diff --git a/hooks/src/App.js b/hooks/src/App.js
index 50e4dd5..9d58f5c 100644
--- a/hooks/src/App.js
+++ b/hooks/src/App.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import './App.css';
-import ClassCounter from "./components/ClassCounter";
-import HookCounter from "./components/HookCounter";
+import './App.css'
+import IntervalClassCounter from "./components/IntervalClassCounter";
+import IntervalHookCounter from "./components/IntervalHookCounter";
 
 function App() {
-  return (
-    <div className="App">
-      {/*<ClassCounter/>*/}
-      <HookCounter/>
-    </div>
-  );
+ return (
+  <div className='App'>
+    <IntervalClassCounter/>
+    <IntervalHookCounter/>
+  </div>
+ )
 }
 
-export default App;
+export default App
\ No newline at end of file
diff --git a/hooks/src/components/ClassCounter.js b/hooks/src/components/ClassCounter.js
deleted file mode 100644
index a353fd9..0000000
--- a/hooks/src/components/ClassCounter.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Component } from 'react'
-
-class ClassCounter extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            count: 0
-        }
-    }
-
-    incrementCount = () => {
-        this.setState({
-            count: this.state.count + 1
-        })
-    }
-
-
-    render() {
-        return (
-            <div>
-                <button onClick={this.incrementCount}>Count {this.state.count}</button>
-            </div>
-        )
-    }
-}
-
-export default ClassCounter;
\ No newline at end of file
diff --git a/hooks/src/components/HookCounter.js b/hooks/src/components/HookCounter.js
deleted file mode 100644
index 2e36adb..0000000
--- a/hooks/src/components/HookCounter.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {useState} from 'react'
-
-function HookCounter() {
-
-   const [count, setCount]=  useState(0)
-      // #カウントで0にセットをし、setCounteにてカウントを開始する
-
-
-    return(
-  <div>
-   <button onClick={() =>setCount(count+2)}>Count {count}</button>
-  </div>
- )
-}
-
-export default HookCounter
\ No newline at end of file
diff --git a/hooks/src/components/IntervalClassCounter.js b/hooks/src/components/IntervalClassCounter.js
new file mode 100644
index 0000000..2605518
--- /dev/null
+++ b/hooks/src/components/IntervalClassCounter.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+class IntervalClassCounter extends Component {
+  constructor(props){
+   super(props)
+    this.state = {
+      count: 0
+    }
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick,1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  tick = () => {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  render() {
+      return <h1>{this.state.count}</h1>
+  }
+}
+
+export default IntervalClassCounter
\ No newline at end of file
diff --git a/hooks/src/components/IntervalHookCounter.js b/hooks/src/components/IntervalHookCounter.js
new file mode 100644
index 0000000..ff9f782
--- /dev/null
+++ b/hooks/src/components/IntervalHookCounter.js
@@ -0,0 +1,32 @@
+import React,{useState,useEffect} from 'react'
+
+ function IntervalHookCounter() {
+    const [count,setCount] =useState(0)
+
+    const tick = () => {
+        setCount(count + 1)
+    }
+
+
+    useEffect(() => {
+        function doSomething() {
+
+        }
+        doSomething()
+        const  interval = setInterval(tick,1000)
+        return() => {
+         clearInterval(interval)
+        }
+    },)
+
+   return(
+    <div>
+        {count}
+    </div>
+   )
+
+ }
+
+ export default IntervalHookCounter
+
+//カウンターの道理はまだ理解出来ていない(9/23現在)為、使うことがあったら再度戻っての復習を行う。
\ No newline at end of file