React: qual a diferença entre props e state

Neste artigo você vai aprender a diferença entre props e state no React, quando e como utilizar cada uma das formas de salvar valores

Fala programador(a), beleza? Bora aprender mais sobre React e também seus recursos: props e state!

Podemos definir props como valores herdados de outros componentes

Normalmente são valores estáticos, pois receberemos as props via state e as props serão utilizadas no componente que as recebe

Já o state serve para justamente trabalhar internamente no componente

E ainda ser passado para um componente filho por meio de props, para este valor ser utilizado no mesmo

Veja um exemplo de state:

class Teste extends React.Component {
  constructor(props) {
    super(props);
    this.state = {nome: "Matheus"};
  }

  render() {
    return (
      <p>{this.state.nome}</p>
    );
  }
}

ReactDOM.render(
  <Teste />,
  document.getElementById('root')
);

Aqui o componente Teste tem um state com um nome, que é utilizado no próprio componente

Agora vamos ver um caso de props:

class Teste extends React.Component {
  constructor(props) {
    super(props);
    this.state = {nome: "Matheus"};
  }

  render() { 
    return (
      <ExibirNome nome={this.state.nome} />
    );
  }
}

function ExibirNome(props) {
  
  return <p>Olá {props.nome}</p>;
  
}

ReactDOM.render(
  <Teste />,
  document.getElementById('root')
);

Aqui neste caso passamos o state de nome para o componente ExibirNome via props, e utilizamos para exibir o nome do usuário com uma tratativa

Desta forma vemos as diferenças nítidas entre states e props

Conclusão

Neste artigo vimos a diferença entre props e state

Basicamente o state é a forma que temos como inserir dados em um componente e também passá-los via props

Já as props são os states recebidos de outros componentes, onde podemos utilizar no componente que as recebe

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube