useRef vs. useState em React

May 07 2023

React é uma biblioteca JavaScript popular para construir interfaces de usuário. Ele fornece vários ganchos que permitem aos desenvolvedores gerenciar o estado e executar efeitos colaterais.

React é uma biblioteca JavaScript popular para construir interfaces de usuário. Ele fornece vários ganchos que permitem aos desenvolvedores gerenciar o estado e executar efeitos colaterais. Dois ganchos comumente usados no React são useRefe useState. Embora possam parecer semelhantes à primeira vista, eles servem a propósitos diferentes e têm casos de uso distintos. Neste artigo, vamos explorar useRefe useStateaprofundar, comparando suas funcionalidades e fornecendo exemplos para ilustrar seu uso.

Compreensão `useRef`:

O useRefgancho no React cria uma referência mutável que persiste nas renderizações do componente. Ao contrário de useState, que gerencia o estado e aciona a nova renderização, useRefé usado principalmente para acessar e manipular o DOM ou para armazenar valores mutáveis que não acionam a nova renderização. Ele retorna um objeto mutável com uma currentpropriedade.

Exemplo 1: Acessando elementos DOM

Digamos que queremos focar em um campo de entrada quando um botão é clicado. Podemos conseguir isso usando useRefo seguinte:

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

Compreensão `useState`:

O useStategancho é usado para gerenciar o estado dentro de um componente funcional. Isso nos permite criar variáveis que podem ser atualizadas e acionar re-renderizações quando seus valores mudam. O useStategancho retorna um array com dois elementos: o valor do estado atual e uma função para atualizá-lo.

Exemplo 2: Gerenciando um contador

Vamos criar um componente contador simples usando useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Comparando `useRef`e `useState`:

Embora ambos useRefpossam useStatearmazenar valores, eles servem a propósitos diferentes:

Gerenciando o estado: useStateé projetado para gerenciar o estado dentro de um componente. Ele aciona novas renderizações quando o estado é atualizado, garantindo que a interface do usuário reflita os valores mais recentes.
Acessando e manipulando o DOM: useRefé usado principalmente para interagir com o DOM, como acessar valores de entrada ou focar em elementos. Ele nos permite armazenar referências a nós DOM e recuperar suas propriedades sem acionar re-renderizadores.
Preservar os valores nas renderizações: useRefmantém o mesmo valor nas renderizações dos componentes, enquanto useStateinicializa o estado durante cada renderização.
Comportamento de nova renderização: atualizar o valor retornado por useStatefaz com que o componente seja renderizado novamente, enquanto atualizar a currentpropriedade de um refcriado com useRefnão aciona novas renderizações.

Para entender melhor os casos de uso de useRefe useState, vamos explorar alguns cenários em que cada gancho é mais adequado:

1. useRefCasos de uso:

1.1. Acessando elementos DOM: quando você precisa acessar ou manipular elementos DOM, como focar uma entrada, rolar para um elemento específico ou medir o tamanho de um elemento, useRefé a escolha apropriada. Ele permite que você crie uma referência ao nó DOM e acesse suas propriedades ou métodos.

1.2. Armazenar valores mutáveis: se você tiver um valor que precisa persistir nas renderizações, mas não afeta a IU do componente ou aciona novas renderizações, useRefé uma boa opção. Por exemplo, você pode usar useRefpara armazenar valores anteriores, armazenar valores em cache ou preservar valores mutáveis para comparação.

2. useState Casos de uso:

2.1. Gerenciando o estado do componente: quando você precisa gerenciar e atualizar o estado em um componente, essa useStateé a abordagem recomendada. Ele fornece uma maneira de armazenar e atualizar valores que afetam a interface do usuário do componente e acionam novas renderizações.

2.2. Manipulando interações do usuário: se você tiver elementos interativos em seu componente, como caixas de seleção, campos de entrada ou alternâncias, useStateé comumente usado para gerenciar o estado associado a essas interações. Você pode atualizar o estado com base na entrada do usuário e refletir as alterações na interface do usuário.

Exemplo de comparação:

Para ilustrar a diferença entre useRefe useStatemais claramente, vamos considerar um exemplo onde ambos os ganchos podem ser usados:

Suponha que temos um formulário com um campo de entrada e um botão de envio. Quando o usuário clica no botão enviar, queremos exibir uma mensagem de sucesso sem limpar o campo de entrada.

Usando useRef:

import React, { useRef } from 'react';

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

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message without clearing the input field
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Usando useState:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message
    setInputValue(''); // Clear the input field
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Neste exemplo, useStateé usado para gerenciar o valor do campo de entrada e acionar novas renderizações quando o usuário interage com ele. A atualização de estado em displaySuccessMessagelimpa o campo de entrada atualizando o inputValueestado.

Conclusão:

Em conclusão, useRefe useStatesão ganchos essenciais no React, mas servem a propósitos diferentes. useRefé usado principalmente para acessar e manipular o DOM ou armazenar valores mutáveis sem acionar re-renderizadores. Ele fornece uma referência mutável que persiste entre renderizações de componentes. Por outro lado, useStateé usado para gerenciar o estado do componente, acionando novas renderizações quando o estado é atualizado. Ele retorna um valor de estado e uma função para atualizá-lo.

Compreender as diferenças entre useRefe useStatee saber quando usar cada gancho é crucial para escrever componentes React eficazes e otimizados. Ao utilizar useRefe useStatecorretamente, você pode criar aplicativos interativos e de alto desempenho com o React.

Obrigado por ler!

Espero que você tenha achado este artigo útil. Se você tiver alguma dúvida ou sugestão, por favor, deixe comentários. Seu feedback me ajuda a melhorar.

useRef vs. useState em React

Compreensão useRef:

Compreensão useState:

Comparando useRefe useState:

Conclusão:

Obrigado por ler!

Compreensão `useRef`:

Compreensão `useState`:

Comparando `useRef`e `useState`: