import { Callout } from 'nextra-theme-docs';

<Callout type="warning"> Esta función forma parte de la API interna. Deberías utilizarla **solo** si estás creando tu propio *framework*. No es recomendada para uso general. </Callout>

`patch(){:jsx}`

Sintaxis: patch(oldBlock, newBlock){:jsx}
Ejemplo: patch(block1, block2){:jsx}

La función patch se utiliza para volver a renderizar un bloque con otro bloque. El oldBlock (bloque viejo) es el block que se volverá a renderizar, y el newBlock (bloque nuevo) representa la nueva versión del DOM.

<Callout> Los bloques deben derivarse de la misma función al usar `patch()`. Esto asegura que el rendimiento no se vea afectado negativamente. </Callout>

jsx

import { block, mount, patch, fragment } from 'million';

const display = block(({ text }) => {
  return <p>{text}</p>;
});

// Vamos a aplicar un "patch" a este bloque para las actualizaciones.
const main = display({ text: 'Hello' });

mount(main, document.getElementById('root'));

patch(main, display({ text: 'World' }));

const bigDisplay = block(({ text }) => {
  return <h1 style={{ color: 'red' }}>{text}</h1>;
});

patch(main, bigDisplay({ text: 'World' })); // ineficiente, pero funciona.