locol23 · locol23 · Dec 31, 2019 · Dec 31, 2019
diff --git a/README.md b/README.md
@@ -14,9 +14,11 @@ Learn React with TypeScript
   - State(withStateHandlers)
     - [Base](https://github.com/locol23/learn-react-typescript/tree/master/packages/recompose-state-base)
 - React Hooks
-  - State(useState)
+  - Counter(useState, useEffect, useCallback)
     - [Base](https://github.com/locol23/learn-react-typescript/tree/master/packages/hooks-state-base)
     - [Goal](https://github.com/locol23/learn-react-typescript/tree/master/packages/hooks-state-goal)
+  - useEffect
+    - [Base](./packages/hooks-use-effect-base)
   - State(useReducer)
 - React + Redux
   - [Base](https://github.com/locol23/learn-react-typescript/tree/master/packages/redux-base)

diff --git a/packages/hooks-use-effect-base/.babelrc b/packages/hooks-use-effect-base/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["react", ["env", {"targets": {"chorme": 67} }]],
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+}
diff --git a/packages/hooks-use-effect-base/README.md b/packages/hooks-use-effect-base/README.md
@@ -0,0 +1,18 @@
+# hooks-use-effect-base
+
+[Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)
+
+## useEffect
+
+```tsx
+const App = () => {
+  const [title, setTitle] = useState('Initial Title')
+
+  useEffect(() => {
+    setTitle('Use Effect')
+  }, [])
+
+  return <h1>{title}</h1>
+}
+```
+
diff --git a/packages/hooks-use-effect-base/package-lock.json b/packages/hooks-use-effect-base/package-lock.json
diff --git a/packages/hooks-use-effect-base/package.json b/packages/hooks-use-effect-base/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "hooks-use-effect-base",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/locol23/learn-react-ts.git",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "parcel:dev": "parcel src/index.html",
+    "parcel:prod": "parcel build src/index.html",
+    "dev": "run-s clean parcel:dev",
+    "build": "run-s clean parcel:prod"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "babel-core": "^6.26.3",
+    "npm-run-all": "^4.1.5",
+    "parcel-bundler": "^1.12.4",
+    "rimraf": "^3.0.0"
+  }
+}
diff --git a/packages/hooks-use-effect-base/src/components/App.tsx b/packages/hooks-use-effect-base/src/components/App.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+
+export const App = () => {
+  const [title, setTitle] = useState('Initial Title')
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTitle('Use Effect')
+    }, 2000)
+  }, [])
+
+  const [text, setText] = useState('Initial Text')
+  const handler = () => setText('Text 1')
+  const handler2 = () => setText('Text 2')
+
+  useEffect(() => console.log(`current text is ${text}`), [text])
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <button onClick={handler}>click1</button>
+      <button onClick={handler2}>click2</button>
+    </>
+  )
+}
+
diff --git a/packages/hooks-use-effect-base/src/index.html b/packages/hooks-use-effect-base/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React Typescript Boilerplate</title>
+</head>
+<body>
+  <div id="app">Loading...</div>
+  <script src="index.tsx"></script>
+</body>
+</html>
diff --git a/packages/hooks-use-effect-base/src/index.tsx b/packages/hooks-use-effect-base/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './components/App'
+
+ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/packages/hooks-use-effect-base/tsconfig.json b/packages/hooks-use-effect-base/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ES2015",
+    "allowJs": false,
+    "jsx": "react",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": true,
+    "rootDir": "src",
+    "outDir": "./dist/"
+  },
+  "exclude": ["dist", "node_modules"]
+}