1. useMemo

useMemo is react hook for performance optimization by memorizing the result of expensive computation.


2.Sample Code

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { useState, useEffect, useRef, useMemo} from 'react';
import Timer from './component/Timer';
import Page from './component/Page.jsx'
import {ThemeContext} from './context/ThemeContext'


function ExpensiveComponent({value}){
useEffect(() => {
console.log('rendering')
})
return <span>{value+1000}</span>
}

function App() {
const [value, setValue] = useState(10)
const [, triggerRendering] = useState(false)

//do memoization component based on props
const MemoizedComponent = useMemo(
() => <ExpensiveComponent value={value}/>,
[value]
)

function handleChange(e) {
setValue(Number(e.target.value))
}

function handleClick() {
triggerRendering((prev) => !prev)
}

return (
<>
<input value={value} onChange={handleChange}/>
<button onClick={handleClick}>렌더링 발생!</button>
{MemoizedComponent}
</>
)



}

export default App;

MemoziedComponent does not re-render unless value is change.