Desmistificando os tipos do React: tipos de referência

Ao trabalhar com TypeScript no ReactJS, usar refs em componentes funcionais requer um pouco de cuidado extra para garantir a segurança do tipo. Neste artigo, exploraremos os tipos de referências mais usados ​​e relevantes disponíveis em componentes funcionais baseados em TypeScript.

React.RefObject

O React.RefObjecttipo é a maneira mais comum de trabalhar com referências em componentes funcionais. É usado quando você cria uma referência usando o useRefgancho e deseja acessar o valor atual da referência. Um contêiner de referência somente leitura onde a currentpropriedade não pode ser alterada.

Aqui está um exemplo de uso React.RefObject:

import { useRef } from 'react';

export const MyComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

Neste exemplo, criamos uma ref chamada inputRefusando o useRefgancho e especificamos o tipo como HTMLInputElement.

Não lembre aqui que ao usar useRef, se o valor passado inicialmente for null, o TypeScript o entenderá automaticamente como um React.RefObject. Se você quiser que seja React.MutableRefObjectAND o valor inicial seja null, o truque simples é simplesmente defini-lo como:

const inputRef = useRef<HTMLInputElement | null>(null);

React.MutableRefObject

O React.MutableRefObjecttipo é semelhante a React.RefObject, mas permite que a currentpropriedade do ref seja mutável. Isto pode ser útil em cenários onde você precisa atualizar o valor da referência diretamente, sem acionar uma nova renderização.

Aqui está um exemplo de uso React.MutableRefObject:

import { useRef } from 'react';

export const MyComponent = () => {
  const counterRef = useRef<number>(0);

  const handleClick = () => {
    counterRef.current++;
    console.log('Counter value:', counterRef.current++);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment Counter</button>
    </div>
  );
};

React.RefCallback

O React.RefCallbacktipo é usado quando você precisa acessar o elemento DOM ou o componente React em um momento específico, como quando o componente é montado ou desmontado. Isso pode ser particularmente útil quando você trabalha com bibliotecas de terceiros que exigem acesso direto ao DOM, ou quando você precisa realizar manipulações complexas do DOM, ou quando precisa gerenciar uma lista de refs. Seu tipo é definido como:

type RefCallback<T> = (instance:  T  |  null) =>  void;

Abaixo está um exemplo de uso React.RefCallbackpara medir o tamanho de um elemento e atualizar o estado do componente de acordo. Isso pode ser útil em cenários onde você precisa implementar layouts responsivos ou elementos de UI dinâmicos.

import { useState, useCallback } from 'react';

export const MyComponent = () => {
  const [elementSize, setElementSize] = useState<{ width: number; height: number }>({
    width: 0,
    height: 0,
  });

  const handleElementRef: React.RefCallback<HTMLDivElement> = useCallback((element) => {
    if (!element) return;

    const { offsetWidth, offsetHeight } = element;

    setElementSize({ width: offsetWidth, height: offsetHeight });
  }, []);

  return (
    <div ref={handleElementRef}>
      <p>Element size: {elementSize.width} x {elementSize.height}</p>
    </div>
  );
};

React.Ref

React.Refé basicamente um tipo de união de todas as formas possíveis para referências do React. Você pode entender isso como:

type  Ref<T> = RefCallBack<T> |  RefObject<T> |  null;

React.ForwardedRef

O React.ForwardedRef tipo é usado quando você precisa encaminhar uma referência de um componente pai para um componente filho. Isso é particularmente útil quando você está trabalhando com componentes reutilizáveis ​​e precisa acessar o elemento DOM subjacente ou o componente React, ou se houver um objeto ref personalizado criado no componente filho usando useImperativeHandle.

Aqui está um exemplo de uso React.ForwardedRef:

import { forwardRef, Ref } from 'react';

interface InputProps {
  value: string;
  onChange: (value: string) => void;
}

const InputBase = ({ value, onChange }: InputProps, ref: React.ForwardedRef<HTMLInputElement>) => {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      ref={ref}
    />
  );
});

export const Input = forwardRef(InputBase);

Neste exemplo, usamos a forwardReffunção para criar um componente de encaminhamento de referência, que permite que o componente pai acesse o inputelemento subjacente.

React.LegacyRef

O React.LegacyReftipo é usado quando você precisa trabalhar com referências de uma forma que seja compatível com versões mais antigas do React. Este tipo é usado principalmente para componentes baseados em classe, que são menos comuns no desenvolvimento moderno do React.

É importante observar que a refpropriedade de todo elemento HTML primitivo no React atualmente possui o tipo React.LegacyRef<HTMLElementType>. Isso significa que se você estiver trabalhando com um divelemento, o tipo da refpropriedade provavelmente será React.LegacyRef<HTMLDivElement>.

Na verdade, você não precisaria se preocupar com esse tipo em seus projetos React.

🏁 Conclusão

Neste artigo, exploramos os tipos mais populares de referências disponíveis no React, incluindo React.RefObject, React.MutableRefObject, React.RefCallback, React.Ref, React.ForwardedRefe React.LegacyRef. Ao compreender esses tipos, você terá mais confiança ao navegar em um projeto React escrito em TypeScript. Fique ligado em mais artigos sobre React e TypeScript, onde nos aprofundaremos nos recursos mais recentes e nas práticas recomendadas para a construção de aplicativos robustos e escalonáveis.