Michael Landis
1 min readMar 4, 2021

--

Each Hook should reference only the variables used inside of them. In this case, useMemo() used inputProp to create foo, and useEffect() used foo to do its work.

If we only used foo.inputProp, then we could reference it as a dependency in useEffect, like

useEffect(() => {
do something with foo.inputProp
}, [foo.inputProp]);

In this case, we didn't even need the object, really. So, yeah, we could have also said

useEffect(() => {
do something with inputProp
}, [inputProp]);

But we shouldn't mix the two paradigms, even if it seems like it should catch changes:

useEffect(() => {
do something with foo.inputProp
}, [inputProp]); // DON'T DO THIS

It might work, but it means I have to know what inputProp is doing, even though I'm not actually using it inside the Hook. If something changes in how foo is built, if foo.inputProp becomes calculated instead of a direct application of inputProp, for example, this could break, and we might not remember the two are connected later.

--

--

Michael Landis
Michael Landis

Written by Michael Landis

Front-end web developer, React enthusiast, vagabond.

No responses yet