×

Html & Html5

The World's best Software Development Study Portal

useMemo

useMemo with Examples

UseMemo Hook holds the the memoized value So it will avoid calling the entire function on every render call.

useMemo()

App.js

import React, { useState} from 'react'; function App(){ const[number, setNumber] = useState(0) const[dark, setDark] = useState(false) const doubleNumber= slowFunction(number) const themeStyles = { backgroundColor: dark ? 'black' : 'white', color: dark ? 'white' : 'black' } return( <> <input type="number" value={number} onChange={e => setNumber(parseInt (e.target.value))}/> <button onClick={() => setDark(prevDark => !prevDark)}>Change Theme</button> <div style={themeStyles}>{doubleNumber}</div> </> ) } function slowFunction(num){ console.log('calling Slow Function') for (let i = 0; i <= 1000000000; i++) {} return num * 2 } export default App; ..................................................................

Example with UseMemo()

import React, { useState, useMemo, useEffect} from 'react' function App(){ const[number, setNumber] = useState(0); const[dark, setDark] = useState(false); const doubleNumber= useMemo(() => { return slowFunction(number) }, [number]) const themeStyles = useMemo(() =>{ return{ backgroundColor: dark ? 'black' : 'white', color: dark ? 'white' : 'black' } },[dark]) useEffect(() => { console.log('Theme Changed') }, [themeStyles]) return( <> <input type="number" value={number} onChange={e => setNumber(parseInt(e.target.value))}/> <button onClick={()=>setDark(prevDark => !prevDark)}>Change Theme</button> <div style={themeStyles}>{doubleNumber}</div> </> ) } function slowFunction(num){ console.log('calling Slow Function') for (let i = 0; i <= 1000000000; i++) {} return num * 2 } export default App; ...................................................................................