What should I do if an operation depends on another first variable

github logo ・1 min read

What should I do if an operation depends on another first variable that is set by a setVariable (in the react hooks regard) in a useEffect.

This operation may set another second variable with the first variable.

I currently use another effect and check if the first variable is not undefined like

useEffect(() => {
    if (firstVariable) {
        let secondVariable = f(firstVariable)
    }
}, [firstVariable])

Is it a bad pattern?
Is there a better way doing this?

Note: f is a hypothetical function defined somewhere else. It is jsut to show I am just not renaming the firstVariable but making arbitrary operations on it. What is the operations are out of purpose of this topic.

twitter logo DISCUSS (11)
markdown guide
 

What is engine in this example? the useEffect in your example will only run when that changes, but it is not clear to me how it relates to firstVariable?

If you want to change secondVariable based on firstVariable, you'd want that to be what is passed into the second argument of useEffect

 

Sorry. It was a mistake. I have edited now. engine was firstVariable. I wanted to hide the domain stuff not to confuse people.

engine was the Engine that is constructed by Babylonjs engine constructor by the way.

 

Also, is an effect run after first render even it has a second argument, ie. dependencies array?

I ask this because if it does then if the firstVariable is not set yet then it will throw an error.

 

Yes, useEffect runs on every render, including the first. If you only want to do something when firstVariable is defined, then an if check inside of useEffect seems fine to me. There may be other patterns or solutions but it's hard to tell without more context. Maybe if you could explain in more detail what firstVariable and secondVariable are I may be able to provide more help.

Sorry if I repeat; you say even I pass the second argument e.g. [firstVariable] to the useEffect it will still run in the first render eventhough firstVariable did not change.

Additional question:

  • if firstVariable is not same across a rerender but did not cause the rerender, e.g. it is not the cause of rerender since it is not even in the jsx, then the effect will not run. Is that correct?

Yes, it will run on the first render. It seems a bit odd, but that is how it works. useEffect has to have an initial check, otherwise, how would it know if the variable changed or not?

To your second question, the effect will run, regardless if it was the cause of the rerender. useEffect checks on every render, regardless of the cause.

So an effect runs after every render if its dependencies requires so, ie. changed.

I sometimes think guides and docs should be a bit succinct. It is difficult to remember, spot,and find a valueable info in a corner of 5 mins read page.

A gotcha about dependency change is whereas the primitives are regarded not changed after set to same value the arrays and objects are regarded as changed after set to same value, naturally.

Also

 

Hi:

I don't see the problem here (maybe because I am watching only a small part). setState is tricky (cause is async as everybody knows).

However

if (firstVariable) {


}

is not only validating if the variable is undefined but also false, zero and maybe other cases. So it is prone to mistake.

You could use instead

if (firstVariable===undefined) {


}

And what if firstVariable is undefined? then secondVariable will never be defined.

 

By setState do you mean setState the second element of the array returned by the useState?

 

seems reasonable.
the only odd thing i see is, why rename the variable instead of using it as is?

 

No it was just a simple example for the sake of giving an example. I could not produce an elaborate example. Maybe I should fix it.

Classic DEV Post from Mar 29

Code of Conduct generator!

F. Selçuk Can profile image