0

de mas esta decir que recien comienzo con react y tengo muchas dudas sobre algunas practicas y convenviones que toman distintas personas. Mas puntualmente el uso y declaracion el objeto state de un componente React. La duda que tengo es, ¿Cual es la diferencia entre declarar el objeto state dentro del constructor del componente, a declararlo fuera del constructor?

Porque vi que algunas personas declaran state de esta forma:

    constructor(props) {
       super(props);
       this.state = {
          clave: valor,
          clave1: valor1
       }
    }

Y otro tipo de personas que lo declaran de esta:

state = {
   clave: valor,
   clave1: valor1
}

2 respuestas 2

2

A base de funcionamiento no hay ninguna diferencia porque los dos se traducen a lo mismo y hacen lo mismo, es más una preferencia de cada uno.

Ejemplo de código

class App extends React.Component {
  state = { name: "stackoverflow" };
  constructor(props) {
    super(props);
  }

  render() {
    return null;
  }
}

Si tienes eslint habilitado, te mostrara una advertencia con algo así.

Useless constructor. (no-useless-constructor)

¿Por qué pasa esto?

Bueno, realmente solo te interesaría tener el constructor cuando vas a inicializar alguna propiedad de la clase (para eso mismo sirve el constructor)

Yo personalmente recomiendo usar las dos cosas dependiendo del caso y, como he dicho anteriormente, las dos formas funcionan de igual manera; pero hay casos donde no tiene sentido tener un constructor cuando no se usa y además los componentes (clases) ya tiene un constructor por defecto.

Espero que te sirva.

Te dejo estos dos posts (están en inglés) que explican más detalladamente cada caso.

1

Segun mis conocimientos, hay tipos de componentes, los de clase y los funcionales, los de clase se les declara el estado en el contructor y los funcionales afuera como tu dices, pero igual te invito a leer un poco de los tipos de componentes!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.