Como usar Refs no React
O que são as Refs no React?
As Refs (abreviação de "referências") permitem acessar um elemento DOM ou um componente React de maneira direta, sem passar pelo fluxo regular de dados do React. As Refs são úteis para interagir com elementos que precisam ser manipulados de forma imperativa, como formulários, inputs, ou componentes externos que não podem ser gerenciados pelo fluxo padrão de estado e props.
Para criar uma referência, utiliza-se o hook useRef em componentes funcionais ou React.createRef() em componentes de classe. A referência criada pode então ser atribuída a um elemento e usada para manipular seu estado.
Exemplos de uso de Refs no React
1. Acessar um Input para gerenciá-lo
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focalizar Input</button>
</div>
);
}
Neste exemplo, useRef é utilizado para focar no input quando o botão é clicado.
2. Reprodução de vídeo
import React, { useRef } from 'react';
function VideoPlayer() {
const videoRef = useRef(null);
const playVideo = () => {
videoRef.current.play();
};
return (
<div>
<video ref={videoRef} width="320" height="240">
<source src="video.mp4" type="video/mp4" />
</video>
<button onClick={playVideo}>Reproduzir</button>
</div>
);
}
Este exemplo mostra como usar Refs para controlar a reprodução de um vídeo.
3. Armazenar valores sem provocar renderização
import React, { useRef, useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
const increment = () => {
countRef.current += 1;
setCount(countRef.current);
};
return (
<div>
<p>Valor do contador: {count}</p>
<button onClick={increment}>Incrementar</button>
</div>
);
}
Aqui é mostrado como usar Refs para armazenar um valor sem que o componente seja renderizado novamente cada vez que o valor muda.
Referência oficial
Para mais detalhes sobre Refs no React, visite a documentação oficial do React.
Jorge García
Fullstack developer