MENU


Running on Every Render

The function passed to useMemo runs during rendering.
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);
        let i=0;
        React.useEffect(() => { console.log(2); return 0; });
        const m = React.useMemo(() => { console.log(0); return 0; },[])
        ;
        const n = React.useMemo(() => { console.log(1); return 0; });
        React.useEffect(() => { console.log(3); return 0; } ,[]);
        return (<button onClick={()=>setA(a+1)}>{a}</button>);}
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<Example/>);
    </script>
  </body></html>