React: How to use the data in a forward ref in a child component

According to React's documentation, useRef() is for when you need data that doesn't impact rendering and to pass a ref to a child you have to use forwardRef wrapper around child component.

I am using react and typescript and run into a problem trying to pass ref to my child component. The problem I run into is the type of the ref in the child component is ((instance: T | null) => void) | MutableRefObject<T | null> | null; This doesn't provide a clear way of how to extract the value of the ref.

Example:

function ParentComponent() {
  const someData = useRef(1);
  // some event handling who may change the value of someData
  return (
    <ChildComponent ref={someData} />
 );
}


const ChildComponent = forwardRef<number>(function ChildComponent(props, ref) {
  function onClick() {
    // use ref here, need the number from ref but get type error
  }

  return <button onclick={onClick} type="button"></button>;
}

While I understand the main use case for ref is to handle DOM references for manipulations, the core purpose of ref is to contain data that shouldn't impact rendering when changed.

Is there a different way to pass data that shouldn't impact rendering to a child component, is this just not something supposed to be done, or do I just need to cast it as MutableRefObject<T | null> | null and call it a day? I was worried about the function signature on the type if I needed to do anything with that. Everything I find while searching just talks about passing a DOM ref between the two not actual data.

As you've pointed out, ref can be of different types, so TypeScript doesn't know what to suggest. It can be either ((instance: T | null) => void) or MutableRefObject<T | null> or null.
This would be one way to extract its value:

  function onClick() {
    let extracted: number | null=null;
    if (ref) { // TypeScript infers it's not null inside the clause
      if (typeof ref === 'function') { // TypeScript infers it's a function
        ref(1); // not sure what that actually does, I guess it's a setter when you pass a "callback" with ref = React.createRef()
      } else { // TypeScript infers there's only one possibily left: it has the "current" property.
        extracted = ref.current;
      }
    }
    console.log(extracted)
  }

Since you're in control of the ChildCompoent, you don't really need to wrap it, though. You can just strip the forwardRef magic and just pass someData as a regular object which can be processed like that:

function ParentComponent()=> {
    const someData = useRef(1);
    console.log("rendering parent")
    useEffect(() => {
        const timer = setTimeout(() => {
            someData.current = 2
        }, 1000);
        return () => clearTimeout(timer);
    }, [])
    return (
        <ChildComponent someData={someData}/>
    );
}


function ChildComponent(ref: { someData: MutableRefObject<number> }) {
    function onClick() {
        console.log("clicked with no:", ref.someData.current)
    }

    console.log("rendering child")
    return <button onClick={onClick} type='button'></button>;
}

will log

rendering parent // might be appear twice but only b/c you run it in dev environment
rendering child // as above
clicked with no: 1 // if you're fast enough
clicked with no: 2 

The whole idea behind useRef is just that you just that you're passing a reference to a value (i.e. someData.current) and therefore can manipulate it with without the engine noticing a component update (b/c someData remains still the very same object) and therefore without starting a rerender. Since there's nothing more to it, you can pass it around in any way you please.