Theo's Typesafe Cult•2y ago

How Can I Pass a Ref Down To A Child Component and Have It Not Just Be The Starting Value

Hello, I have a bit of a odd question and 99% of the answers for this I have seen are for class components and do not translate to functional components. I am essentially trying to do the following:

const myCoolComponent: FunctionComponent = () => {

  let ref = useRef(null);

  return(
    <div ref={ref}>
      <MyCoolComponentChild parentDivRef={ref} />
    </div>
  )
}

const MyCoolComponetChild: FunctionCompoent = () => {
  // Read some stuff with that ref, but I am *not* assigning it to a element here
}

const myCoolComponent: FunctionComponent = () => {

  let ref = useRef(null);

  return(
    <div ref={ref}>
      <MyCoolComponentChild parentDivRef={ref} />
    </div>
  )
}

const MyCoolComponetChild: FunctionCompoent = () => {
  // Read some stuff with that ref, but I am *not* assigning it to a element here
}

The issue here is that at the time the ref gets passed down its still null and ref does not cause any sort of rerender on changed value, this actually leads to a super weird behaviour where what I want to do in MyCoolComponentChild works, but only after next does a HMR reload after a change to MyCoolComponent since the ref get's re-passed down from the parent. If anyone could help me find a good way to do this it would be much appreciated! Thanks!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How Can I Pass a Ref Down To A Child Component and Have It Not Just Be The Starting Value