useDeepCompareEffect should warn when dependencies includes function #47
Description
use-deep-compare-effectversion: 1.6.1
What you did:
Pass a nested object with/without a function as deps
What happened:
A nested object with property has function as value will break deep compare and trigger the hooks
Reproduction repository:
https://codesandbox.io/s/use-deep-compare-effect-repro-fn-break-compare-mt5tk
Problem description:
Given how dequal do the comparison plus how people pass function as props in React, effect callback might has chance to be called while we thought no properties were changed. Ideally, we will destruct props and pass as deps, or wrap function with useCallback when passing it for deps comparison, but with use-deep-compare-effect handling nested object, we might not realize the risk and just pass the whole object includes function to the deps array, in this case, the comparison will failed which calling the effect callback every time we click the button.
Suggested solution:
Not sure if we can handle this more properly here, but I'm thinking at least a warning would be very helpful for people who try to debug the source of triggering the hooks, e.g. when identify function during checkDeps raise a warning like useDeepCompareEffect would be triggered when dependencies has function, make sure this is expected behavior, otherwise, handle it properly. What do you think?