├── index.html
├── style.scss
├── index.tsx
├── package.json
├── src
    └── app.tsx
└── README.md


/index.html:
--------------------------------------------------------------------------------
1 | <div id="root"></div>


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
1 | h1, p {
2 |   font-family: Lato;
3 | }


--------------------------------------------------------------------------------
/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import './style.scss';
4 | import App from './src/app';
5 | 
6 | render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-ts",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@popperjs/core": "^2.9.2",
 7 |     "@types/react": "^17.0.14",
 8 |     "@types/react-dom": "^17.0.9",
 9 |     "bootstrap": "^5.0.2",
10 |     "node-sass": "^6.0.1",
11 |     "react": "^17.0.2",
12 |     "react-bootstrap": "^1.6.1",
13 |     "react-dom": "^17.0.2"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts-ts start",
17 |     "build": "react-scripts-ts build",
18 |     "test": "react-scripts-ts test --env=jsdom",
19 |     "eject": "react-scripts-ts eject"
20 |   },
21 |   "devDependencies": {
22 |     "react-scripts-ts": "latest"
23 |   }
24 | }


--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | 
 3 | function App() {
 4 |   const [count, setCount] = useState(0);
 5 |   const [revcount, setRevcount] = useState(0);
 6 | 
 7 |   useEffect(() => {
 8 |     console.log('Everytime called.');
 9 |   });
10 | 
11 |   useEffect(() => {
12 |     console.log('Onetime called i.e on mount');
13 |   }, []);
14 | 
15 |   useEffect(() => {
16 |     console.log('called on mount and when count gets updated');
17 |   }, [count]);
18 | 
19 |   useEffect(() => {
20 |     console.log('called on mount and when revcount gets updated');
21 |   }, [revcount]);
22 | 
23 |   useEffect(() => {
24 |     console.log('called on mount and when count/revcount gets updated');
25 |   }, [count, revcount]);
26 | 
27 |   function increase() {
28 |     setCount(count + 1);
29 |   }
30 | 
31 |   function decrease() {
32 |     setRevcount(revcount - 1);
33 |   }
34 | 
35 |   return (
36 |     <div>
37 |       count: {count} <button onClick={increase}>+</button>
38 |       <br />
39 |       reverse count: {revcount} <button onClick={decrease}>-</button>
40 |     </div>
41 |   );
42 | }
43 | 
44 | export default App;
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-ts-useeffect
 2 | 
 3 | app.tsx
 4 | 
 5 | ```js
 6 | import React, { useEffect, useState } from 'react';
 7 | 
 8 | function App() {
 9 |   const [count, setCount] = useState(0);
10 |   const [revcount, setRevcount] = useState(0);
11 | 
12 |   useEffect(() => {
13 |     console.log('Everytime called.');
14 |   });
15 | 
16 |   useEffect(() => {
17 |     console.log('Onetime called i.e on mount');
18 |   }, []);
19 | 
20 |   useEffect(() => {
21 |     console.log('called on mount and when count gets updated');
22 |   }, [count]);
23 | 
24 |   useEffect(() => {
25 |     console.log('called on mount and when revcount gets updated');
26 |   }, [revcount]);
27 | 
28 |   useEffect(() => {
29 |     console.log('called on mount and when count/revcount gets updated');
30 |   }, [count, revcount]);
31 | 
32 |   function increase() {
33 |     setCount(count + 1);
34 |   }
35 | 
36 |   function decrease() {
37 |     setRevcount(revcount - 1);
38 |   }
39 | 
40 |   return (
41 |     <div>
42 |       count: {count} <button onClick={increase}>+</button>
43 |       <br />
44 |       reverse count: {revcount} <button onClick={decrease}>-</button>
45 |     </div>
46 |   );
47 | }
48 | 
49 | export default App;
50 | ```
51 | 


--------------------------------------------------------------------------------