score:0

usestate "setter" functions maintain the same reference over render cycles, so those should be safe to use. it is even mentioned that they can be omitted on dependency arrays:

(the identity of the setcount function is guaranteed to be stable so it’s safe to omit.)

you could pass the setter function directly:

<refcontext.provider value={setchild3}>

...and then read it:

const contextusingchild = props => {
  const setchild3 = usecontext(refcontext);
  return <div ref={setchild3}>this child uses context</div>;
};

score:1

you will have extra re-render each time target element appears(since it might be conditionally rendered it may happen more than once-in-lifetime).

otherwise it should work just fine. except, it might be confusing to future code readers.

i'd rather use extra function + useref to make less cognitive load(aka "confusion"). and even more: we might not need callback ref since we have useeffect:

const childref = useref();

useeffect(() => {
 ... do something
}, [childref.current]);

<div ref={childref} ...

but sure, in very general case this might not suit us, since callback ref is called just twice per target element's life, while useeffect might be triggered more often if there are more dependencies in the list. but still.


Related Query

More Query from same tag