Qual é a diferença entre props e estado no React?

Props (propriedades) e estado (state) são dois mecanismos-chave para gerir dados nos componentes React.

Props:

• São passados do componente pai para o componente filho.
• São imutáveis dentro do componente filho.
• Permitem a interação entre componentes.
• Definem a aparência ou comportamento do componente com base nos dados de entrada.

Estado:

• Pertence a um componente específico e é gerido por ele.
• É mutável dentro do componente.
• Representa dados que podem mudar ao longo do tempo e influenciar a renderização do componente.
• A alteração do estado provoca a re-renderização do componente e dos seus filhos.

As principais diferenças podem ser apresentadas em forma de tabela:

Característica	Props	Estado
Fonte	Componente pai	O próprio componente
Mutabilidade	Imutáveis	Mutável
Gestão	São passadas de fora	São geridas dentro do componente
Propósito	Mostrar dados externos, configuração	Gerir o estado interno do componente
Alteração provoca	Re-renderização ao alterar no pai	Re-renderização ao alterar no componente atual

Exemplo de uso de props:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Olá do pai!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Passagem de prop "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Uso da prop "text" */}
  );
}

export default ChildComponent;

Exemplo de uso de estado:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Inicialização do estado "count"

  const increment = () => {
    setCount(count + 1); // Alteração do estado
  };

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={increment}>Incrementar</button>
    </div>
  );
}

export default Counter;