מדריך ריאקט – react hooks | useMemo & useCallback

import React, { ReactElement, useContext, useState,useMemo } from 'react';
import logo from './logo.svg';
import './App.css';
import ButtonClicked from './buttonClicked';
import { Context } from './context';
import AddMoreCrocs from './addMoreCrocs';


function lazyCrocs(nubmerOfCrocs: number) : number{
  for(let i = 0 ; i < 100000; i++) {}
  console.log('crocs are lazy');
  return nubmerOfCrocs*3
}
function App(props: any): ReactElement<any> {
  
  const {startTheGame} = useContext(Context);
  const [number, setNumber] = useState(Math.random()*10);
  const nubmerOfCrocs = useMemo(() => lazyCrocs(number), [number]);
  const [gameStatus, setGame] = useState(false);
  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ButtonClicked />
          <button onClick={()=>{startTheGame(gameStatus);setGame(!gameStatus)}}>Start the Game</button>
        </header>
        <div>{nubmerOfCrocs}</div>
        <div className="addMoreCrocs">
          <AddMoreCrocs />
        </div>
      </div>
  );
}

export default App;

import React, { ReactElement, useContext, useState,useCallback } from 'react';
import logo from './logo.svg';
import './App.css';
import ButtonClicked from './buttonClicked';
import { Context } from './context';
import AddMoreCrocs from './addMoreCrocs';


function lazyCrocs(nubmerOfCrocs: number) : number{
  for(let i = 0 ; i < 100000; i++) {}
  console.log('crocs are lazy');
  return nubmerOfCrocs*3
}
function App(props: any): ReactElement<any> {
  
  const {startTheGame} = useContext(Context);
  const [number, setNumber] = useState(Math.random()*10);
  const nubmerOfCrocs = useCallback(() => lazyCrocs(number),[number]);
  const [gameStatus, setGame] = useState(false);
  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ButtonClicked nubmerOfCrocs={nubmerOfCrocs} />
          <button onClick={()=>{startTheGame(gameStatus);setGame(!gameStatus)}}>Start the Game</button>
        </header>
        <div className="addMoreCrocs">
          <AddMoreCrocs />
        </div>
      </div>
  );
}

export default App;