{"componentChunkName":"component---src-templates-docs-js","path":"/docs/render-props.html","result":{"data":{"markdownRemark":{"html":"

O termo “render prop” se refere a uma técnica de compartilhar código entre componentes React passando uma prop cujo valor é uma função.

\n

Um componente com uma render prop recebe uma função que retorna um elemento React e a invoca no momento de renderização, não sendo necessário para o componente implementar uma lógica própria.

\n
<DataProvider render={data => (\n  <h1>Hello {data.target}</h1>\n)}/>
\n

Bibliotecas que usam render props incluem React Router, Downshift e Formik.

\n

Nesse documento vamos discutir por que render props são úteis e como escrevê-las.

\n

Uso de Render Props para Características Transversais

\n

Componentes são as principais unidades de reuso de código em React, mas nem sempre é fácil compartilhar o estado ou comportamento que um componente encapsula para outros componentes utilizarem esses valores.

\n

Por exemplo, o componente abaixo captura a posição do mouse em um aplicativo web:

\n
class MouseTracker extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        <h1>Move the mouse around!</h1>\n        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>\n      </div>\n    );\n  }\n}
\n

Enquanto o cursor se move pela tela, o componente mostra suas coordenadas (x, y) em um <p>

\n

A questão é: Como podemos reutilizar esse comportamento em outro componente? Em outras palavras, se outro componente precisar saber a posição do cursor, podemos encapsular esse comportamento de forma que seja fácil compartilhá-lo com outros componentes?

\n

Lembrando que componentes são a unidade básica de reuso de código em React, vamos tentar refatorar esse código para usar o componente <Mouse>, ele encapsula o comportamento que precisamos reutilizar.

\n
// O componente <Mouse> encapsula o comportamento que precisamos...\nclass Mouse extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/* ...mas como renderizar algo diferente de um <p>? */}\n        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <>\n        <h1>Move the mouse around!</h1>\n        <Mouse />\n      </>\n    );\n  }\n}
\n

Agora o componente <Mouse> encapsula todos os comportamentos associados aos eventos mousemove e guarda a posição (x, y) do cursor, mas ainda não é completamente reutilizável.

\n

Por exemplo, suponha que temos o componente <Cat> que renderiza a image de um gato seguindo o mouse na tela.\nPoderíamos usar uma prop <Cat mouse={{ x, y }}> que passaria as coordenadas do mouse para o componente de forma que este saberia onde posicionar a imagem na tela.

\n

Inicialmente, você poderia tentar renderizar <Cat> dentro do método render do <Mouse>, assim:

\n
class Cat extends React.Component {\n  render() {\n    const mouse = this.props.mouse;\n    return (\n      <img src=\"/cat.jpg\" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />\n    );\n  }\n}\n\nclass MouseWithCat extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/*\n          Poderíamos simplesmente trocar o <p> por um <Cat> ... mas assim\n          teríamos que criar um componente <MouseWithSomethingElse>\n          separado toda vez que precisarmos usá-lo, então <MouseWithCat>\n          não é muito reutilizável ainda.\n        */}\n        <Cat mouse={this.state} />\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Move the mouse around!</h1>\n        <MouseWithCat />\n      </div>\n    );\n  }\n}
\n

Essa abordagem funciona para o nosso caso em específico, mas ainda não atingimos o objetivo de encapsular o comportamento de uma maneira completamente reutilizável. Agora, toda vez que precisarmos da posição do mouse para outro caso, teremos que criar um novo componente (ou seja, outro <MouseWithCat>) que renderiza algo especificamente para esse caso.

\n

Aqui é onde a render prop se encaixa: Ao invés de escrever um componente <Cat> dentro de <Mouse>, e mudar diretamente a saída renderizada, podemos passar uma função como prop para <Mouse>, que vai chamá-la para determinar o que renderizar dinamicamente- essa é a render prop.

\n
class Cat extends React.Component {\n  render() {\n    const mouse = this.props.mouse;\n    return (\n      <img src=\"/cat.jpg\" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />\n    );\n  }\n}\n\nclass Mouse extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/*\n          No lugar de fornecer uma representação estática do que <Mouse> deve\n          renderizar, use a `render` prop para determinar o que renderizar\n          dinamicamente.\n        */}\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Move the mouse around!</h1>\n        <Mouse render={mouse => (\n          <Cat mouse={mouse} />\n        )}/>\n      </div>\n    );\n  }\n}
\n

Agora, no lugar de clonar o componente <Mouse> e escrever o método render para resolver um caso específico, nós passamos uma render prop que <Mouse> pode usar para determinar o que ele renderiza dinamicamente.

\n

Portanto, uma render prop é uma função passada nas props que um componente utiliza para determinar o que renderizar.

\n

Essa técnica torna o comportamento que precisamos compartilhar extremamente portátil. Para acessar esse comportamento, basta renderizar um <Mouse> com uma render prop que dirá o que renderizar com o (x, y) atual do cursor.

\n

Algo interessante para notar sobre render props é que você pode implementar a maioria dos higher-order components (HOC) utilizando um componente qualquer com uma render prop. Por exemplo, se você preferir ter um HOC withMouse no lugar de um componente <Mouse>, você poderia simplesmente criar um utilizando o <Mouse> com uma render prop.

\n
// Se você realmente quer usar HOC por alguma razão, você\n// pode facilmente criar uma usando um componente qualquer\n// com uma render prop!\nfunction withMouse(Component) {\n  return class extends React.Component {\n    render() {\n      return (\n        <Mouse render={mouse => (\n          <Component {...this.props} mouse={mouse} />\n        )}/>\n      );\n    }\n  }\n}
\n

Então, utilizar uma render prop torna possível qualquer um dos padrões citados.

\n

Usando outras Props além de render

\n

É importante lembrar que mesmo o nome padrão sendo “render props”, não quer dizer que você deve ter uma prop chamada render para usar esse padrão. Na verdade, qualquer prop que é uma função usada por um componente para determinar o que renderizar é uma “render prop”.

\n

Embora os exemplos acima usem a palavra render, poderíamos usar a prop children!

\n
<Mouse children={mouse => (\n  <p>The mouse position is {mouse.x}, {mouse.y}</p>\n)}/>
\n

Lembre-se, a prop children não precisar estar nomeada na lista de “atributos” do seu elemento JSX. Ao invés disso, você pode inserí-la dentro do seu elemento!

\n
<Mouse>\n  {mouse => (\n    <p>The mouse position is {mouse.x}, {mouse.y}</p>\n  )}\n</Mouse>
\n

Você pode ver essa técnica sendo usada na API react-motion.

\n

Dado que essa é uma técnica um pouco incomum, quando você estiver criando uma API como essa, você provavelmente vai querer definir nos seus propTypes que children deve ser uma função.

\n
Mouse.propTypes = {\n  children: PropTypes.func.isRequired\n};
\n

Avisos

\n

Tenha cuidado ao utilizar Render Props num React.PureComponent

\n

Usar uma render prop pode anular a vantagem de utilizar React.PureComponent se você criar uma função dentro de um método render. Isso se deve à comparação superficial de prop sempre retornar false para novas props, e, nesse caso, cada render vai gerar um novo valor para a render prop.

\n

Por exemplo, continuando com o componente <Mouse> acima, se Mouse estendesse React.PureComponent no lugar de React.Component, nosso exemplo seria assim:

\n
class Mouse extends React.PureComponent {\n  // Mesma implementação de antes...\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Move the mouse around!</h1>\n\n        {/*\n          Isso é ruim! O valor da prop `render` vai ser\n          diferente para cara render.\n        */}\n        <Mouse render={mouse => (\n          <Cat mouse={mouse} />\n        )}/>\n      </div>\n    );\n  }\n}
\n

Nesse exemplo, cada vez que <MouseTracker> renderiza, ele gera uma nova função como valor da prop <Mouse render>, anulando assim o efeito de <Mouse> estender React.PureComponent!

\n

Para contornar esse problema, você pode definir a prop como um método de instância:

\n
class MouseTracker extends React.Component {\n  // Definindo como um método de instância, `this.renderTheCat`\n  // sempre se refere a *mesma* função quando chamamos na\n  // renderização\n  renderTheCat(mouse) {\n    return <Cat mouse={mouse} />;\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Move the mouse around!</h1>\n        <Mouse render={this.renderTheCat} />\n      </div>\n    );\n  }\n}
\n

Nos casos onde você não pode definir a prop estaticamente (por exemplo, quando você precisa esconder as props e o estado do componente), <Mouse> deveria estender React.Component.

","frontmatter":{"title":"Render Props","next":null,"prev":null},"fields":{"path":"content/docs/render-props.md","slug":"docs/render-props.html"}}},"pageContext":{"slug":"docs/render-props.html"}},"staticQueryHashes":[]}