DEV Community

loading...
Cover image for Quando usar Refs no React?

Quando usar Refs no React?

araujocristian profile image Cristian Araujo Originally published at araujocristian.netlify.app ・1 min read

Ao conhecer os "refs" pensamos que é algo ótimo e que deve ser usado a todo momento para facilitar o acesso de elementos e componentes. Porém, isso é um erro grave.

Ficar criando referências é algo custoso e consome memória. É muito mais simples, leve e até melhor para a manutenção e reutilização de código se você utilizar refs apenas em situações em que não há outra solução, como:

  • Executar "focus()" em um <input>;
  • Dar "play" ou "pause" em um <vídeo>;
  • Acessar o elemento <canvas> para desenhar;
  • Disparar animações imperativas;
  • Acessar elementos criados por uma outra biblioteca ou framework.

Fora essas situações, normalmente podemos evitar o uso de refs.

Por exemplo, ao invés de acessar o estado de um componente filho para alterar um dado dele, você pode passar dados ao filho pelas suas propriedades.

O elemento <dialog> do HTML exibe uma modal. Se você acessá-lo, poderá exibi-lo executando o método "showModal()" e escondê-lo executando "close()".

Porém, o <dialog> também pode ser controlado pelo atributo "open". Então é melhor criar uma variável no "state" para controlar o atributo "open" ao invés de criar um "ref" para executar "showModal()" e "close()".

A Saideira

Esse post foi inspirado no conteúdo lá da TreinaWeb. Recomendo o material deles!

Discussion (0)

Forem Open with the Forem app