DEV Community

Carolina Guzm谩n
Carolina Guzm谩n

Posted on • Updated on

State VS props 馃

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);
Enter fullscreen mode Exit fullscreen mode

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 />);
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (0)