Este é o quarto artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.
O hook useRef
é muito útil para criar uma referência a um elemento DOM ou a um valor dentro de um componente funcional. Ele é frequentemente usado para acessar elementos DOM ou para armazenar valores que não precisam ser renderizados novamente quando o componente é atualizado.
Aplicabilidades do useRef
Armazenar uma referência a um elemento DOM:
Aqui está um exemplo de código de como o useRef
pode ser usado para armazenar uma referência a um elemento DOM:
Neste exemplo, o useRef
é usado para criar uma referência ao elemento input
. A referência é armazenada na variável inputElement
. Em seguida, a referência é passada para o atributo ref
do elemento input
usando o sintaxe ref={inputElement}
.
Quando o botão é clicado, a função handleButtonClick
é chamada. Ela usa a propriedade current
da referência para acessar o elemento input
e chama o método focus
nele. Isso faz com que o cursor de entrada de texto seja colocado no elemento input
.
1. Emprego do useRef em um elemento de lista
O caso abaixo mostra como usar o hook useRef
para armazenar uma referência a um elemento de lista e adicionar itens dinamicamente:
1 - O hook useRef
é importado do módulo react
, assim como o hook useState
.
2 - A função MyListComponent
é criada, que renderiza o elemento de lista e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef
e a armazena na variável listRef
. O argumento inicial null
é passado para a função useRef
.
4 - O hook useState
é usado para armazenar os itens da lista na variável items
.
5 - A referência é passada para o atributo ref
do elemento de lista usando a sintaxe ref={listRef}
. Isso faz com que a instância do elemento seja armazenada na propriedade current
da referência.
6 - A função handleButtonClick
é criada para adicionar um novo item à lista e atualizar o scroll da lista para a última posição quando o botão é clicado. Ela usa o hook useState
para adicionar um novo item à lista e atualiza a propriedade scrollTop
da propriedade current
da referência listRef
para a altura total da lista usando a propriedade scrollHeight
.
7 - O elemento de lista e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick
é chamada e um novo item é adicionado à lista e o scroll da lista é atualizado para a última posição.
2. Hook useRef em Dropdown de menu suspenso
Imagine que você tenha um componente Dropdown
que renderiza um menu suspenso com uma lista de opções. Você pode usar o useRef
para armazenar uma referência ao elemento ul
que representa o menu suspenso e, em seguida, usar essa referência para controlar a exibição do menu suspenso através da alteração da propriedade display
do estilo do elemento:
1 - O componente Dropdown
recebe um array de opções como propriedade.
2 - O componente usa o useRef
para criar uma referência ao elemento ul
que representa o menu suspenso. Essa referência é armazenada na variável dropdownEl
.
3 - O componente define uma função de manipulador de evento chamada handleToggleDropdown
que é chamada quando o botão "Menu suspenso" é clicado. Essa função verifica o valor da propriedade display
do elemento ul
e altera esse valor para "block" ou "none", dependendo do seu estado atual.
4 - O componente renderiza um botão com o texto "Menu suspenso" e um elemento ul
com as opções passadas como propriedade. O elemento ul
é passado a referência criada pelo useRef
através do atributo ref
e é inicialmente oculto com a propriedade display
definida como "none". Quando o botão é clicado, a função handleToggleDropdown
é chamada e altera a propriedade display
do elemento ul
, exibindo ou ocultando o menu suspenso.
3. Armazenar uma referência a um valor
O hook useRef
pode ser usado para armazenar uma referência a um valor em um componente funcional do React.
Ele é útil para armazenar valores que não mudam frequentemente, como referências a elementos do DOM, mas também pode ser usado para armazenar qualquer tipo de valor.
Por exemplo, imagine que você tenha um formulário em uma aplicação React e deseja obter o valor do input
quando o usuário submete o formulário:
1 - O componente de formulário é criado usando a função Form
.
2 - Dentro da função Form
, é criada uma referência ao elemento de input usando a função useRef
. A referência é inicializada com o valor null
.
3 - É definida uma função de manipulador de envio, que é chamada quando o formulário é submetido. A função chama event.preventDefault()
para evitar que a página seja recarregada pelo navegador.
4 - A função de manipulador de envio obtém o valor do elemento de input usando inputEl.current.value
.
5 - A função de manipulador de envio chama a função submitForm
com o valor do input como argumento.
6 - O componente é renderizado como um elemento form
do HTML, com um manipulador de envio atribuído ao atributo onSubmit
. Ele também renderiza um elemento label
e um elemento input
como filhos do elemento de formulário, além de um botão de envio.
7 - Quando o usuário preenche o campo de entrada e clica no botão de envio, o componente obtém o valor do campo de entrada e chama a função submitForm
com esse valor como argumento.
4. Armazenar referência a um objeto de websocket
O useRef
é útil para armazenar valores que não precisam ser renderizados novamente quando o componente é atualizado. Por exemplo, você pode usar o useRef
para armazenar uma referência a um objeto de websocket, como este:
1 - Neste exemplo, o hook useRef
é usado para criar uma referência para o objeto WebSocket
. A referência é armazenada na variável socketRef
.
2 - Em seguida, o hook useEffect
é usado duas vezes para configurar e limpar o objeto WebSocket
. A primeira vez, o useEffect
é usado para criar um novo objeto WebSocket
quando o componente é montado. A segunda vez, o useEffect
é usado para fechar o objeto WebSocket
quando o componente é desmontado.
3 - Por fim, uma função sendMessage
é criada que usa a referência para enviar mensagens pelo WebSocket
. O componente renderiza um botão que, quando clicado, chama a função sendMessage
para enviar uma mensagem pelo WebSocket
.
O hook useRef
é útil neste exemplo porque permite armazenar a referência ao objeto WebSocket
de forma que ela não seja atualizada quando o componente é atualizado. Isso é útil porque o objeto WebSocket
não precisa ser recriado toda vez que o componente é renderizado novamente. Em vez disso, ele pode ser acessado diretamente através da referência armazenada no useRef
.
Armazenar uma referência a uma instância de um componente de terceiros:
O hook useRef
também pode ser usado para armazenar uma referência a uma instância de um componente de terceiros em um componente funcional do React.
Alguns exemplos de componentes de terceiros cujos métodos podem ser acessados usando o useRef
incluem bibliotecas de mapas, bibliotecas de gráficos, bibliotecas de edição de texto, entre outros.
1. Hook useRef para acessar a instância de um componente de mapa
O exemplo abaixo mostra como usar o hook useRef
para armazenar uma referência a uma instância de um componente de mapa de terceiros, neste caso o componente GoogleMap
:
1 - O hook useRef
é importado do módulo react
e o componente GoogleMap
é importado de uma biblioteca de mapas.
2 - A função MyMapComponent
é criada, que renderiza o componente GoogleMap
e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef
e a armazena na variável mapRef
. O argumento inicial null
é passado para a função useRef
.
4 - A referência é passada para o atributo ref
do componente GoogleMap
usando a sintaxe ref={mapRef}
. Isso faz com que a instância do componente seja armazenada na propriedade current
da referência.
5 - A função handleButtonClick
é criada para recentralizar o mapa quando o botão é clicado. Ela usa a propriedade current
da referência mapRef
para acessar o método recenter
do componente de mapa e passa as coordenadas de latitude e longitude como argumento.
6 - O componente GoogleMap
e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick
é chamada e o mapa é recentralizado nas coordenadas especificadas.
2. useRef para acessar bilbiotecas de gráficos
O modelo abaixo mostra como usar o hook useRef
para armazenar uma referência a uma instância de um componente de gráfico de terceiros, neste caso o componente Chart
:
1 - O hook useRef
é importado do módulo react
e o componente Chart
é importado de uma biblioteca de gráficos.
2 - A função MyChartComponent
é criada, que renderiza o componente Chart
e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef
e a armazena na variável chartRef
. O argumento inicial null
é passado para a função useRef
.
4 - A referência é passada para o atributo ref
do componente Chart
usando a sintaxe ref={chartRef}
. Isso faz com que a instância do componente seja armazenada na propriedade current
da referência.
5 - A função handleButtonClick
é criada para atualizar os dados do gráfico quando o botão é clicado. Ela usa a propriedade current
da referência chartRef
para acessar o método update
do componente de gráfico e passa um novo conjunto de dados como argumento.
6 - O componente Chart
e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick
é chamada e os dados do gráfico são atualizados com os novos valores.
3. Hook useRef para armazenar uma referência a um componente de edição de texto
Ainda, podemos utilizar o useRef
para armazenar uma referência a uma instância de um componente de edição de texto de terceiros, neste caso o componente Quill
:
1 - O hook useRef
é importado do módulo react
e o componente Quill
é importado de uma biblioteca de edição de texto.
2 - A função MyEditorComponent
é criada, que renderiza o componente Quill
e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef
e a armazena na variável editorRef
. O argumento inicial null
é passado para a função useRef
.
4 - A referência é passada para o atributo ref
do componente Quill
usando a sintaxe ref={editorRef}
. Isso faz com que a instância do componente seja armazenada na propriedade current
da referência.
5 - A função handleButtonClick
é criada para limpar o conteúdo do editor quando o botão é clicado. Ela usa a propriedade current
da referência editorRef
para acessar o método setText
do componente de edição de texto e passa uma string vazia como argumento.
6 - O componente Quill
e o botão são renderizados no retorno da função.
Conclusão
O useRef
é um hook do React que permite armazenar uma referência a um valor. Ele é útil para armazenar valores que não mudam frequentemente, como referências a elementos do DOM, mas também pode ser usado para armazenar qualquer tipo de valor. O useRef
é um jeito conveniente de acessar elementos do DOM em uma aplicação React e pode ser usado em conjunto com outros hooks, como o useEffect
, para realizar tarefas em resposta a mudanças no estado ou propriedades de um componente.
Um dos usos mais comuns do useRef
é para acessar valores de elementos do DOM em uma aplicação React. Por exemplo, o useRef
pode ser usado para obter o valor de um campo de entrada em um formulário ou para obter a altura ou largura de um elemento na página. Além disso, o useRef
pode ser usado para armazenar instâncias de objetos de terceiros, como bibliotecas de mapas ou gráficos, e acessar os métodos e propriedades desses objetos.
A importância do useRef
reside em sua capacidade de fornecer acesso a valores que não são gerenciados pelo estado do React ou pelas props de um componente. Isso é especialmente útil em situações em que você deseja acessar ou alterar valores em resposta a eventos ou mudanças no estado do componente, mas não quer renderizar o componente novamente quando esses valores mudam.
Portanto, o useRef
é uma ferramenta útil para acessar e armazenar valores em uma aplicação React e pode ser usado em conjunto com outros hooks para realizar tarefas em resposta a mudanças no estado ou propriedades de um componente. Ao usar o useRef
, é importante lembrar de atribuir a referência ao atributo ref
do elemento ao qual você deseja ter acesso e lembrar de usar .current
para acessar o valor armazenado na referência.
Top comments (0)