React — Valores por defecto con defaultProps y valores predeterminados con ES6

Temario

• Valores por defecto con defaultProps
• Valores predeterminados con ES6

i. Valores por defecto con defaultProps

defaultProps es una propiedad predeterminada dentro del componente (funcional o de clase), que nos va a servir para inicializar propiedades props por defecto.

:: Creando un proyecto

Primero vamos a crear un proyecto con create-react-app (si no tienes idea de como crearlo, date una vuelta por acá React — Mi primera App con create-react-app[ref]), esto, con la finalidad de que puedas hacer los ejemplos junto conmigo…

:: Ejemplo

Imaginemos el siguiente componente funcional:

Lo agregamos en la App:

Si ejecutamos la aplicación:

Todo bien hasta aquí, ahora, que pasa si agregamos otro componente Welcome a la App, pero sin mandarle el atributo name:

En pantalla se vería algo así:

Si revisamos en consola, podemos ver lo siguiente:

Observamos que para el primer componente recibe la propiedad name, mientras que el segundo NO recibe ninguna propiedad.

:: Sintaxis defaultProps

Sabemos que las propiedades props, NO DEBEN SER MODIFICADAS, por lo que no debemos hacer alguna validación para reasignar el valor…Por fortuna los desarrolladores de React pensaron en eso, donde creando la propiedad defaultProps. Veamos su sintaxis:

:: Continuando el ejemplo

Entonces, en el componente funcional Welcome, agregamos defaultProps, para mandar props por defecto

Cuando revisamos de nuevo la aplicación:

Importante: Tener cuidado con el valor null, ya que si toma el valor, por lo que en el ejemplo la propiedad se verá “vacía”

El ejemplo de arriba:

ii. Valores predeterminados con ES6

Leyendo algunas entradas en la documentación[ref][ref], extraje los siguientes puntos:

• No es buena idea usar defaultProps en componentes funcionales, ya que el rendimiento es ligeramente más lento.
• La propiedad defaultProps nació para los componentes de clase (debido a que no podíamos acceder al props directamente).
• En versiones futuras, si usas componentes funcionales y defaultProps juntos, va a salir un mensaje de error.

Entonces, forma correcta de hacerlo (al menos para componentes funcionales), es usar los valores predeterminados de ES6[ref], veamos el mismo ejemplo de arriba:

• Forma 1: valores predeterminados desde los argumentos.

• Forma 2: valores predeterminados dentro del componente funcional

Dependiendo de la complejidad de las propiedades, puedes usar una forma u otra.

Al revisar el ejemplo, seguimos obteniendo el mismo resultado que con defaultProps:

:: Ejemplo 2

Vamos a crear un componente funcional Input

Desde la App

• Primero lo haremos con defaultProps

En el navegador:

Y en el código HTML:

Podemos ver que a pesar de no haberle mandado algunos o ningún atributo, se encargó de concatenar las propiedades por defecto con las mandadas.

• Ahora lo haremos con los valores predeterminados en ES6:

Obtenemos el mismo resultado que el de defaultProps

Esta es la manera correcta de hacerlo, si queremos obtener los mismos resultados que con la propiedad defaultProps.

:: Ejemplo 3

En caso de que busquemos un código más simple y parecido al defaultProps, la única forma que se me ocurre es concatenar un objeto defaultConfig con props generando una nueva constante:

Importante: El código de arriba, no lo recomiendo con objetos muy complejos, ya que puede tener problemas de inmutabilidad, clonado del objeto[ref] e inclusive de rendimiento.

:: Ventajas y desventajas

— defaultProps

• El uso de la propiedad defaultProps, actualmente es la mejor práctica, pero siempre y cuando estés usando componentes de clase.
• La ventaja que tiene defaultProps, es que nos da una forma simple, mantenible y unificada de establecer valores predeterminados para las propiedades.
• La iteración de la propiedad defaultProps, en React, tiene una pequeña baja de rendimiento.

— Valores predeterminados en ES6

• Es una sintaxis nativa de JavaScript, por lo que es compatible con la mayoría de los navegadores modernos.
• Quizás el mayor problema es cómo establecemos los valores predeterminados, quizás, a mi gusto se como amontonado y sin estructura, a diferencia de defaultProps

En la siguiente entrega vamos a ver React — Comprobando el tipo de dato de una prop con PropTypes.

La entrega pasada vimos React — Creando una app to do list con create-react-app

Bibliografía y links que te puede interesar…

Verificación de tipos con PropTypes — React

React defaultProps is dying, who’s the contender?

RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 ·…

`defaultProps` rule to be deprecated on function components · Issue #2396 ·…

JavaScript — ES6 (Parte I)