What's a block?

Million.js is a library that enables you to create blocks. A block is a special Higher Order Component (HOC) (opens in a new tab) that can be used as a React component but is hyper-optimized for rendering speed.

Blocks are essentially components wrapped by block().

import { block } from 'million/react';
 
const LionBlock = block(function Lion() {
  return <img src="https://million.dev/lion.svg" />;
});

block()

Syntax: block((props) => vnode)
Example: block((props) => <div>{props.foo}</div>)

Million.js is a library that enables you to create blocks. A block is a special Higher Order Component (HOC) (opens in a new tab) that can be used as a React component but is hyper-optimized for rendering speed.

Blocks are essentially components wrapped by block().

import { block } from 'million/react';
 
const LionBlock = block(function Lion() {
  return <img src="https://million.dev/lion.svg" />;
});
 
export default LionBlock;

Custom Tags

The as prop can be used to specify the tag name of the For. By default, it is slot.

import { block } from 'million/react';
 
const LionBlock = block(
  function Lion() {
    return <img src="https://million.dev/lion.svg" />;
  },
  { as: 'div' },
);

Using Block With SSR

If you are using Million.js on the server, you may encounter a hydration mismatch error. This is because Million.js uses a different algorithm for rendering on the server than it does on the client. To fix this, you can disable SSR.

const NoSSRBlock = block(
  function NoSSR() {
    return <div>{Math.random()}</div>;
  },
  { ssr: false },
);