Quais as diferenças entre useRef e createRef no React JS

Neste artigo você aprenderá as diferenças entre useRef e createRef, recursos muito utilizados do React JS

Fala programador(a), beleza? Bora aprender mais sobre React JS!

O React proporciona uma série de recursos que facilitam a manipulação e o gerenciamento do DOM. Entre essas ferramentas, encontramos o useRef e o createRef.

Ambos são usados para acessar elementos do DOM de maneira direta, mas possuem características distintas e são recomendados para cenários específicos.

Neste artigo, vamos explorar as diferenças entre useRef e createRef no React, entendendo seus usos, benefícios e melhores práticas associadas.

O que é createRef?

O createRef foi introduzido no React 16.3 e serve para criar referências a elementos do DOM ou a componentes de classe.

Ao criar uma referência com createRef, podemos acessar diretamente o elemento ou componente de classe a que ela se refere.

Exemplo com createRef:

import React, { Component } from 'react';

class MeuComponente extends Component {
  constructor(props) {
    super(props);
    this.minhaRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.minhaRef.current);
  }

  render() {
    return <div ref={this.minhaRef}>Olá, Mundo!</div>;
  }
}

O que é useRef?

Com a introdução dos Hooks no React 16.8, veio o useRef. Assim como o createRef, ele pode ser usado para acessar elementos do DOM, mas também pode manter uma referência “mutável” a um valor que não dispara uma nova renderização ao ser alterado. Isso o torna bastante flexível.

Exemplo com useRef:

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

const MeuComponenteFuncional = () => {
  const minhaRef = useRef(null);

  useEffect(() => {
    console.log(minhaRef.current);
  }, []);

  return <div ref={minhaRef}>Olá, Mundo!</div>;
}

Diferenças Chave entre useRef e createRef

1. Componentes de Classe vs Componentes Funcionais

• createRef: Tradicionalmente usado com componentes de classe.
• useRef: Projetado para ser usado com componentes funcionais, embora também possa ser usado com classes.

2. Persistência de Referência

• createRef: Cria uma nova referência em cada renderização.
• useRef: Mantém a mesma referência entre as renderizações.

3. Uso além do DOM

• createRef: Principalmente usado para referenciar elementos do DOM ou componentes de classe.
• useRef: Pode ser usado para referenciar qualquer valor e não causa renderizações quando alterado.

Quando usar createRef ou useRef?

Apesar de suas diferenças, ambos têm seus lugares no ecossistema React:

• Use createRef em componentes de classe onde você precisa de uma referência a um elemento do DOM ou componente de classe.
• Use useRef em componentes funcionais para os mesmos propósitos, ou quando você precisa manter uma referência a um valor sem disparar renderizações.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Entender as diferenças entre useRef e createRef é essencial para tomar decisões informadas sobre quando usar cada um no React.

Enquanto o createRef é tradicionalmente mais orientado para componentes de classe e cria uma nova referência em cada renderização, o useRef é a solução moderna para componentes funcionais, oferecendo mais flexibilidade ao manter referências a qualquer valor.

Ao escolher entre eles, considere o tipo de componente que você está usando e as necessidades específicas do seu caso de uso.

E, como sempre, consulte a documentação oficial do React e recursos confiáveis para se manter atualizado sobre as melhores práticas e novidades no mundo do React.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.