Como acessar o estado do componente filho em React JS

Neste artigo você aprenderá a como acessar o estado do componente filho em React, uma ação muito comum de comunicação entre componentes

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Dentro do ecossistema React JS, uma das dúvidas mais comuns é: “Como posso acessar o estado de um componente filho a partir de seu componente pai?”

O fluxo unidirecional de dados é uma das principais características do React, o que significa que os dados geralmente fluem do componente pai para o filho.

Entretanto, existem situações em que precisamos fazer o contrário.

Neste artigo, vamos explorar métodos otimizados para acessar o estado de um componente filho no React.

O Conceito de Fluxo de Dados Unidirecional

Antes de mergulharmos em soluções, é crucial entender o conceito de fluxo de dados unidirecional em React.

Fluxo Unidirecional e sua Importância

No React, a ideia é que os dados (ou “props”) fluam de cima para baixo. Isso torna a gerência de estados e a detecção de mudanças muito mais previsíveis e eficientes.

Em situações normais, os componentes filhos informam seus pais sobre mudanças através de funções passadas como props, em vez de expor diretamente seu estado.

Levantando o Estado

Uma das abordagens mais comuns para acessar o estado do componente filho é “levantar o estado”.

Em vez de manter o estado no componente filho, você o move para o componente pai, que passa o estado e as funções de manipulação como props para o filho.

Exemplo de Levantamento de Estado

import React, { useState } from 'react';

function Pai() {
  const [valor, setValor] = useState('');

  return (
    <div>
      <Filho valor={valor} setValor={setValor} />
      <div>Valor no componente pai: {valor}</div>
    </div>
  );
}

function Filho(props) {
  return (
    <input
      value={props.valor}
      onChange={(e) => props.setValor(e.target.value)}
    />
  );
}

export default Pai;

Utilizando Callbacks

Se levantar o estado não se adequa à sua situação, outra abordagem é usar uma função callback. Esta função é definida no componente pai, mas é passada e invocada no componente filho.

Exemplo Utilizando Callback

import React, { useState } from 'react';

function Pai() {
  const receberDadosDoFilho = (data) => {
    console.log("Dados recebidos do filho:", data);
  };

  return <Filho callback={receberDadosDoFilho} />;
}

function Filho(props) {
  const [nome, setNome] = useState('');

  const enviarDados = () => {
    props.callback(nome);
  };

  return (
    <div>
      <input value={nome} onChange={(e) => setNome(e.target.value)} />
      <button onClick={enviarDados}>Enviar dados para o pai</button>
    </div>
  );
}

export default Pai;

Refs com uso do useRef

Em alguns casos, você pode querer usar a referência (ref) de um componente filho para acessar seu estado diretamente.

No entanto, isso vai contra a ideia de fluxo unidirecional e é geralmente desencorajado.

Ainda assim, é bom estar ciente dessa possibilidade.

Exemplo usando useRef

import React, { useRef, useState } from 'react';

function Pai() {
  const filhoRef = useRef(null);

  const mostrarEstadoDoFilho = () => {
    alert(filhoRef.current.getNome());
  };

  return (
    <div>
      <Filho ref={filhoRef} />
      <button onClick={mostrarEstadoDoFilho}>Mostrar estado do filho</button>
    </div>
  );
}

const Filho = React.forwardRef((props, ref) => {
  const [nome, setNome] = useState('Carlos');

  // Expondo uma função para o componente pai
  ref.current = {
    getNome: () => nome,
  };

  return <div>O nome é {nome}</div>;
});

export default Pai;

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Embora o fluxo unidirecional de dados em React torne a manipulação de estados mais previsível, existem várias maneiras de acessar o estado de um componente filho quando necessário.

O levantamento de estado e o uso de callbacks são abordagens recomendadas, enquanto o uso direto de refs deve ser usado com cautela.

Sempre avalie a estrutura de seus componentes e escolha o método que melhor se adequa à sua situação, mantendo o código limpo e eficiente.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.