collect data from functions it keeps refreshing every time React

Question

**import { controls } from "../../../constants/controls";
import { useKeyPress } from "../../../hooks/useKeyPress";
import { useArena } from "./useArena";
const getDamage = (attacker, defender) => {
  let damage = attacker - defender;
  return damage;
};
const getHitPower = (fighter) => {
  let criticalHitChance = Math.random() * 2;
  let power = fighter.attack * criticalHitChance;
  return power;
};
const getBlockPower = (fighter) => {
  let dodgeChance = Math.random() * 2;
  let power = fighter.defense * dodgeChance;
  return power;
};
export const useFight = () => {
  const { selectedPair } = useArena();
  const { keysPressed } = useKeyPress();
  const {
    playerOneAttack,
    playerOneBlock,
    playerTwoAttack,
    playerTwoBlock,
    playerOneCriticalHitCombination,
    playerTwoCriticalHitCombination,
  } = controls;
  var initialHealthOne = selectedPair.playerOne.health;
  var initialHealthTwo = selectedPair.playerTwo.health;
  if (keysPressed === playerTwoAttack) {
    var firstDamage = getHitPower(selectedPair.playerTwo);
    var firstProtect = getBlockPower(selectedPair.playerOne);
    var demagePlayerOne = getDamage(firstDamage, firstProtect);
    initialHealthOne = initialHealthOne - demagePlayerOne;
    // updateHealthPlayerOne(demagePlayerOne);
    if (keysPressed === playerOneBlock) {
      firstDamage = 0;
      firstProtect = 0;
      demagePlayerOne = getDamage(firstDamage, firstProtect);
      initialHealthOne = initialHealthOne - demagePlayerOne;
    }
  }
  if (
    keysPressed ===
    (playerTwoCriticalHitCombination[0] ||
      playerTwoCriticalHitCombination[1] ||
      playerTwoCriticalHitCombination[2])
  ) {
    firstDamage = 4 * getHitPower(selectedPair.playerTwo);
    firstProtect = getBlockPower(selectedPair.playerOne);
    demagePlayerOne = getDamage(firstDamage, firstProtect);
    initialHealthOne = initialHealthOne - demagePlayerOne;
  }
  if (keysPressed === playerOneAttack) {
    var secondDemage = getHitPower(selectedPair.playerOne);
    var secondBlock = getBlockPower(selectedPair.playerTwo);
    var demagePlayertwo = getDamage(secondDemage, secondBlock);
    initialHealthTwo = initialHealthTwo - demagePlayertwo;
    if (keysPressed === playerTwoBlock) {
      secondDemage = 0;
      secondBlock = 0;
      demagePlayertwo = getDamage(secondDemage, secondBlock);
      initialHealthTwo = initialHealthTwo - demagePlayertwo;
    }
  }
  if (
    keysPressed ===
    (playerOneCriticalHitCombination[0] ||
      playerOneCriticalHitCombination[1] ||
      playerOneCriticalHitCombination[2])
  ) {
    secondDemage = 4 * getHitPower(selectedPair.playerOne);
    secondBlock = getBlockPower(selectedPair.playerTwo);
    demagePlayertwo = getDamage(secondDemage, secondBlock);
    initialHealthTwo = initialHealthTwo - demagePlayertwo;
  }
  // getwinner
  var winner;
  if (initialHealthOne === 0) {
    winner = selectedPair.playerOne;
  }
  if (initialHealthTwo === 0) {
    winner = selectedPair.playerTwo;
  }
  const fighterOneDetails = {
    selectedPair,
    initialHealthOne,
  };
  const fighterTwoDetails = {
    selectedPair,
    initialHealthTwo,
  };
  return {
    fighterOneDetails,
    fighterTwoDetails,
    winner,
  };
};**

My goal is to calculate players' health in initialHealthOne and initialHealthTwo vars but it doesn't add other updates to it, only the default value is taken and updated each time. while I need a calculated variable in the result from every function and from every if block.

I get my selectedPair from other function which includes player's data and keysPressed contains data of eventclicklisteners what each key does. I have a page where two person are fighting and i need their health calculated.

Answer 1

You're going to need to use some state here: https://reactjs.org/docs/hooks-state.html

As a starting point replace:

  var initialHealthOne = selectedPair.playerOne.health;
  var initialHealthTwo = selectedPair.playerTwo.health;

with

   const [playerOneHealth, setPlayerOneHealth] = useState(selectedPair.playerOne.health)
   const [playerTwoHealth, setPlayerTwoHealth] = useState(selectedPair.playerTwo.health)

From then on, to update health, you'll use:

setPlayerOneHealth(newValue)

You're going to have to refactor a fair bit of code to get this up and running, but that should get you started. Cool project btw and best of luck!