use-merged-ref accepts any amount of refs and returns a function that should be passed to dom node. Use this hook when you need to use more than one ref on single dom node, for example, when you want to use use-click-outside and use-focus-trap hooks and also get a ref for yourself:
useMergedRef hooks memoizes refs with
useCallback hook, but in some cases
memoizing is not a valid strategy, for example, when you are working with a list
of dynamic components React will complain that different amount of hooks was called
across two renders. To fix that issue use
mergeRefs function instead:
mergeRefs works the same way as
useMergedRef but does not use hooks internally.
Use it only when you cannot use
useMergedRef. Note that
mergeRefs will not work
correctly with use-focus-trap hook, you are required to
useMergedRef with it.