useRef
O useRef é um hook do React que cria uma referência mutável que persiste entre renderizações do componente. Ele é muito útil para acessar elementos do DOM diretamente, armazenar valores sem disparar re-renderizações ou até manter estados anteriores.
Vamos ver isso na prática com um exemplo de Formulário de Venda para Lojas, onde usaremos useRef para focar automaticamente no campo de produto e resetar os campos após uma venda ser concluída!
Exemplo prático — Formulário de Venda 🛒
import React, { useRef, useState } from 'react';
function SalesForm() {
const productRef = useRef(null);
const quantityRef = useRef(null);
const priceRef = useRef(null);
const [sales, setSales] = useState([]);
const handleSale = (e) => {
e.preventDefault();
const product = productRef.current.value;
const quantity = quantityRef.current.value;
const price = priceRef.current.value;
if (product && quantity && price) {
setSales((prevSales) => [
...prevSales,
{
id: prevSales.length + 1,
product,
quantity: Number(quantity),
total: Number(quantity) * Number(price),
},
]);
// Limpar os campos
productRef.current.value = '';
quantityRef.current.value = '';
priceRef.current.value = '';
// Focar novamente no campo de produto
productRef.current.focus();
}
};
return (
<div>
<h2>Formulário de Venda 🛍️</h2>
<form onSubmit={handleSale}>
<div>
<label>Produto:</label>
<input ref={productRef} type="text" placeholder="Nome do produto" />
</div>
<div>
<label>Quantidade:</label>
<input ref={quantityRef} type="number" placeholder="Quantidade" />
</div>
<div>
<label>Preço Unitário:</label>
<input ref={priceRef} type="number" placeholder="Preço unitário" step="0.01" />
</div>
<button type="submit">Registrar Venda</button>
</form>
<h3>Vendas Registradas 📋</h3>
<ul>
{sales.map((sale) => (
<li key={sale.id}>
{sale.quantity}x {sale.product} — Total: R$ {sale.total.toFixed(2)}
</li>
))}
</ul>
</div>
);
}
Como funciona o useRef?
No exemplo, usamos useRef para criar referências diretas para os campos do formulário. Quando o usuário clica em Registrar Venda, capturamos os valores diretamente dos inputs sem depender de useState para cada campo. Isso nos permite:
- Manipular o DOM diretamente: Pegamos os valores com inputRef.current.value.
- Resetar os campos: Após registrar a venda, limpamos os campos diretamente alterando o valor da referência.
- Melhorar a usabilidade: Usamos
productRef.current.focus()para devolver o foco ao campo de produto, agilizando o cadastro de múltiplas vendas.
Quando usar useRef?
O useRef é ideal para:
- Acessar elementos do DOM diretamente (inputs, botões, etc.).
- Armazenar valores mutáveis sem re-renderizar o componente, como contadores ou timers.
- Manter referências entre renderizações, como para manipular animações ou guardar valores antigos de estado.
Limitações do useRef
Embora útil, o useRef não dispara re-renderizações quando o valor da referência muda. Se você precisa atualizar a interface com base no valor, o ideal é usar useState.
Além disso, manipular diretamente o DOM pode quebrar a mentalidade declarativa do React, então é bom usar useRef com moderação e sempre que realmente fizer sentido!
Conclusão
O useRef é um hook essencial para manipular elementos do DOM e manter valores entre renderizações sem afetar o ciclo de re-renderização do React. No nosso formulário de venda, ele simplificou a captura de valores, permitiu limpar os campos e manteve a experiência do usuário mais fluida ao focar automaticamente no próximo campo de venda.
Se você estiver construindo formulários interativos, controles de mídia ou recursos que envolvam manipulação direta do DOM, o useRef pode ser a ferramenta perfeita para tornar sua aplicação mais dinâmica e eficiente.