This function is part of the internal API. Only use if you know what you are doing and are optimizing for performance.
patch()
Syntax: patch(oldBlock, newBlock)
Example: patch(block1, block2)
The patch
function is used to rerender a block with another block. The oldBlock
is the block that will be rerendered, and the newBlock
represents the new version of the DOM.
💡
Always try to keep Blocks of the same shape (derived from the same function) when using patch in order to maintain good performance.
import { block, mount, patch, fragment } from 'million';
const display = block(({ text }) => {
return <p>{text}</p>;
});
// we will patch against this block for updates
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' })); // inefficent, but works