Générer un nombre aléatoire dans React

Générer un nombre aléatoire en React #

Utiliser le Math.random() pour générer un nombre aléatoire dans React, par ex.
Math.floor(Math.random() * (max - min + 1)) + min. Le site Math.random fonction
renvoie un nombre compris entre 0 et moins de 1 mais peut également être utilisée pour générer
un nombre dans un intervalle spécifique.

import {useState} from 'react';

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

  function randomNumberInRange(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;

L’extrait de code ci-dessus utilise la fonction
Math.random()
pour générer un nombre dans l’intervalle 1 (inclus) à 5 (inclus).

Si vous n’avez pas besoin de générer un nombre dans un intervalle spécifique, mais simplement un nombre
mais simplement d’un nombre aléatoire, vous pouvez utiliser la fonction Math.random() directement.

console.log(Math.random()); 
console.log(Math.random()); 
console.log(Math.random()); 

Si vous avez besoin de générer un nombre aléatoire toutes les N secondes et de le rendre dans votre composant
composant, utilisez la fonction useEffect pour définir l’intervalle.

import {useEffect, useState} from 'react';

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

  function randomNumberInRange(min, max) {
    
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  useEffect(() => {
    const interval = setInterval(() => {
      
      setNum(randomNumberInRange(1, 10));
    }, 1000); 

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

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

export default App;

L’exemple ci-dessus utilise la méthode
setInterval()
pour invoquer une fonction tous les 1 seconde.

Si vous ne passez pas d’argument pour la méthode delayla valeur par défaut est 0.

Dans la fonction, nous générons un nombre aléatoire entre 1 et 10 et met à jour la
variable d’état.

La fonction retournée par le hook
useEffect est exécutée
lorsque le composant se démonte.

Nous avons utilisé la méthode
clearInterval()
pour annuler l’action répétitive que nous avons mise en place à l’aide de la méthode setInterval.

C’est quelque chose que vous devez toujours faire lorsque vous utilisez des méthodes telles que setInterval()
ou addEventListener()car si vous ne nettoyez pas quand le composant est démonté
démonté, vous obtiendrez une fuite de mémoire dans votre application.