Diferença entre props e state no React.js

Na biblioteca de construção de interfaces gráficas para a web, o React.js, destacam-se dois principais conceitos que, são de extrema importância o conhecimento deles, que seriam as props e o state em uma aplicação React. Para algumas pessoas, ambos podem significar a mesma coisa, mas são conceitos distintos e, no presente artigo, a diferença entre os dois será comentada.

Antes de mais nada, props seriam as propriedades que um componente possui e podem ser várias. Já o state seria o estado da aplicação, como é gerenciado com as variáveis utilizando o hook useState.

A diferença básica entre props e state no React seria que, as props são constantes e não podem ter seu valor alterado por ações do usuário, tais como clicar em um botão, submeter um formulário, etc. Já no state, os valores podem ser alterados mediante a ação do usuário.

Vamos entender na prática como isso funciona. Imagine esse componente declarado por você, no caso a função produto, que retorna uma frase com a tag h2:

	function Produto() {
	return <h2>Olá, {props.nome}, você comprou o produto {props.produto}, pelo preço de {props.preco}</h2>
	}


	function App() {
	return (
	<div>
	<Produto nome="Luis" produto="Feijão" preco="R$ 4,22" />
	<Produto nome="Fernanda" produto="Farinha de mandioca" preco="R$ 3,29" />
	<Produto nome="Hernandes" produto="Fubá mimoso" preco="R$ 2,99" />
	</div>
	);
	}

	export default App;

view raw final.js hosted with ❤ by GitHub

Ao invocar o componente, você está passando algumas propriedades a ele, tais como:

nome: nome do(a) comprador(a);
produto: nome do produto;
preco: preço do produto;

Essas propriedades que você está passando ao componente são valores que não podem ser alterados pelo usuário, independentemente da ação que ele fizer, pois, esses valores são imutáveis, similares com variáveis constantes que são declaradas.

Já no state, para alterar o valor inicial, utilizando o hook useState, no exemplo abaixo:

Ao invocar o componente, você está passando algumas propriedades a ele, tais como:

nome: nome do(a) comprador(a);
produto: nome do produto;
preco: preço do produto;

Já no state, para alterar o valor inicial, utilizando o hook useState, no exemplo abaixo:

	import React, { useState } from 'react'

	function App() {

	const [contador, setContador] = useState(0);

	const handleIncrement = () => {
	setContador(contador + 1);
	}
	const handleDecrement = () => {
	setContador(contador - 1);
	}
	return (
	<div>
	<button onClick={handleIncrement}>Incrementar</button>
	<p>{contador}</p>
	<button onClick={handleDecrement}>Decrementar</button>
	</div>
	)
	}

	export default App;

view raw App.js hosted with ❤ by GitHub

O exemplo clássico para esse caso seria um contador simples. Quando você clicar no botão “Incrementar”, ele vai somar o item inicial (que seria o 0 + 1, depois somará 1 + 1 e ficará 2) e assim por diante. O mesmo ocorre com o botão “Decrementar”, mas ele ao invés de somar 1, vai diminuir 1. Ou seja, há a alteração dos números na tela, mediante a uma ação do usuário, que seriam os cliques no botão do contador.

Legal, não é? Esse conceito é bem básico e simples. Contudo, muitas pessoas não entendem a diferença entre os dois conceitos abordados no artigo que, além dos componentes, são os conceitos mais importantes para o aprendizado da biblioteca React.js.

Diferença entre props e state no React.js

Posts relacionados: