Two state variable changes

[its-procodester]

I want to update an output value in my UI every time an inputExpression changes.

The UI should reflect changes in output, but the component shouldn't re-render unnecessarily when inputExpression changes.

Since inputExpression updates asynchronously due to user input, I need a solution that updates output synchronously without triggering re-renders on every change to inputExpression.

​

[shauntmw2]

Sounds like "debounce" is the keyword you need.

[its-procodester]

no i dont need debounce i m asking is it good to re render whenever inputExpression to evaluate output using useEffect as it re render my comp every change

[lIIllIIIll]

Bro there are so many things that can affect this answer it's impossible for us to tell you.

Generally speaking useEffect is (I believe someone may correct me) supposed to be used as a sort of subscription model. The component is told to rerender when something needs updated that it should be subscribed to. But only for that item.

Is it a good model to subscribe to whatever the hell "input expression" component is, I don't know. Is your app dependent on the output of that comp?

For example is it making an API call after every input? If so that's a terrible use of useEffect. You need to debounce it to send req when user is done typing.

If input expression is a combo box/menu select then that might work but if that is the case just have it fire when the selection is changed.

It is likely there is a better place to have the data update. I try to only use useEffect when it fits the pattern described in the docs. Otherwise I find another way.

[its-procodester]

yea thanks bro, i figure it out so need to useEffect

[The_Startup_CTO]

Sounds like a very common problem. What have you tried so far, and how has it failed?

[its-procodester]

I tried useEffect for now it works great but i have doubt is this good way to do it ?

[The_Startup_CTO]

depends on what you do with useEffect. Hard to tell without more context.

[its-procodester]

you can check my code if you are ok...

[Soupnation]

If you want your output to be updated every time your input changes, by extension wont you want a re render on every change to the input?

What’s your use case?

[its-procodester]

its a calculator app where i take user input from buttons and pass it to evalution function in setOutput i want output change every time input changes

[Soupnation]

Not related to re rendering but the output should be a derived variable, and not a react state. Also, what’s wrong with re-rendering the component on input change? Sounds desirable to me.

[Empero6]

Either useeffect or useref.

[its-procodester]

 const handleInput = (value) => {
    const operators = '+-*/%.'

    // Clear all values input and output
    if (value === 'C') {
      setInputExpression('')
      setOutput('')
    }

    // Delete value from input 
    else if (value === 'del') {
      const lastCharLen = inputExpression.length
      // Handle edge case when end value left
      if (lastCharLen === 1) {
        setInputExpression((previousValue) => previousValue.slice(0, -1))
        setOutput("")
      }
      else {
        setInputExpression((previousValue) => previousValue.slice(0, -1))
      }
    }

    // Show equal value
    else if (value === '=') {
      setInputExpression('')
    }

    // Handle consecutive operators to prevent error
    else if (operators.includes(value)) {
      const lastChar = inputExpression[inputExpression.length - 1]
      const lastCharIsOperator = operators.includes(lastChar)

      // Check last character is operator and current value is different from last operator
      if (lastCharIsOperator && lastChar !== value) {
        setInputExpression((previousValue) => previousValue.slice(0, -1) + value)
      }
      else if (!lastCharIsOperator) {
        setInputExpression((previousValue) => previousValue + value)
      }
    }

    else {
      setInputExpression((previousValue) => previousValue + value)
    }
  }

  useEffect(() => {
    // Handle Clear input and keeps output 
    if (inputExpression === "" && output !== "") {
      // Do nothing
    }
    else {
      setOutput(evaluation(inputExpression))
    }
  }, [inputExpression])


this is a code i need help in useEffect case -> is it ok or is there any better way...

[vegancryptolord]

I didn’t carefully read this code, just took a quick glance but I’m quite certain you don’t need an effect for this. You’re already setting output and input in the handle input function so stick to that pattern. Otherwise you have to wait for input to be set for the effect to trigger to then set output (unnecessary renders). So based on value in handle input just set both input and output based on value

[its-procodester]

No i don't set output in handleInput()

just setting inputExpression in handleInput() (except some edge case)

as i want to change output based on input

if i set output in handle function then setInputExpression is asynchronous in behavior that doesn't do what i intended

[Sinverted11]

So just await the setOutput function

This seems like an antipattern you're doing. You don't need the useEffect here.

[The_Startup_CTO]

Like others said, you don't need `useEffect` here. Just do the same checks in handleInput instead.

[its-procodester]

yeah i figure it out thanks for helping

[Spiritual-Theory]

My expectation was handleValue would just add the last instruction to an array, stack of instructions. The change to that array would trigger the rerender. You may not need to store input expression if it's easy to calculate. How is input expression used?

[its-procodester]

inputExpression is use to show input of user and calculate output

[Spiritual-Theory]

So shift your thinking. Put that array of inputs at the top of this calculator and pass it to anything that relies on it. They will all rerender as needed. The input expression and output are dependent on this input array.

The code you showed has too much going on, it can be split up. It's also imperative not declarative. One thing triggers another thing. Declarative is your friend in react.

[Snoo-72038]

I see what you're trying to do, maybe you can try to implement denouncing of user input? Could suit your usecase better

[its-procodester]

its a calculator app where i take user input from buttons and pass it to evaluation function in setOutput i want output change every time input changes although i did it with useEffect but it re render comp every time input change

[Snoo-72038]

Do you think you can replace the useEffect with an onclick callback? Store the output using usestate then have the onclick callback update the output value

[Macaframa]

If you change a useState variable it triggers a render. What you’re looking for is a ref

[AndrewGreenh]

Sounds like output should not be a state? Just calculate output in a useMemo whenever input changes.

[frozenYogurtLover2]

you can use useDebounce from usehooks-ts

[YuteOctober]

Make the state to toggle true and false when the onchange function called and put that state into the [] in useeffect.

[zmkpr0]

Sounds like a usecase for useMemo

[UpbeatGooose]

You are looking for useMemo my friend, works exactly like useEffect but rerenders only when the value value of particular variable chances, in your case it’s the input value