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 UI’s basadas 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 interface, que están 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 este proceso le llamamos conditional rendering (renderización condicional).

Entremos en contexto y analicemos algunos ejemplos de renderizado condicional.

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 <p>Frank's phone is ringing</p>

  export default Component
}

1. Se crea un hook con estadoisRinging con un valor por default false.
2. Cuando el componente es cargado al DOM ocurre el cambio de estado con setIsRinging y el hook useEffect.
3. Se ejecuta la renderización y se lee un condicional.
4. Se cumple la condición 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>
      </>
        )

      }

1. Se lee y verifica el estado de isFoodReady.

1. 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 the button.
}

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.