hocs-render-props.md

React patterns

Higher Order Components vs. Render props

Higher Order Components (HOCs)

Una funcion que recibe un componente y devuelve otro, agregandole cierto comportamiento.

Ejemplo

Uso

import React from 'react'

import withMouse from './withMouse'

const App = ({ x, y }) => (
  <div style={{ height: '100vh' }}>
    The mouse position is ({x}, {y})!
  </div>
)

export default withMouse(App)

Implementacion

import React from 'react'
import hoistStatics from 'hoist-non-react-statics'

import { getName } from './utils'

const withMouse = Component => {
  class WrappedComponent extends React.Component {
    static displayName = `withMouse(${getName(Component)})`

    state = {
      x: 0,
      y: 0
    }

    handleMouseMove = event => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
          <Component {...this.props} {...this.state} />
        </div>
      )
    }
  }

  return hoistStatics(WrappedComponent, Component)
}

export default withMouse

---

Render props (or funciton as a child)

Componentes que delegan el renderizado al cosumidor aceptando una funcion como prop (lo mas usado es children o render) y renderizan el resultado de llamar esa funcion con ciertos parametros.

Recursos

• awesome-react-render-props 😎
• Michael Jakson: Video Never Write Another HoC
• Ryan Florence: Video ‹Rethinker stop={false}/›

Ejemplo

Uso

import React from 'react'

import Mouse from './Mouse'

const App = () => (
  <Mouse>
    {({ x, y }) => (
      <div style={{ height: '100vh' }}>
        The mouse position is ({x}, {y})!
      </div>
    )}
  </Mouse>
)

export default App

Implementacion

import React from 'react'

class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0
  }

  handleMouseMove = event => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }

  render() {
    const rcb = this.props.children || this.props.render

    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {rcb(this.state)}
      </div>
    )
  }
}

export default Mouse