React forwardRef
O React.forwardRef permite o compartilhamento de refs entre componentes, possibilitando maior flexibilidade na composição e reutilização de código. Essa funcionalidade é especialmente útil em situações em que você precisa acessar ou manipular diretamente o DOM ou um componente filho imperativamente.
O forwardRef é utilizado para encaminhar a ref de um componente pai para um de seus componentes filhos, mesmo que o componente filho esteja encapsulado em outro componente intermediário. Isso resolve o problema de não conseguir acessar a ref de um componente filho diretamente quando ele é renderizado dentro de um componente pai.
Sintaxe
A sintaxe básica do React.forwardRef envolve a criação de um componente funcional ou de classe e, em seguida, utilizando forwardRef para passar a ref para o componente interno desejado.
import React, { forwardRef } from 'react';
const MyComponent = forwardRef((props, ref) => {
return <div ref={ref}>Conteúdo do Componente</div>;
});
const ParentComponent = () => {
const myComponentRef = useRef();
return <MyComponent ref={myComponentRef} />;
};Uso Comum
Encapsulamento de componentes
Imagine um cenário em que você tem um componente reutilizável, mas deseja garantir que alguns elementos internos específicos estejam acessíveis fora do componente. O forwardRef permite que você exponha uma ref para esses elementos internos.
import React, { forwardRef } from 'react';
const ReusableComponent = forwardRef((props, ref) => {
return (
<div>
<p>Conteúdo interno</p>
<input ref={ref} />
</div>
);
});
const ParentComponent = () => {
const inputRef = useRef();
return <ReusableComponent ref={inputRef} />;
};O React.forwardRef é uma ferramenta valiosa para aprimorar a composição de componentes e fornecer maior controle sobre as refs no ecossistema React. Ao entender seu uso e aplicação, você pode criar componentes mais flexíveis e reutilizáveis em suas aplicações React.