Qué son las render props y render functions

Antes de estudiar las render props debes conocer la composición de componentes. Las renders props vienen a ayudar a hacer una composición de componentes más limpia. Seguimos con todas las ventajas de usar composición de componentes.
A partir de ahora podemos decir que tenemos 2 tipos de props: las props normales que reciben un valor o variable y por otro lado tenemos las props que contienen una función. Estas que contienen una función son las que nos interesan.
Esta función devuelve un componente o un elemento que pudiera tener anidados más elementos y componentes.
La sintaxis es la siguiente:

<MyHeader 
	render={ () => <myLogo type={ type } /> } 
/> 

La propiedad render(la cual puede tener cualquier otro nombre) es nuestra render prop, porque contiene una función que al ser llamada devuelve un componente. Entonces cumple todas las condiciones y solo falta llamarla desde el componente que la contiene:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.render() }
	</header>
	)
} 

Entonces podemos interpretar que las render props le dicen al componentes que renderizan(cual va a ser su contenido)

Otra forma de hacer esto es con las render functions y lo que cambia es que se declaran dentro del componente:

<MyHeader>
	{ () => <myLogo type={ type } /> } 
</MyHeader>

Y para acceder a lo que está dentro del componentes simplemente usamos props.children:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.children }
	</header>
	)
} 

Es prácticamente lo que hicimos con la composición de componentes y la propiedad children.
¡Usen render props y mejoren sus composiciones amigos 😃 !

8.-Qué son las render props y render functions

–
Nos ayudan a elevar nuestra composición de componentes a otro nivel.

–
Las render props nos permiten ser más específicos sobre que vamos a renderizar, cuando y donde vamos a renderizar cada parte del contenido de nuestros componentes.

–
Render Function

–
Es el patrón de entregar la información de nuestro componente en una función. No es exclusivo de react context, nosotros podemos crear nuestros propios componentes que usen este patrón, que reciban una función para que le podamos enviar la información que queremos proveer y luego si, renderizar los componentes que ya tienen la info gracias a la función.

–
Render Props

–
Cuando ya no mandamos la función dentro del componente, si no que la enviamos en alguna otra propiedad del componente. Podemos jugar con este patrón para que compartir información sea más divertido.

un aporte para conocer más este patrón de render props
https://osmancea.medium.com/entendiendo-render-props-en-react-dfe22f84f593

Voy a repasar esto muy bien para entenderlo.

Render Props

Documentación oficial:
https://es.reactjs.org/docs/render-props.html

Hola Juan, las clases donde solo hablas y enseñas imágenes con ejemplos son un coñazo🤦‍♂️, mola mucho más cuando escribes el código y explicas al mismo tiempo con los ejemplos se entiende mucho mejor 👍.

🌦️ Render Props y Render Functions

Ideas/conceptos claves

Render Function El patrón de entregar la información en una función es lo que llamamos

Render Prop El patrón de enviar como propiedad una función

Apuntes

• Son un patrón que nos ayudan a llevar la composición de componentes a un mayor nivel
• Render Props nos dejan especificar:
  • Que vamos a renderizar
  • Cuando lo vamos a renderizar
  • Donde lo vamos a renderizar

<Provider>
	<Consumer>
		{ something => (
				<TusComponentes
					{...something.xyz}
				/>
		)}
	</Consumer>
</Provider>

• React context se puede utilizar a través de los componentes de Provider y Consumer
  • Con el componente consumer podíamos recibir una función con todas las propiedades que habíamos guardado en el provider, el concepto de esta aplicación es **Render Function**
• También podemos realizar el siguiente código la cual utiliza Render Props

<RenderProps
	renderProp={<OtroCompo />}
/>

<RenderProps
	renderProp={info => <OtroCompo {...info} />}
/>

Por ejemplo podríamos realizar la siguiente aplicación

<PlatziCourse
	classes={platziClass => (
		<PlatziClassPreview {...platziClass} />
	)}
	lastActivity={question => (
		<PlatziComment q={true} {...question} />
	)}
/>

no se si soy el unico pero, casi no le entiendo a juan, me toca estar mirando videos en youtube para alimentar lo que dice

Qué son las render props y render functions

.
Los componentes provider y consumer: por dentro del componente consumer podemos recibir una función con todas las propiedades que habíamos guardado en el provider y que queríamos compartir en toda la aplicación ese patron de entregar la información de nuestro componente en una función, es lo que nosotros llamamos una render function.

<Provider value={...something}>
	<Consumer>
		{something => (
			<TusComponentes
				{...something.xyz}
			>	
		)}
	</Consumer>
</Provider>

.

Render props:

Cuando la función ya no la enviamos dentro del componente en su propiedad { children } sino que la enviamos en alguna otra propiedad del componente, puede ser cualquiera, se puede jugar mucho con ese patron para que compartir información y hacer composición de componentes sea mas divertido.

<RenderProps
  renderProp={<OtroCompo />}
/>

<RenderProps
  renderProp={info => <OtroCompo {...info} />}
/>

Ejemplo:

<PlatziCourse
  classes={platziClass => (
    <PlatziClassPreview {...platziClass} />
  )}

  lastActivity={question => (
    <PlatziComment q={true} {...question} />
  )}
/>

una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar.

• React Doc o.O

<PlatziClasses
	latestClasses = {(studentClasses) => (
		<LastClassContainer>
			{
				studentClasses.map((scItem) => (
					<LastClassItem {...scItem} />
				))
			}
		</LastClassContainer>
	)}
	rutasEscuelas = {
		(studentRutasEscuelas) => (
			<>
				{
				studentRutasEscuelas.map((rsItem) => (
						<RutaEscuelaItem {...rsItem} />
					))
				}
			</>
		)
	}	
/>

Opino que con las render props se lee mucho mejor el código (con tal de que se manejen buenos nombres de las props).

Esto es excelente! Muchas gracias… Adicionalmente, revisando la documentación render props oficial hay un ejemplo donde es siguiente código es equivalente… 🤯

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

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

Supongo que React hace su magia detrás del telón con JSX para convertir todo esto en el código que entrega al navegador…

En cada render prop, cuando estemos devolviendo esa nueva función, tenemos que definir un componente especifico para esa parte de la maquetación y de esta manera evitar usar React Context. Simplemente recibimos esa función e inyectamos las propiedades al componente

Mis apuntes en Notion💚

Render props

Permiten elevar la composición de componentes a otro nivel.

Similar a component composition pero permiten ser más específicos sobre qué es lo que se debe renderizar, cuándo renderizar y dónde renderizar cada parte del contenido de los components.

El término “render prop” se refiere a una técnica para compartir código entre componentes en React utilizando una propiedad cuyo valor es una función.

Un componente con una render prop toma una función que devuelve un elemento de React y lo llama en lugar de implementar su propia lógica de representación.

Más concretamente, una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar. Esta técnica hace que el comportamiento que necesitamos compartir sea extremadamente portátil.

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

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

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

        {/*
          En lugar de proporcionar una representación estática de lo que <Mouse> renderiza,
          usa la `render prop` para determinar dinámicamente qué renderizar.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}