Domine o useRef: Armazenando estados de forma eficiente em React

O que é useRef e como ele funciona?

O hook useRef é uma das ferramentas mais poderosas do React, permitindo que você armazene valores que não precisam disparar re-renderizações. Ao contrário de useState, que causa a atualização do componente sempre que seu valor muda, o useRef é ideal para armazenar valores que você deseja persistir entre renderizações, mas que não precisam causar uma nova renderização do componente.

Uma das principais utilizações do useRef é para acessar elementos do DOM. Vamos ver um exemplo prático:

import React, { useRef } from 'react';

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

    const focusInput = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focar no Input</button>
        </div>
    );
}

No exemplo acima, criamos um componente que contém um input e um botão. Usamos useRef para criar uma referência ao input. Quando o botão é clicado, chamamos a função focusInput, que usa a referência para focar no campo de input. Isso mostra como o useRef permite interações diretas com o DOM sem a necessidade de atualizar o estado do componente.

Armazenando Valores sem Re-renderizações

Uma das grandes vantagens do useRef é a capacidade de armazenar qualquer valor sem que isso cause uma re-renderização do componente. Por exemplo, você pode usar useRef para armazenar contadores ou valores temporários que não precisam ser renderizados novamente. Veja o exemplo:

import React, { useRef } from 'react';

function Contador() {
    const contagemRef = useRef(0);

    const incrementar = () => {
        contagemRef.current += 1;
        console.log(contagemRef.current);
    };

    return (
        <div>
            <button onClick={incrementar}>Incrementar</button>
        </div>
    );
}

Neste caso, cada vez que o botão é clicado, o valor de contagemRef.current aumenta, mas o componente não é re-renderizado. Isso é útil para evitar atualizações desnecessárias na interface do usuário, melhorando a performance da aplicação.

Comparação entre useState e useRef

É comum se perguntar quando usar useState e quando usar useRef. Ambas as ferramentas têm suas particularidades e é importante entender as diferenças:

Casos de Uso Comuns do useRef

• Armazenar temporariamente valores: Ideal para valores que você não precisa enviar para a interface, mas que são necessários para lógica interna.
• Referência a elementos do DOM: Como mostrado anteriormente, o useRef é perfeito para manipular elementos do DOM diretamente.
• Evitar re-renderizações desnecessárias: Ao usar useRef, você pode gerenciar estados de forma eficiente, evitando que a interface do usuário seja atualizada desnecessariamente.

Conclusão

Em resumo, o useRef é uma ferramenta extremamente útil para desenvolvedores React, permitindo gerenciar estados e acessar elementos do DOM sem causar re-renderizações. Ao entender suas funcionalidades, você pode criar aplicações mais eficientes e responsivas.

Utilize useRef sempre que precisar armazenar valores que não afetam diretamente a renderização do componente. Com essa prática, você estará no caminho certo para otimizar suas aplicações React e proporcionar uma melhor experiência ao usuário.

Entenda a importância do useRef para a performance em aplicações React

O uso do useRef em React é essencial para quem deseja otimizar suas aplicações. Este hook não só facilita o acesso a elementos do DOM, mas também permite armazenar valores que não necessitam de re-renderizações. Compreender como e quando utilizar useRef pode fazer toda a diferença na performance da sua aplicação, tornando-a mais leve e responsiva. Além disso, a manipulação direta do DOM pode ser extremamente útil em diversas situações, como animações ou integração com bibliotecas externas que requerem acesso a elementos DOM. Este conceito se torna ainda mais relevante à medida que desenvolvemos aplicações mais complexas e buscamos sempre a melhor experiência para o usuário.

Algumas aplicações:

• Gerenciar foco em inputs
• Armazenar valores temporários
• Manipular animações
• Integrar com bibliotecas de terceiros

Dicas para quem está começando

• Utilize useRef para acessar elementos do DOM diretamente.
• Evite usar useRef para estados que precisam ser renderizados.
• Pratique a utilização em pequenos projetos para entender melhor suas funcionalidades.

Contribuições de

Gabriel Nogueira

Desenvolvedor front-end especializado em React e design de interfaces responsivas.

Mais sobre o autor

Compartilhe este tutorial