State VS props 🤔

Carolina Guzmán — Fri, 20 May 2022 19:24:20 +0000

Primero que nada, debemos saber que props es la abreviatura de "properties". Esto nos hace hace ver todo más simple, desde mi opinión.

Ahora bien, ¿cuál es la diferencia entre state y props?

Se podría decir que _props + state _son los datos de entrada para la render() función de un componente.

Sin embargo, props se pasa al componente (similar a los parámetros de una función) mientras que state se administra *dentro del componente * (similar a las variables declaradas dentro de una función).

Las props son la configuración de un Componente. Se reciben desde arriba y son inmutables en lo que respecta al Componente que los recibe.

Ejemplo (código de React Guide ):

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

El estado comienza con un valor predeterminado cuando se monta un Componente y luego sufre mutaciones en el tiempo (principalmente generadas por eventos de usuario).

Ejemplo (código de React Guide ):

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

Si bien props y state ambos contienen información relacionada con el componente, se usan de manera diferente y deben mantenerse separados.

Fuentes de información:

https://es.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
https://lucybain.com/blog/2016/react-state-vs-pros/

DEV Community: Carolina Guzmán

State VS props 🤔