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


/README.md:
--------------------------------------------------------------------------------
 1 | # react-ts-usememo
 2 | 
 3 | app.tsx
 4 | 
 5 | ```js
 6 | import React, { useEffect, useState } from 'react';
 7 | 
 8 | function App() {
 9 |   const [heavyJob, setheavyJob] = React.useState(0);
10 |   const [lightJob, setlightJob] = React.useState(0);
11 | 
12 |   const heavyJobFunc = () => {
13 |     setheavyJob(heavyJob + 1);
14 |   };
15 | 
16 |   const lightJobFunc = () => {
17 |     setlightJob(lightJob + 1);
18 |   };
19 | 
20 |   //With useMemo
21 |   const isHeavy = React.useMemo(() => {
22 |     let i = 0;
23 |     while (i < 2000000000) i++;
24 |     var values = ['heavy', 'heavier', 'heaviest'];
25 |     return values[Math.floor(Math.random() * values.length)];
26 |   }, [heavyJob]);
27 | 
28 |   //Without useMemo LightJobFunc is also taking time
29 |   // const isHeavy = () => {
30 |   //   console.log(heavyJob);
31 |   //   let i = 0;
32 |   //   while (i < 2000000000) i++;
33 |   //   return heavyJob % 2 == 0;
34 |   // };
35 | 
36 |   return (
37 |     <>
38 |       <button onClick={heavyJobFunc}>Do Heavy Job {heavyJob} </button>
39 |       {isHeavy}
40 |       {/* Without useMemo
41 |       {isHeavy() ? 'Heavy' : 'Havier'} */}
42 |       <br />
43 |       <br />
44 |       <button onClick={lightJobFunc}>Do Light Job {lightJob} </button>
45 |     </>
46 |   );
47 | }
48 | 
49 | export default App;
50 | ```
51 | 
52 | 


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


--------------------------------------------------------------------------------
/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 [heavyJob, setheavyJob] = React.useState(0);
 5 |   const [lightJob, setlightJob] = React.useState(0);
 6 | 
 7 |   const heavyJobFunc = () => {
 8 |     setheavyJob(heavyJob + 1);
 9 |   };
10 | 
11 |   const lightJobFunc = () => {
12 |     setlightJob(lightJob + 1);
13 |   };
14 | 
15 |   //With useMemo
16 |   const isHeavy = React.useMemo(() => {
17 |     let i = 0;
18 |     while (i < 2000000000) i++;
19 |     var values = ['heavy', 'heavier', 'heaviest'];
20 |     return values[Math.floor(Math.random() * values.length)];
21 |   }, [heavyJob]);
22 | 
23 |   //Without useMemo LightJobFunc is also taking time
24 |   // const isHeavy = () => {
25 |   //   console.log(heavyJob);
26 |   //   let i = 0;
27 |   //   while (i < 2000000000) i++;
28 |   //   return heavyJob % 2 == 0;
29 |   // };
30 | 
31 |   return (
32 |     <>
33 |       <button onClick={heavyJobFunc}>Do Heavy Job {heavyJob} </button>
34 |       {isHeavy}
35 |       {/* Without useMemo
36 |       {isHeavy() ? 'Heavy' : 'Havier'} */}
37 |       <br />
38 |       <br />
39 |       <button onClick={lightJobFunc}>Do Light Job {lightJob} </button>
40 |     </>
41 |   );
42 | }
43 | 
44 | export default App;
45 | 


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


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