¿En qué consiste la diferencia entre props y estado en React?

Las props (propiedades) y el estado (state) son dos mecanismos clave para gestionar datos en los componentes de React.

Props:

• Se transmiten desde el componente padre al componente hijo.
• Son inmutables dentro del componente hijo.
• Permiten la interacción entre componentes.
• Determinan la apariencia o comportamiento del componente en función de los datos de entrada.

Estado:

• Pertenece a un componente específico y es gestionado por él.
• Es mutable dentro del componente.
• Representa datos que pueden cambiar con el tiempo y afectar el renderizado del componente.
• El cambio de estado provoca la re-renderización del componente y sus hijos.

Las diferencias principales se pueden presentar en forma de tabla:

Característica	Props	Estado
Fuente	Componente padre	El propio componente
Mutabilidad	Inmutables	Mutable
Gestión	Se transmiten desde fuera	Se gestionan dentro del componente
Propósito	Mostrar datos externos, configuración	Gestionar el estado interno del componente
Cambio provoca	Re-renderizado al cambiar en el padre	Re-renderizado al cambiar en el componente actual

Ejemplo de uso de props:

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

function ParentComponent() {
  const message = "¡Hola desde el padre!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Transmisión de la prop "text" */}
    </div>
  );
}

export default ParentComponent;

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

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

export default ChildComponent;

Ejemplo de uso del estado:

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

function Counter() {
  const [count, setCount] = useState(0); // Inicialización del estado "count"

  const increment = () => {
    setCount(count + 1); // Cambio del estado
  };

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

export default Counter;