Menu button

Evita el exceso de nodos DOM con React Fragment

Google recomienda que las páginas web contengan menos de 1500 nodos de DOM. Lo ideal es una profundidad de árbol inferior a 32 elementos y evitar que cada nodo contenga más de 60 elementos. De esta forma nuestra página cargará más rapido.

Trabajando con Frameworks de Javascript es fácil caer en la tentación de inluir un <div> o cualquier otro elemento para encapsular componentes, ya que por norma general deben devolver un único elemento.

Haciendo esto estamos añadiendo complejidad a nuestro DOM, por eso, tenemos que pensar siempre en intentar utilizar el mínimo numero de elementos posibles para ofrecer el mismo resultado.

React Fragment nos ayuda en este aspecto, veamos cómo.

Qué es React Fragment

Fragments te permite agrupar un listado de nodos sin añadir un elemento extra como contenedor.

import React from 'react'

const Page = () => (
  <React.Fragment>
    <h1>Hello!</h1>
    <p>My name is Rafa</p>
  </React.Fragment>
)

Cabe destacar que React.Fragment sólo permite el atributo key.

Short syntax

Recientemente, los desarrolladores de React han creado una nueva sintaxis mucho más corta para hacer exactamente lo mismo.

import React from 'react'

const Page = () => (
  <>
    <h1>Hello!</h1>
    <p>My name is Rafa</p>
  </>
)

⚠️ Puedes utilizar <></>de la misma manera que cualquier otro elemento, excepto que éste no soporta atributos ni keys

Soporte

Esta nueva sintaxis de JSX está disponible a partir de Babel v7.0.0-beta.31. Así que actualíza Babel a la última versión:

yarn upgrade @babel/core @babel/plugin-transform-react-jsx
# or
npm update @babel/core @babel/plugin-transform-react-jsx

O si estás utilizando react preset

yarn upgrade @babel/core @babel/preset-react
# or
npm update @babel/core @babel/preset-react