Renderizar o no renderizar, esa es la cuestión

En nuestros pasos como desarrolladores FrontEnd, convivimos con técnicas y tecnologías que facilitan el desarrollo de una interfaz de usuario (también conocida como User Interface o UI/UX). Una de ellas es React, una librería muy popular que nos permite crear una UI basada en el paradigma de componentes reutilizables.

Y si utilizamos React, es común que tengamos que tomar decisiones basadas en mostrar u ocultar elementos de nuestra UI sujetos a una condición previamente establecida. El ejemplo más claro de esto se encuentra en el proceso de autenticación, una vez que iniciamos sesión en una app, el botón de Log In cambia a Log Out. A esta herramienta le llamamos conditional rendering (renderización condicional).

Analicemos algunos métodos de renderizado condicional que nos podrían servir en futuros proyectos.

import 'React', { useState, useEffect } from 'react'

const Component = () => {
  // Show the state
  const [isRinging, setIsRinging] = useState(false)


  useEffect (() => {
    setIsRinging(true)

  }, [])

  return <div>{(isRinging && <p>Frank's phone is ringing</p> || "Nothing has happened..."  )}</div>

  //Output expected Hey! This is Frank

  export default Component
}

Este es uno de mis métodos favoritos, luce simple y limpio.

1. Se crea un hook con un estado isRinging con un valor por default false.
2. Cuando el componente es cargado al DOM ocurre el cambio de estado con setIsRinging con el hook useEffect.
3. Se ejecuta la renderización y se lee un condicional.
4. Se cumple la condición a la derecha del operador && y se ejecuta el elemento <p>Frank's phone is ringing</p>.

const Component = () => {
  
let isFoodReady = false

return (
        <>
          isFoodRead ? <p>Time to eat</p> :
                      <p>I'm starving </p>
      //Output expected <p>I'm starving</p>
      </>
        )

      }

Recordando nuestras clases de JavaScript, el operador ternario es la forma abreviada de una condición if-else.

1. Se lee y verifica el estado de isFoodReady.
2. Se ejecuta la lógica de la variable en false y se dispara el elemento <p>I'm starving</p>

import 'React', { useState } from 'react'

const Modal = { show } => {

  if (!show){
    return null
  }

  return <p>Conditional rendering is great!</p>
}

const mainComponent = () => {
  const [showModal, setShowModal] = useState(false)

  return(
    <>
    <Modal show={showModal}/>
    <button onClick={() => setShowModal(!showModal)}> Click me </button>
    </>
  )

  // Output expected: Toggle effect with button.
}

Para este último ejemplo he decidido crear un efecto toggle, ya que va increíble el uso de null con la creación de un menú tipo drop-down o un modal.

1. Se crea un componente de React llamado Modal.
2. El componente Modal debe verificar si el elemento p será mostrado u ocultado.
3. Usamos el componente Modal dentro de mainComponent, y le pasamos vía props el estado de la variable showModal.
4. Agregamos el evento onClick dentro del botón y lo asociamos con una función que permita controlar el estado, para dar el efecto de un toggle.

Después de este ejercicio de cardio con JavaScript y React, te estarás preguntando cuál es la mejor manera de escribir condicionales en React. Y en mi opinión, todo es por causalidad. Elige la herramienta que mejor creas conveniente para cada caso específico, y lo más importante nunca dejes de practicar.

Si quieres aprender que son los props, el estado y los hooks de React de una manera dinámica, ágil y entretenida te recomiendo tomar el Curso Práctico de React.

Compárteme en los comentarios si conoces algún otro método de renderizado condicional en React.