Docs
Internals
patch()
⚠️

This function is part of the internal API. You should only be using this if you are making your own framework.


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' })); // inefficient, but works