New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useRef returns T or undefined, but NodeProps.ref only returns T #3124
Comments
I am experiencing the same issue with |
I think the type we use in R3F is wrong and should allow undefined. We can align with the DOM types on this. |
I think this might be the correct behavior, you'll get the same error with a regular DOM element. You need to type your ref like this and init with null. (React will set export const Component = () => {
const ref = useRef<Mesh>(null);
return <mesh ref={ref} />;
}; Respectively, this is how you would type a ref to a div export const Component = () => {
const ref = useRef<HTMLDivElement>(null);
return <div ref={ref} />;
}; |
This will be fixed with React 19. Looks like this was an upstream issue. |
Discussed in #3121
Originally posted by arswaw December 14, 2023
Hello. I am using R3F for the first time and I am also using TypeScript. All my component files have the .tsx extension.
I have run into an issue with
useRef
and this may affect other attributes.Consider the following code:
If I define useRef in the same component like:
const cubeRef = useRef()
Then
ref
in the<mesh ... />
will return the following error:The problem is that React useRef is typed like:
function useRef<T = undefined>(): MutableRefObject<T | undefined>;
Whereas in
r3f/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts
we see:If ref (and perhaps related attributes) were typed:
ref?: React.Ref<T | undefined>
then it would solve the problem.
When I modified the R3F dependency directly, the error disappeared.
Since that is bad practice, I have used the temporary solution:
const cubeRef = useRef() as MutableRefObject<Mesh>
However this decreases type safety since the ref could return undefined at runtime.
I am not sure if I am in misinterpreting the problem or the solution. Does my new union type make sense?
The text was updated successfully, but these errors were encountered: