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.