├── README.md
├── index.html
├── index.tsx
├── package.json
├── src
    ├── app.tsx
    └── components
    │   ├── Cart.tsx
    │   ├── CartSummary.tsx
    │   └── Heading.tsx
└── style.scss


/README.md:
--------------------------------------------------------------------------------
 1 | # react-ts-memo
 2 | 
 3 | React.memo is a higher order component which prevents functional component being rerendered if its' props or state do not changed
 4 | 
 5 | Heading.tsx
 6 | 
 7 | ```js
 8 | import React from 'react';
 9 | 
10 | function Heading() {
11 |   console.log('Rendering Heading');
12 |   return <h2>React.memo Example</h2>;
13 | }
14 | 
15 | export default React.memo(Heading);
16 | 
17 | //without React.memo
18 | //export default Heading;
19 | ```
20 | 
21 | CartSummary.tsx
22 | 
23 | ```js
24 | import React from 'react';
25 | 
26 | function CartSummary({ field, value }) {
27 |   console.log(`Rendering ${field}`);
28 |   return (
29 |     <div>
30 |       Cart having {value} {field}
31 |     </div>
32 |   );
33 | }
34 | 
35 | export default React.memo(CartSummary);
36 | 
37 | //without React.memo
38 | //export default CartSummary;
39 | ```
40 | 
41 | Cart.tsx
42 | 
43 | ```js
44 | import React, { useState } from 'react';
45 | import CartSummary from './CartSummary';
46 | import Heading from './Heading';
47 | 
48 | export function Cart() {
49 |   const [item, setItem] = useState(1);
50 |   const [price, setPrice] = useState(100);
51 | 
52 |   const addItem = () => {
53 |     setItem(item + 1);
54 |   };
55 | 
56 |   const addPrice = () => {
57 |     setPrice(price + 100);
58 |   };
59 | 
60 |   return (
61 |     <div>
62 |       <Heading />
63 |       <CartSummary field="Item" value={item} />
64 |       <button onClick={addItem}>Add More Item</button>
65 |       <hr />
66 |       <CartSummary field="Price" value={price} />
67 |       <button onClick={addPrice}>Add More Price</button>
68 |     </div>
69 |   );
70 | }
71 | ```
72 | 
73 | app.tsx
74 | 
75 | ```js
76 | import React from 'react';
77 | import { Cart } from './components/Cart';
78 | 
79 | function App() {
80 |   return (
81 |     <div>
82 |       <Cart />
83 |     </div>
84 |   );
85 | }
86 | 
87 | export default App;
88 | ```
89 | 
90 | 


--------------------------------------------------------------------------------
/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 from 'react';
 2 | import { Cart } from './components/Cart';
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <div>
 7 |       <Cart />
 8 |     </div>
 9 |   );
10 | }
11 | 
12 | export default App;
13 | 


--------------------------------------------------------------------------------
/src/components/Cart.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import CartSummary from './CartSummary';
 3 | import Heading from './Heading';
 4 | 
 5 | export function Cart() {
 6 |   const [item, setItem] = useState(1);
 7 |   const [price, setPrice] = useState(100);
 8 | 
 9 |   const addItem = () => {
10 |     setItem(item + 1);
11 |   };
12 | 
13 |   const addPrice = () => {
14 |     setPrice(price + 100);
15 |   };
16 | 
17 |   return (
18 |     <div>
19 |       <Heading />
20 |       <CartSummary field="Item" value={item} />
21 |       <button onClick={addItem}>Add More Item</button>
22 |       <hr />
23 |       <CartSummary field="Price" value={price} />
24 |       <button onClick={addPrice}>Add More Price</button>
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/CartSummary.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function CartSummary({ field, value }) {
 4 |   console.log(`Rendering ${field}`);
 5 |   return (
 6 |     <div>
 7 |       Cart having {value} {field}
 8 |     </div>
 9 |   );
10 | }
11 | 
12 | export default React.memo(CartSummary);
13 | 
14 | //without React.memo
15 | //export default CartSummary;
16 | 


--------------------------------------------------------------------------------
/src/components/Heading.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Heading() {
 4 |   console.log('Rendering Heading');
 5 |   return <h2>React.memo Example</h2>;
 6 | }
 7 | 
 8 | export default React.memo(Heading);
 9 | 
10 | //without React.memo
11 | //export default Heading;
12 | 


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


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