Render Props Pattern [React]

O que é render props pattern? Entenda esse poderoso padrão do React.

Com o padrão Render Props, passamos componentes como props para outros componentes.

Os componentes que são passados como props podem, por sua vez, receber outras props desse componente pai.

As render props facilitam a reutilização da lógica em vários componentes.

Implementação

Se quiséssemos implementar um input de entrada com o qual um usuário pode converter uma temperatura de Celsius para Kelvin e Fahrenheit, podemos usar as render props renderKelvin e renderFahrenheit.

Esses props recebem o valor da entrada, que eles convertem para a temperatura correta em K ou °F.

function Input(props) {
  const [value, setValue] = useState("");

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {props.renderKelvin({ value: value + 273.15 })}
      {props.renderFahrenheit({ value: (value * 9) / 5 + 32 })}
    </>
  );
}

export default function App() {
  return (
    <Input
      renderKelvin={({ value }) => <div className="temp">{value}K</div>}
      renderFahrenheit={({ value }) => <div className="temp">{value}°F</div>}
    />
  );
}

Benefícios

1. Reutilização: Como as render props podem ser diferentes a cada vez, podemos tornar os componentes que recebem render props altamente reutilizáveis para vários casos de uso.
2. Separação de preocupações: podemos separar a lógica de nosso aplicativo dos componentes de renderização por meio de render props. O componente com estado que recebe uma render props pode passar os dados para componentes sem estado, que apenas renderizam os dados.
3. Solução para problemas de HOC: Como passamos props explicitamente, resolvemos o problema de props implícitos do HOC. Os props que devem ser passados para o elemento estão todos visíveis na lista de argumentos do render prop. Sabemos exatamente de onde vêm certos lugares.

Desvantagens

1. Não são tão necessáris com os hooks: Hooks mudaram a maneira como podemos adicionar reutilização e compartilhamento de dados aos componentes, o que pode substituir o padrão render props em muitos casos, porém ainda existem casos que o padrão render props pode ser a melhor solução.

Comenta ai se você conhecia esse padrão e se utliza ele no seu dia a dia!

Gostou? Veja também outros artigos escritos por mim:

Entendendo Closures no Javascript
Entendendo Classes e Prototype no Javascript
Entendendo Higher Order Functions no Javascript
Meu website pessoal