Introduction to React JS
useMemo with Examples
UseMemo Hook holds the the memoized value So it will avoid calling the entire function on every render call.
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; ...................................................................................