Como alterar valor de props de componente React

Neste artigo você vai aprender a como alterar valor de props de componente utilizando a biblioteca React, vem conferir!

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

Em React, os componentes podem ter propriedades (props) que são passadas de um componente pai para um componente filho.

As props são usadas para passar informações e configurações para um componente e podem ser alteradas dinamicamente ao longo do tempo.

No entanto, é importante lembrar que as props são imutáveis ​​e não podem ser alteradas diretamente dentro do componente filho.

Neste artigo, vamos explorar algumas abordagens diferentes para alterar o valor de uma prop de componente em React.

Usando estados

Uma maneira comum de alterar o valor de uma prop de componente em React é usando estados.

Os estados permitem armazenar e gerenciar valores que podem ser atualizados dinamicamente.

function MeuComponente(props) {
  const [nome, setNome] = useState(props.nome);

  function atualizarNome() {
    setNome("Novo nome");
  }

  return (
    <div>
      <h1>Nome: {nome}</h1>
      <button onClick={atualizarNome}>Atualizar nome</button>
    </div>
  );
}

Neste exemplo, estamos usando o hook useState para armazenar o valor da prop “nome” e o método setNome para atualizar o valor do estado.

Em seguida, usamos o novo valor do estado na renderização do componente.

Passando uma função como prop

Outra abordagem para alterar o valor de uma prop de componente é passar uma função como prop para o componente filho.

A função pode ser usada para atualizar a prop no componente pai.

function MeuComponente(props) {
  function atualizarNome() {
    props.atualizarNome("Novo nome");
  }

  return (
    <div>
      <h1>Nome: {props.nome}</h1>
      <button onClick={atualizarNome}>Atualizar nome</button>
    </div>
  );
}

Neste exemplo, estamos passando uma função chamada “atualizarNome” como prop para o componente filho.

A função é usada para atualizar a prop “nome” no componente pai.

Usando contextos

Os contextos são outra maneira de compartilhar informações entre componentes em React.

Um contexto é basicamente um objeto que pode ser acessado por qualquer componente filho sem passá-lo explicitamente como uma prop.

const MeuContexto = React.createContext();

function MeuComponente(props) {
  const meuContexto = useContext(MeuContexto);

  function atualizarNome() {
    meuContexto.setNome("Novo nome");
  }

  return (
    <div>
      <h1>Nome: {meuContexto.nome}</h1>
      <button onClick={atualizarNome}>Atualizar nome</button>
    </div>
  );
}

function MeuComponentePai() {
  const [nome, setNome] = useState("Nome original");

  return (
    <MeuContexto.Provider value={{ nome, setNome }}>
      <MeuComponente />
    </MeuContexto.Provider>
  );
}

Neste exemplo, estamos criando um contexto chamado “MeuContexto” e usando o hook useContext para acessar as informações compartilhadas pelo contexto.

O valor do contexto é definido no componente pai usando a tag Provider.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Chegamos então ao fim do artigo de alterar valor de props de componente em React!

Alterar o valor de uma prop de componente em React é uma tarefa importante que pode ser realizada usando várias abordagens diferentes.

As abordagens discutidas neste artigo incluem o uso de estados, passando uma função como prop e usando contextos.

O uso de estados é uma das maneiras mais comuns de alterar o valor de uma prop em React, pois os estados permitem armazenar e gerenciar valores que podem ser atualizados dinamicamente.

Passar uma função como prop é uma opção eficaz para atualizar o valor da prop no componente pai.

O uso de contextos é uma opção útil para compartilhar informações entre componentes sem passar explicitamente como uma prop.

Independentemente da abordagem escolhida, é importante lembrar que as props são imutáveis ​​e não podem ser alteradas diretamente dentro do componente filho.

É necessário gerenciar as props de forma adequada para garantir que o componente funcione corretamente e com eficiência.

Com a prática e a experiência em React, você pode desenvolver seu próprio estilo e preferência na escolha da melhor abordagem para cada situação.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Por que as props são imutáveis?

Antes de sair mexendo, vale entender o porquê, né?

Em React o dado desce de cima pra baixo: quem cria o valor é o pai, quem recebe é o filho

O filho só LÊ

Se o filho pudesse escrever na prop, o mesmo dado teria dois donos, e aí você nunca sabe quem alterou o quê quando a tela renderiza errado

Repara que isso não briga com a ideia de prop mudar de valor: ela muda sim, mas quem muda é o pai, mandando um valor novo na próxima renderização

Ou seja, a prop é uma foto do estado do pai naquele momento

Sacou a diferença? "Alterar a prop" na real é "pedir pro dono do dado alterar"

É tipo mexer no ar condicionado da sala do vizinho: você não vira o botão, você pede pra ele virar 😀

Guarda isso porque as três abordagens abaixo são, no fundo, três jeitos diferentes de fazer esse pedido

Cuidado com a fonte de verdade duplicada:

Esse padrão de jogar a prop dentro de um estado resolve, mas cobra um preço

A partir do momento que o filho guarda o valor, existem DOIS lugares guardando a mesma informação: o pai e o filho

E duas fontes de verdade é receita de bug chato, daqueles que só aparecem na tela do cliente kkk

A pergunta que resolve é simples: quem é o dono desse dado?

Se o valor só interessa pro filho (um input aberto, uma aba selecionada, um "ver mais" expandido), copiar pro estado local é ótimo

Se o valor interessa pro pai ou pra outros componentes da tela, não copia: elevar o estado pro pai e mandar de volta pra baixo é o caminho

Esse "elevar o estado" é exatamente o que a próxima seção faz passando uma função como prop

Tome cuidado! Se você copiou pro estado e depois estranhou a tela mostrando um valor velho, quase sempre é isso: você está lendo a cópia, não o original

Qual abordagem usar em cada caso?

Tem gente que sai de estado pra contexto direto porque leu que contexto é mais moderno

Não é bem assim…

Os três resolvem o mesmo problema em distâncias diferentes, se liga:

Estado no próprio componente: o dado nasce e morre ali dentro, ninguém mais precisa saber

Acordeão, campo de busca, modal aberto ou fechado, esse tipo de coisa

Função como prop: o dono do dado é o pai e o filho precisa avisar que algo aconteceu

É o caso mais comum do dia a dia, e é o que a galera chama de elevar o estado

Funciona muito bem enquanto a distância entre pai e filho é curta

Contexto: o mesmo dado é lido por vários componentes espalhados, em níveis diferentes da árvore

Tema claro/escuro, usuário logado, idioma da interface

Se você percebeu que está passando a mesma prop por três, quatro componentes só pra ela chegar lá embaixo, é sinal de contexto

A regra prática que eu uso: começa no mais simples e só sobe de nível quando a dor aparecer

Contexto pra tudo transforma seu app numa variável global gigante, e aí boa sorte pra descobrir quem mudou o quê 😛

Um teste rápido pra fixar:

Bora ver na prática?

Pega um componente qualquer do teu projeto e responde três perguntas:

1. Quem é o dono desse dado, o pai ou o filho?

2. Alguém além desses dois precisa ler o mesmo valor?

3. Estou guardando esse valor em mais de um lugar sem precisar?

Se o dono é o filho, estado local resolve

Se o dono é o pai, função como prop

Se o valor é lido por meia dúzia de componentes espalhados, contexto

Faça o teste em um componente hoje mesmo, é o tipo de coisa que só entra na cabeça mexendo no código de verdade =)

Por que as props são imutáveis?

Antes de sair mexendo, vale entender o porquê, né?

Em React o dado desce de cima pra baixo: quem cria o valor é o pai, quem recebe é o filho

O filho só LÊ

Se o filho pudesse escrever na prop, o mesmo dado teria dois donos, e aí você nunca sabe quem alterou o quê quando a tela renderiza errado

Repara que isso não briga com a ideia de prop mudar de valor: ela muda sim, mas quem muda é o pai, mandando um valor novo na próxima renderização

Ou seja, a prop é uma foto do estado do pai naquele momento

Sacou a diferença? "Alterar a prop" na real é "pedir pro dono do dado alterar"

É tipo mexer no ar condicionado da sala do vizinho: você não vira o botão, você pede pra ele virar 😀

Guarda isso porque as três abordagens abaixo são, no fundo, três jeitos diferentes de fazer esse pedido

Cuidado com a fonte de verdade duplicada:

Esse padrão de jogar a prop dentro de um estado resolve, mas cobra um preço

A partir do momento que o filho guarda o valor, existem DOIS lugares guardando a mesma informação: o pai e o filho

E duas fontes de verdade é receita de bug chato, daqueles que só aparecem na tela do cliente kkk

A pergunta que resolve é simples: quem é o dono desse dado?

Se o valor só interessa pro filho (um input aberto, uma aba selecionada, um "ver mais" expandido), copiar pro estado local é ótimo

Se o valor interessa pro pai ou pra outros componentes da tela, não copia: elevar o estado pro pai e mandar de volta pra baixo é o caminho

Esse "elevar o estado" é exatamente o que a próxima seção faz passando uma função como prop

Tome cuidado! Se você copiou pro estado e depois estranhou a tela mostrando um valor velho, quase sempre é isso: você está lendo a cópia, não o original

Qual abordagem usar em cada caso?

Tem gente que sai de estado pra contexto direto porque leu que contexto é mais moderno

Não é bem assim…

Os três resolvem o mesmo problema em distâncias diferentes, se liga:

Estado no próprio componente: o dado nasce e morre ali dentro, ninguém mais precisa saber

Acordeão, campo de busca, modal aberto ou fechado, esse tipo de coisa

Função como prop: o dono do dado é o pai e o filho precisa avisar que algo aconteceu

É o caso mais comum do dia a dia, e é o que a galera chama de elevar o estado

Funciona muito bem enquanto a distância entre pai e filho é curta

Contexto: o mesmo dado é lido por vários componentes espalhados, em níveis diferentes da árvore

Tema claro/escuro, usuário logado, idioma da interface

Se você percebeu que está passando a mesma prop por três, quatro componentes só pra ela chegar lá embaixo, é sinal de contexto

A regra prática que eu uso: começa no mais simples e só sobe de nível quando a dor aparecer

Contexto pra tudo transforma seu app numa variável global gigante, e aí boa sorte pra descobrir quem mudou o quê 😛

Um teste rápido pra fixar:

Bora ver na prática?

Pega um componente qualquer do teu projeto e responde três perguntas:

1. Quem é o dono desse dado, o pai ou o filho?

2. Alguém além desses dois precisa ler o mesmo valor?

3. Estou guardando esse valor em mais de um lugar sem precisar?

Se o dono é o filho, estado local resolve

Se o dono é o pai, função como prop

Se o valor é lido por meia dúzia de componentes espalhados, contexto

Faça o teste em um componente hoje mesmo, é o tipo de coisa que só entra na cabeça mexendo no código de verdade =)