Comunicação Pai-Filho em React usando Refs

Gerenciar eficientemente a comunicação entre componentes pai e filho é crucial para construir aplicações React bem estruturadas. Embora props sejam o método preferido para a maioria do fluxo de dados, surgem situações em que um componente pai precisa invocar diretamente uma função dentro de um filho. Este artigo explora como alcançar isso usando refs, focando em melhores práticas e destacando a importância do uso criterioso de refs.

Sumário

• Entendendo Refs no React
• Chamando Funções Filhas de Componentes Pai de Classe
• Chamando Funções Filhas de Componentes Pai Funcionais
• Melhores Práticas e Alternativas

Entendendo Refs no React

Refs fornecem uma maneira de acessar elementos DOM ou instâncias de componentes diretamente. Eles não fazem parte do fluxo de dados do componente React e devem ser usados com moderação. Embora ofereçam acesso direto a componentes filhos, o uso excessivo pode levar a código menos manutenível e mais difícil de testar. Priorize o uso de props para comunicação pai-filho típica sempre que possível.

Chamando Funções Filhas de Componentes Pai de Classe

Em componentes de classe, usamos React.createRef() para criar um ref e atribuí-lo ao componente filho. O pai então acessa a instância do filho e chama seu método.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Função filha chamada!');
  };

  render() {
    return <button onClick={this.myChildFunction}>Clique em Mim</button>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Chamar Função Filha</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

Chamando Funções Filhas de Componentes Pai Funcionais

Componentes funcionais utilizam o hook useRef para funcionalidade similar. O hook useRef retorna um objeto mutável cuja propriedade .current é inicializada como null e persiste entre renders.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Chamar Função Filha</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

Melhores Práticas e Alternativas

Embora refs ofereçam acesso direto, eles tornam o código mais difícil de testar e raciocinar. Considere estas alternativas antes de recorrer a refs:

• Callbacks: Passe uma função do pai para o filho como uma prop. O filho chama esta função quando necessário, passando quaisquer dados necessários de volta para o pai.
• Bibliotecas de Gerenciamento de Estado: Bibliotecas como Redux ou Context API fornecem maneiras mais estruturadas de gerenciar o fluxo de dados e a comunicação entre componentes, tornando sua aplicação mais fácil de manter e escalar.
• Eventos Personalizados: Dispare eventos personalizados do componente filho e ouça-os no pai.

Lembre-se de usar refs criteriosamente. Priorize mecanismos de fluxo de dados mais limpos e previsíveis sempre que possível.