├── 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 | } --------------------------------------------------------------------------------