[FIXED] How to stop a function in react

Issue

It seems that getresult() is trying to console.log('here', x) before getMathvalue() finish is task. I would like to "pause" getresult() so it would only console.log('here', x) when getMathvalue() is done

Here I'm trying to get a specific value a only this value which is value after getMathvalue() finished is task

function quickmath() {

  const [value, setvalue] = useState()

  function getMathvalue() {
    var a = 1
    a++
    setvalue(a)
  }

  useEffect(() => {
    getMathvalue()
  }, [])

  getresult({ value })

  function getresult(x) {
    console.log('here', x)
  }

Obtained Output:

Expected Output:

Edit ---

I added and ,

  useEffect(() => {
    getresult({ value })
  }, [value]);

there is still value as undefined

Solution

There are few cases for this situation, if you are talking about output from first render, then this code works fine, because useEffect will call it's function only after first render will finish, so your getresult() will be called earlier then getMathValue().

Its hard to understand what real life situation you are trying to solve here because code is abstract.

For example if you want to make something after your value will be updated, you can create a second useEffect with value in dependency array. That way you will get your getresult function called after your getMathValue will finish its work.

useEffect(() => {
  getresult({value}) // will be called after value was updated
}, [value])

If this explanation\solution doesn't help you, pls, provide more case specific details to better understand situation.

Hope it helped.

Answered By - Oleg Brazhnichenko
Answer Checked By - - Pedro (ReactFix Volunteer)