├── 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
React.memo Example
;
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 |
30 | Cart having {value} {field}
31 |
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 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
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 |
82 |
83 |
84 | );
85 | }
86 |
87 | export default App;
88 | ```
89 |
90 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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(, 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 |
7 |
8 |
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 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
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 |
7 | Cart having {value} {field}
8 |
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 React.memo Example
;
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 | }
--------------------------------------------------------------------------------