JIYIK CN >

Use Math.random()the function to generate a random number in React, for example Math.floor(Math.random() * (max - min + 1)) + min. Math.randomThe function returns a number in the range of 0 to less than 1, but can also be used to generate numbers in a specific range.

import {useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  function randomNumberInRange(min, max) {
    // 👇️ 获取 min（含）和 max（含）之间的数字
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  const handleClick = () => {
    setNum(randomNumberInRange(1, 5));
  };

  return (
    <div>
      <h2>number is: {num}</h2>
      <button onClick={handleClick}>Generate random number</button>
    </div>
  );
};

export default App;

The code snippet above uses the Math.random() function to generate numbers in the range 1 (inclusive) to 5 (inclusive).

If you do not need to generate numbers within a specific range, but just need a random number, you can use Math.random()the function directly.

console.log(Math.random()); // 👉️ 0.9349907593750104
console.log(Math.random()); // 👉️ 0.1028502928025743
console.log(Math.random()); // 👉️ 0.9268013352071363

If we need to generate a random number every N seconds and render in a component, use the useEffect hook to set the interval.

import {useEffect, useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  function randomNumberInRange(min, max) {
    // 👇️ 获取 min（含）和 max（含）之间的数字
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  useEffect(() => {
    const interval = setInterval(() => {
      // 👇️ 生成 1 到 10 之间的随机数
      setNum(randomNumberInRange(1, 10));
    }, 1000); // 👈️ 每秒执行一次

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h2>number is: {num}</h2>
    </div>
  );
};

export default App;

The example above uses setInterval()the method to call a function every 1 second.

The second parameter we pass to the setInterval() method is the delay in milliseconds between function calls. If you don’t pass a delay parameter, it defaults to 0.

In the function, we generate a random number between 1 and 10 and update the state variable.

The function we useEffectreturn from the hook is run when the component unmounts.

We use clearInterval()the method to cancel the repeating action we set up using setInterval .

This is what we should always do when using methods like setInterval()or addEventListener(), because if we don't clean up when a component is unmounted, our application will have memory leaks.