Como atualizar o state do componente pai em React

Neste artigo você aprenderá a como atualizar o state do componente pai em React JS, uma ação muito importante para todos os projetos!

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

React é uma biblioteca JavaScript poderosa e flexível que oferece a capacidade de criar interfaces de usuário dinâmicas e interativas.

Uma das principais características do React é a sua arquitetura baseada em componentes, onde cada componente tem o seu próprio estado.

Em alguns casos, pode ser necessário atualizar o estado de um componente pai a partir de um componente filho.

Este artigo irá guiá-lo sobre como realizar essa tarefa de maneira eficaz.

Compreendendo o State no React

Antes de discutirmos como atualizar o estado do componente pai, é importante entender o que é o estado em React.

O estado é onde os dados são armazenados em um componente. Os dados armazenados no estado podem mudar ao longo do tempo, e quando essas mudanças ocorrem, o componente é renderizado novamente para refletir as novas informações.

Os componentes em React podem ser classificados em dois tipos: componentes de classe e componentes funcionais.

Nos componentes de classe, o estado é definido no construtor e pode ser atualizado usando o método setState().

Nos componentes funcionais, o estado é definido e atualizado usando o Hook useState().

Vejamos um exemplo simples:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState('Initial State');

  return (
    <div>
      <h1>{state}</h1>
      <ChildComponent setState={setState} />
    </div>
  );
};

const ChildComponent = ({ setState }) => {
  const handleClick = () => {
    setState('State Updated by Child Component');
  };

  return <button onClick={handleClick}>Update Parent State</button>;
};

export default ParentComponent;

Neste exemplo, temos um componente pai e um componente filho. O componente pai tem um estado inicial que é exibido na tela.

O componente filho recebe a função setState do componente pai como propriedade e a usa para atualizar o estado do componente pai quando o botão é clicado.

Passando Funções Como Propriedades

Como você deve ter notado no exemplo acima, a maneira mais comum de atualizar o estado do componente pai a partir do componente filho é passando a função de atualização do estado como uma propriedade para o componente filho.

No exemplo, a função setState é passada para o componente filho. Dentro do componente filho, essa função é invocada quando o botão é clicado. Quando a função setState é chamada, ela atualiza o estado no componente pai, que então causa a re-renderização do componente pai com o novo estado.

Atualizando o Estado do Componente Pai de Forma Assíncrona

Em alguns casos, você pode querer atualizar o estado do componente pai de forma assíncrona. Por exemplo, você pode querer fazer uma chamada de API e atualizar o estado com os dados retornados da chamada de API.

Isso também pode ser feito passando uma função que faz a chamada de API e atualiza o estado para o componente filho.

Lidando com Múltiplos States

Em muitos cenários de aplicativos reais, um componente pode ter vários estados que precisam ser atualizados a partir de um componente filho.

Nestes casos, podemos passar várias funções de atualização de estado para o componente filho.

Aqui está um exemplo:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <h1>{name} is {age} years old.</h1>
      <ChildComponent setName={setName} setAge={setAge} />
    </div>
  );
};

const ChildComponent = ({ setName, setAge }) => {
  const handleNameChange = () => {
    setName('Mike');
  };

  const handleAgeChange = () => {
    setAge(35);
  };

  return (
    <div>
      <button onClick={handleNameChange}>Update Name</button>
      <button onClick={handleAgeChange}>Update Age</button>
    </div>
  );
};

export default ParentComponent;

Neste exemplo, o componente pai tem dois estados, name e age. As funções de atualização de estado correspondentes, setName e setAge, são passadas para o componente filho, onde são usadas para atualizar os estados do componente pai.

Usando Callbacks

Outra maneira de atualizar o estado do componente pai é através do uso de funções de retorno de chamada.

Esta é uma técnica avançada que envolve passar uma função do componente pai para o componente filho, que é então chamado com os novos valores de estado.

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <ChildComponent onIncrement={increment} />
    </div>
  );
};

const ChildComponent = ({ onIncrement }) => {
  return <button onClick={onIncrement}>Increment Count</button>;
};

export default ParentComponent;

Neste exemplo, a função increment é definida no componente pai usando o Hook useCallback. Esta função é então passada para o componente filho e chamada quando o botão é clicado. Isso resulta na atualização do estado do componente pai.

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

Conclusão

Chegamos ao fim do artigo sobre como atualizar o state do componente pai em React JS!

Em React, a atualização do estado do componente pai a partir de um componente filho é uma prática comum.

Isso pode ser alcançado passando a função de atualização do estado do componente pai para o componente filho como uma propriedade.

Ao entender e utilizar adequadamente essa prática, você será capaz de criar aplicações React mais dinâmicas e interativas.

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