Recurring function with useState - React

Question

I have read up on hashing iteration and although this is not a question about security I can´t seem to find information on how to actually do this correct.

I thought that when in React, this should be done with useState, but im clearly missing something here.

Full code:

import { sha256 } from "js-sha256";
import { useState } from "react";

function App() {
  const [currentHash, setCurrentHash] = useState("summer1");

  function iterate(iterations) {
    for (let x = 0; x < iterations; x++) {
      setCurrentHash(sha256(currentHash)); //Does 1 hash only
      console.log("Hashed", x, "times"); //Logs 4 times
    }
  }

  return (
    <div className="App">
     
        <button onClick={() => iterate(4)}> Klick</button>
        currentHash: {currentHash}
        {/* Correct hashes */}
        <p>0: summer1</p>
        <p>1: {sha256("summer1")}</p>
        <p>2: {sha256(sha256("summer1"))}</p>
        <p>3: {sha256(sha256(sha256("summer1")))}</p>
        <p>4: {sha256(sha256(sha256(sha256("summer1"))))}</p>
 
    </div>
  );
}

export default App;

Does this answer your question? [Calling setState in a loop only updates state 1 time](https://stackoverflow.com/questions/35248748/calling-setstate-in-a-loop-only-updates-state-1-time) — rossipedia, Dec 03 '21 at 08:27

score 1 · Accepted Answer · answered Dec 03 '21 at 08:20

1

sha256(currentHash) is going to give you the same result no matter how many times you run it.

currentHash won't be updated until the component is re-rendered and a new value is pulled out of the state and assigned to the new instance of currentHash at the top of the function.

You need to:

store the result in a variable — not the state
use the value of that variable as the input to the function
store the final result in the state at the end

answered Dec 03 '21 at 08:20

Quentin

914,110
126
1,211
1,335

No, it actually updates correctly (hashes) every time I run the function. – RustyJames Dec 03 '21 at 08:23
@RustyJames — If it updated "correctly" then your comment — `//Does 1 hash only` — would say that it does it 4 times. – Quentin Dec 03 '21 at 08:25
But the for-loop has no effect on the state change, except the first time. – RustyJames Dec 03 '21 at 08:25
@RustyJames — Because every time the four loop iterates it pulls in the same value of `currentHash` as I said in this answer. – Quentin Dec 03 '21 at 08:25
Sorry I misunderstood you, it works just fine! – RustyJames Dec 03 '21 at 08:33

score 0 · Answer 2 · answered Dec 03 '21 at 08:36

Working code:

import { sha256 } from "js-sha256";
import { useState } from "react";

function App() {
  const [currentHash, setCurrentHash] = useState("");

  function iterate(input, iterations) {
    for (let x = 0; x < iterations; x++) {
      input = sha256(input);
      console.log("Hashed", x, "times");
    }
    setCurrentHash(input)
  }

  return (
    <div className="App">
      
        <button onClick={() => iterate("summer1", 2)}> Klick</button>
        currentHash: {currentHash}

    </div>
  );
}

export default App;

Recurring function with useState - React

2 Answers2