This function is part of the internal API. Only use if you know what you are doing and are optimizing for performance.
block()
Syntax: block((props) => vnode)
Example: block((props) => <div>{props.foo}</div>)
The block function instantiates a Block (a stateless "component"). It accepts a function with a props object parameter that returns a VNode.
Rules of usage
props is an immutable object with primitive or Block values.
someBlock({
one: '1', // ✅
two: 1 + 1, // ✅
three: true, // ✅
four: Date.now(), // ✅
five: anotherBlock({ crewmate: true }), // ✅
six: { imposter: true }, // ❌
seven: new Date(), // ❌
});Top level values of props may not be interpolated with other values.
The props are filled with Hole values. These Hole values are replaced with the actual values when the block() is called. The Hole values are immutable and cannot be derived with other values.
// Anatomy of a `Hole`
{
$: 'prop';
}
// Example:
block((props) => {
console.log(props.foo); // { $: 'foo' } ✅
console.log(props.foo + ' bar'); // { $: 'foo' } + ' bar' ❌
return <div>{props.foo}</div>;
});The following are examples of this rule:
block((props) => {
const { favorite } = props.favorite; // ❌
<div className={props.className /* ✅ */}>
{props.hello /* ✅ */}
{Date.now() /* ✅ */}
<button
onClick={() => {
console.log(props.world); /* ❌ (no holes inside listeners) */
}}
>
{props.count + 1 /* ❌ */}
{props.foo.toString() /* ❌ */}
</button>
</div>;
});