Render Props en React: Una técnica para la reutilización de lógica 2024

El patrón Render Props muestra su verdadero potencial cuando desarrollamos aplicaciones en React JS de gran escala y encontramos la necesidad de compartir lógica entre componentes sin duplicar código.

Si quieres ver un ejemplo aplicado en un proyecto del mundo real, te invito a darle play al siguiente vídeo donde explico cómo implementar el patrón Render Props en React JS paso a paso.

Si prefieres leer, continua con el post donde muestro un ejemplo básico.

¿Qué es el Patrón Render Props?

El patrón Render Props en React se refiere a una técnica donde un componente recibe una función a través de sus props que devuelve un elemento React. Esta función se utiliza para determinar qué renderizar, permitiendo así una gran flexibilidad y reutilización de lógica entre componentes.

Ejemplo Básico de Render Props

import React, { useState } from 'react'

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const handleMouseMove = (event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY,
    })
  }

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {render(position)}
    </div>
  )
}

const App = () => {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h1>
          La posición del mouse es: (x: {x}, y: {y})
        </h1>
      )}
    />
  )
}

export default App

Con el patrón Render Props, puedes extraer la lógica de seguimiento del mouse del componente MouseTracker y reutilizarla en diferentes lugares de tu aplicación, simplemente cambiando lo que renderizas con la función proporcionada.

Si te ha gustado este análisis sobre el patrón Render Props, te invito a explorar los otros patrones avanzados en React JS que he analizado en la guía principal.

Y recuerda, si quieres llevar tus habilidades al siguiente nivel, no te pierdas el curso completo en el Canal de YouTube de Developero.