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!
Top comments (0)