Padrão de propriedades de renderização

Boas-vindas

O que são propriedades de renderização?

<DataProvider render={data => <UserCard user={data} />} />

Exemplo simples de propriedade de renderização

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Usando children como propriedade de renderização

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Rastreador da posição do mouse

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Propriedades de renderização versus ganchos personalizados

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Quando as propriedades de renderização ainda fazem sentido

Aviso de desempenho

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Compondo propriedades de renderização

Propriedades de renderização em bibliotecas

Verificação rápida

Recapitulação

A seguir