Refs no React

Se quisermos lembrar alguma informação, mas não queremos que sua alteração cause a renderização do componente, então refs serão úteis para nós e, correspondentemente, o hook useRef que funciona com eles.

Uma ref (ou referência) é um objeto JavaScript comum com uma única propriedade current, que você pode ler ou modificar.

Assim como os estados, as refs podem armazenar qualquer tipo de dados - podem ser números, strings, objetos e até mesmo funções.

Se os seus dados são usados para renderização, armazene-os no estado, e se você não precisa da renderização, nesse caso, o uso de refs pode se tornar mais eficiente. Além disso, ao contrário do estado, o valor da ref é alterado instantaneamente.

De modo geral, as refs são aplicadas onde você precisa sair do React e interagir com APIs externas - mais frequentemente com APIs do navegador, que não afetam a exibição do componente. Isso pode ser, por exemplo, armazenar o id de um temporizador ou armazenar um objeto para o qual não é necessário calcular JSX, mas na maioria das vezes é a interação com elementos DOM. Elas podem ser usadas para controlar o foco, seleção de texto ou reprodução de mídia.

Na próxima lição, vamos analisar o trabalho com refs e o hook useRef na prática.