O que é o Render Props e como ele funciona?

O Render props é um padrão de projeto muito utilizado em React que permite a composição de componentes de forma flexível e reutilizável.

O Render pros consiste em passar uma função como prop para um componente React.Neste artigo, vamos explicar o que são render props, como eles funcionam e fornecer alguns exemplos práticos.

Seu nome "Render props" vem do fato de que a função passada como prop é responsável por renderizar algo na tela. Na prática, isso significa que o componente que recebe a função como prop pode chamar essa função em seu método render() e utilizar o valor retornado para renderizar seu próprio conteúdo.

Por exemplo, imagine que você tem dois componentes: um componente "Pai" e um componente "Filho". O componente "Pai" tem uma função que calcula um número aleatório. Você quer que o componente "Filho" renderize esse número.

Usando React Render Props, você pode passar a função de cálculo como uma prop do componente "Pai" para o componente "Filho". O componente "Filho" então chama essa função para obter o número aleatório e renderiza o resultado.

Aqui está um exemplo de como você pode implementar isso em React:

// Componente Pai
class Pai extends React.Component {
  gerarNumeroAleatorio = () => {
    return Math.floor(Math.random() * 100);
  }

  render() {
    return this.props.render(this.gerarNumeroAleatorio);
  }
}

// Componente Filho
class Filho extends React.Component {
  render() {
    return (
      <div>
        <h2>Número aleatório:</h2>
        <p>{this.props.numeroAleatorio}</p>
      </div>
    );
  }
}

// Uso dos componentes
class App extends React.Component {
  render() {
    return (
      <Pai render={(gerarNumeroAleatorio) => (
        <Filho numeroAleatorio={gerarNumeroAleatorio()} />
      )} />
    );
  }
}

Neste exemplo, o componente "Pai" tem a função gerarNumeroAleatorio, que é passada como prop render para o componente "Filho". No componente "Filho", essa função é chamada com gerarNumeroAleatorio() e o número aleatório resultante é renderizado. Observe que a prop render é uma função que retorna o componente "Filho" com a prop numeroAleatorio definida. Isso permite que o componente "Pai" compartilhe seu comportamento de geração de números aleatórios com o componente "Filho".

Com isso,conseguimos ver como o Render props é um padrão de projeto muito utilizado em React que permite a composição de componentes de forma flexível e reutilizável. E como podemos o usar para facilitar a construção de algo na tela e o reutilizando em outros componentes do seu código React.