MENU


Difference with useCallback()

Unlike the return value of a call to a callback passed to useCallback, the return value of the callback passed to useMemo is memoized.
RESETRUNFULL
<!DOCTYPE html><html><head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head><body>
    <div></div>
    <script type="text/babel">
      function Example(){
        const [a,setA] = React.useState(0);
        const m = React.useMemo(() => Math.random(),[]);
        const n = React.useCallback(() => Math.random(),[]);
        setTimeout(()=>{setA(a=>a+1);},1000);
        return (<React.Fragment>
          <button>{m} (static)</button>
          <button>{n()} (changing)</button>
        </React.Fragment>);}
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<Example/>);
    </script>
  </body></html>