Domine o useRef: Armazenando valores persistentes em React

O que é useRef?

O hook useRef é uma ferramenta poderosa do React que permite manter valores persistentes entre re-renderizações de um componente. Diferente do useState, que causa uma re-renderização quando seu valor é atualizado, useRef não provoca essa mudança. Isso significa que você pode armazenar valores sem impactar a performance da sua aplicação.

Imagine que você deseja contar quantas vezes um botão foi clicado, mas não quer que isso cause re-renderizações no seu componente. Usar useRef é uma solução ideal.

import React, { useRef } from 'react';

const Contador = () => {
    const contadorRef = useRef(0);

    const incrementar = () => {
        contadorRef.current += 1;
        console.log(`Botão clicado ${contadorRef.current} vezes`);
    };

    return (
        <button onClick={incrementar}>Clique aqui</button>
    );
};

No exemplo acima, criamos uma referência chamada contadorRef que armazena o número de cliques. Cada vez que o botão é clicado, o valor é incrementado, mas a interface do usuário não é re-renderizada, o que melhora a performance, especialmente em componentes que possuem muitos estados.

Quando usar useRef?

O useRef é particularmente útil em diversas situações:

1. Acessar elementos DOM: Quando você precisa interagir diretamente com elementos DOM, como focar em um input.
2. Armazenar valores mutáveis: Para manter valores que não precisam causar re-renderizações, como timers ou intervalos.
3. Persistência de dados: Para armazenar dados que não mudam frequentemente, mas precisam ser acessados sem causar re-renderizações.

Exemplo de uso do useRef com elementos DOM

Ao usar o useRef para acessar um elemento DOM, podemos focar um input ao carregar o componente:

import React, { useRef, useEffect } from 'react';

const MeuComponente = () => {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current.focus();
    }, []);

    return <input ref={inputRef} type='text' />;
};

Neste código, inputRef é utilizado para referenciar o input. Assim que o componente é montado, o foco é automaticamente direcionado para o input. Isso melhora a experiência do usuário, permitindo que eles comecem a digitar imediatamente.

Diferença entre useRef e useState

É importante entender as diferenças entre useRef e useState: enquanto useState provoca re-renderizações quando seu valor muda, useRef não tem esse comportamento. Portanto, use useRef para dados que não precisam atualizar a interface do usuário e useState para dados que precisam.

Dicas para usar useRef

• Não use para controle de estado: useRef não deve ser usado como substituto para useState. Use-o apenas quando não for necessário re-renderizar o componente.
• Persistência em efeitos colaterais: Em efeitos colaterais, você pode usar useRef para armazenar valores que precisam ser acessados sem criar novas referências durante as re-renderizações.

Conclusão

O useRef é um hook versátil que pode ajudar a otimizar sua aplicação React, evitando re-renderizações desnecessárias. Ao entender como e quando usar useRef, você pode melhorar a performance e a eficiência do seu código. Explore as possibilidades e veja como esse hook pode simplificar seu desenvolvimento em React.

Descubra como o useRef pode transformar seu desenvolvimento em React

O hook useRef é um dos recursos menos compreendidos, mas extremamente úteis do React. Ao aprender a utilizá-lo, você pode gerenciar valores que não precisam ser reativos, garantindo que sua aplicação permaneça leve e rápida. Além disso, a sua capacidade de acessar elementos DOM diretamente torna-se uma ferramenta valiosa em diversas situações, desde focar inputs até gerenciar animações. Com um entendimento claro de como integrar o useRef no seu fluxo de trabalho, você se torna um desenvolvedor mais eficiente e preparado para lidar com os desafios do React.

Algumas aplicações:

• Gerenciar o foco de elementos de entrada.
• Armazenar intervalos e timers sem re-renderizações.
• Fazer integrações diretas com bibliotecas que manipulam o DOM.

Dicas para quem está começando

• Experimente com elementos DOM para entender seu funcionamento.
• Use o console para verificar o valor armazenado em useRef.
• Combine useRef com useEffect para gerenciamento de efeitos colaterais.

Compartilhe este tutorial