I've some problem using the useRef
hook with a styled component.
Linter alerts me that Object is possibly 'null'
inside the didMount useEffect
. Any idea about this?
ref
used in a class component, that was the only way to use it before React hooks,innerRef
props isn't supported anymore in the current version of styled components.Here's a sample snippet of my component:
import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
const StyledInput = styled.input`
background: transparent;
`
const MyForm = () => {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef && inputRef.current) {
inputRef.current.focus(); //Object is possibly 'null'
}
}, []);
return (
<StyledInput ref={inputRef}/>
);
}
We can pass in refs to a styled component to access the DOM properties and methods for the given styled component. In the code above, we created a styled input called Input . Then we passed in a ref created with the useRef hook to Input . Then in the useEffect callback, we call inputRef.
useState() Hook is widely used in React applications to re-render the components on state changes. However, there are scenarios where we need to track state changes without re-rendering the components. But, if we use the useRef() Hook, we can track the state changes without causing component re-renderings.
useRef is powerful because it's persisted between renders. Unlike useState, useRef doesn't cause a component to re-render when the value or state changes. To make things more clear, let's look at a practical example.
I've finally found a solution:
const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;
It works for me:
import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
const StyledInput = styled.input`
background: transparent;
`
const MyForm = () => {
const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;
useEffect(() => {
if (inputRef && inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<StyledInput ref={inputRef}/>
);
}
As an alternative to the current accepted answer, you can also do:
const inputRef = useRef<HTMLInputElement>(null);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With