Can I generate a value per second with React?

Question

Is there a way I can generate multiple SET VALUES per second using react?

What am I trying to accomplish? I have created this "tap game" where you could generate $1 per tap up to $250 per tap depending on where you tap. In this game I want to be able to "hire employees." After designating the hired employee to, lets say "$1 team", my "Score" will increase by 1 per second. If I decided to hire another employee and I decided to assign it to "$5 team", it would increase by 5. Since I have 2 employees at this time, I do not want to cancel one or the other out, I would like them to run simultaneously (e.g. 6 per second in this example).

What Have I tried? I have not tried, or tested, anything specifically because of course I am unsure of how to accomplish this. I have researched other Stack Overflow examples and I have came across one very similar, however, they are using an API where as I am not. Stack Overflow Example I am not sure if I would even need an API, I would assume I would not?

Request: If at all possible, a solution that I could use dynamically would be extremely appreciated. If I decided to hire 10 employees and stick them all on $1 team, I would like to be able to do so.

Attached is a fully functional code.

import React, {useState, useEffect} from 'react'

const App = () => {

  // ======================================
  //                 HOOKS
  // ======================================

  const [score, setScore] = useState(0)
  const [showEZBake, setShowEZBake] = useState(false)
  const [showToasterOven, setShowToasterOven] = useState(false)
  const [showConvectionOven, setShowConvectionOven] = useState(false)
  const [showSmallFactory, setShowSmallFactory] = useState(false)



  // ======================================
  //               FUNCTIONS
  // ======================================

  const winCondition = () => {
    if (score >= 100000) {
      return (
        <h1>YOURE A WINNER!!</h1>
      )
    }
  }

  // EARN REVENUE FUNCTIONS
  const earn1 = () => {
    setScore(score + 1)
    winCondition()
  }

  const earn5 = () => {
    setScore(score + 5)
    winCondition()
  }

  const earn25 = () => {
    setScore(score + 25)
    winCondition()
  }

  const earn50 = () => {
    setScore(score + 50)
    winCondition()
  }

  const earn250 = () => {
    setScore(score + 250)
    winCondition()
  }

  // PURCHASE ITEMS FUNCTIONS

  const buyEZOven = () => {
    setScore(score - 25)
  }

  const buyToasterOven = () => {
    setScore(score - 250)
  }

  const buyConvectionOven = () => {
    setScore(score - 1000)
  }

  const buySmallFactory = () => {
    setScore(score - 15000)
  }

  const upgradeEZOven = () => {
    if (score >= 25) {
      setShowEZBake(true)
      buyEZOven()
    }
  }

  const upgradeToasterOven = () => {
    if (score >= 250 ) {
      setShowToasterOven(true)
      buyToasterOven()
    }
  }

  const upgradeConvectionOven = () => {
    if (score >= 1000) {
      setShowConvectionOven(true)
      buyConvectionOven()
    }
  }

  const upgradeSmallFactory = () => {
    if (score >= 15000) {
      setShowSmallFactory(true)
      buySmallFactory()
    }
  }





  // ======================================
  //               DISPLAY
  // ======================================

  return (
    <div>
      <h1>Bakery</h1>
      <h2>Revenue {score}</h2>
      <h3>No Bake Pudding</h3><button onClick={earn1}>$1</button>


      {/* EZ BAKE OVEN */}
      {showEZBake ? (
        <>
        <h3>Easy Bake Oven</h3>
        <button onClick={earn5}>$5</button>
        </>
      ) : (
        <>
        <h3>Purchase Easy Bake Oven</h3>
        <button onClick={upgradeEZOven}>$25</button>
        </>
      )
      }

      {/* TOASTER OVEN  */}
      {showToasterOven ? (
        <>
        <h3>Toaster Oven</h3>
        <button onClick={earn25}>$25</button>
        </>
      ) : (
        <>
        <h3>Purchase Toaster Oven</h3>
        <button onClick={upgradeToasterOven}>$250</button>
        </>
      )}

      {/* CONVECTION OVEN */}
      {showConvectionOven ? (
        <>
        <h3>Convection Oven</h3>
        <button onClick={earn50}>$50</button>
        </>
      ) : (
        <>
        <h3>Purchase Convection Oven</h3>
        <button onClick={upgradeConvectionOven}>$1000</button>
        </>
      )}

      {/* FACTORY */}
      {showSmallFactory ? (
        <>
        <h3>Small Factory Production</h3>
        <button onClick={earn250}>$250</button>
        </>
      ) : (
        <>
        <h3>Purchase Small Factory</h3>
        <button onClick={upgradeSmallFactory}>$15,000</button>
        </>
      )}

      {/* WIN CONDITION */}
      {
        winCondition()
      }




    </div>
  )
}
export default App

Answer 1

You can generate a value every second pretty easily with useEffect:

const [count, setCount] = useState(0);

useEffect(() => {
    const timer = setTimeout(() => {
        setCount(count + 1);
    }, 1000);
    return () => clearTimeout(timer);
}, [count, setCount]);