Quick Run Of A Block?
A block is a specialized Higher Order Component (HOC) (opens in a new tab) that functions as a React component but more optimized for rendering speed.
Blocks are 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;
There are some limitations to using blocks. Please reference the Rules of Blocks for more information.
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 },
);