O que é useRef(). Um dos React Hook mais importantes e subestimados

Hoje vamos falar sobre um dos mais importantes React Hook useRef()

React Hooks: useRef()
O que é useRef()?
useRef() é um React Hook que permite referenciar um valor que não é necessário para renderização.

UseCase
É usado para referenciar um objeto dentro de um componente funcional e preserva o estado do objeto referenciado entre re-renderizações.
Ele pode ser usado para armazenar um valor mutável que não causa uma -re-renderização quando atualizado.

Se tentássemos contar quantas vezes nosso aplicativo renderiza usando o gancho useState(), seríamos pegos em um loop infinito, pois esse próprio gancho causa uma nova renderização.
para evitar isso, usamos o Gancho useRef():
//Code
function App() {
const [inputValue, setInputValue] = useState(**);
contagem const = useRef(0);
useEffect(() => {
count.current= count.current + 1;
});
return (
<>
<input
type=”text”
value={inputValue}
onChange={(e)setInputValue(e.target.value)}
/>
<h1>Contagem de renderização: {count.current}</h1>
);
}

Saída

Em cada pressionamento de tecla no campo de entrada, haverá
um incremento no número.
Manipulação de DOM:
Declare um objeto ref, com valor inicial nulo:
//Code
import { useRef} from 'react';
função MeuComponente() {
const inputRef = useRef(null);
…

Em seguida, passe seu objeto ref como o atributo ref para o JSX do nó DOM que você deseja manipular:
//Code
return <input ref={inputRef} />;

Após o React criar o nó DOM e colocá-lo na tela, o React definirá a propriedade atual do seu objeto ref para esse nó DOM. Agora você pode acessar o nó DOM do <input> e chamar métodos como focus:
//Code
function handleClick() {
inputRef.current.focus();
}
React irá definir a propriedade atual de volta para null quando o nó for removido da tela.