UseRef vs UseState: Compreendendo as Diferenças

Diferença entre useRef e useState

No desenvolvimento com React, dois dos hooks mais utilizados são o useRef e o useState. Ambos desempenham papéis cruciais, mas suas funcionalidades e aplicações são bastante distintas.

O que é o useState?

O useState é um hook que permite adicionar o estado ao seu componente funcional. Quando você chama useState, você define uma variável de estado que pode ser lida e atualizada ao longo do ciclo de vida do componente. Um exemplo básico de uso do useState é o seguinte:

import React, { useState } from 'react';

const Contador = () => {
    const [contador, setContador] = useState(0);

    const incrementar = () => {
        setContador(contador + 1);
    };

    return (
        <div>
            <h1>Contador: {contador}</h1>
            <button onClick={incrementar}>Incrementar</button>
        </div>
    );
};

export default Contador;

Esse código cria um componente que exibe um contador e um botão que, quando clicado, incrementa o valor do contador. O useState é responsável por armazenar e atualizar o valor do contador.

O que é o useRef?

Por outro lado, o useRef é utilizado para manter uma referência mutável que não causa re-renderização do componente quando seu valor é alterado. É frequentemente usado para acessar elementos DOM diretamente ou armazenar valores que não precisam provocar a re-renderização do componente. Um exemplo simples de uso do useRef é:

import React, { useRef } from 'react';

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

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

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

export default InputFocus;

Neste exemplo, o useRef é utilizado para obter uma referência do campo de entrada (input) e, ao clicar no botão, o foco é enviado para esse campo sem que o componente precise ser re-renderizado.

Principais Diferenças

Quando usar cada um?

• useState deve ser utilizado quando você precisa que o componente reaja a mudanças de estado, como em contadores, formulários e outros dados que afetam diretamente a renderização.
• useRef é ideal para quando você quer manter uma referência de um elemento DOM ou armazenar um valor que não precisa causar re-renderização, como timers ou intervalos.

Conclusão

Entender quando usar useState e useRef é fundamental para a construção de aplicações React eficientes. Enquanto o useState é perfeito para gerenciar estados que afetam a renderização, o useRef é uma ferramenta poderosa para acessar elementos DOM diretamente e armazenar valores que não precisam ser reativos. Dominar essas diferenças pode levar a um código mais organizado e a uma melhor performance em suas aplicações React.

Entenda os fundamentos de useRef e useState para aprimorar suas habilidades em React

A compreensão dos hooks useRef e useState é vital para qualquer desenvolvedor que deseje se aprofundar no React. Ambos os hooks oferecem soluções diferentes para problemas comuns em desenvolvimento, e saber quando utilizá-los pode ser a chave para criar componentes mais eficientes e responsivos. Neste artigo, você terá uma visão clara sobre quando cada um deve ser utilizado, ajudando você a tomar decisões informadas em seus projetos.

Algumas aplicações:

• Gerenciamento de estados em formulários
• Acessar elementos DOM para manipulações diretas
• Armazenar valores mutáveis sem re-renderização
• Desenvolver componentes reativos e eficientes
• Integrar animações com referências de elementos

Dicas para quem está começando

• Comece experimentando com useState em componentes simples.
• Use useRef para acessar elementos DOM e entender sua utilidade.
• Pratique a diferença entre os dois hooks em projetos pequenos.
• Revise exemplos na documentação oficial do React.
• Participe de comunidades e fóruns para compartilhar dúvidas e soluções.

Compartilhe este tutorial