Rules of Blocks

You are probably here because you got a warning message in your console.

<div>
  <YourBlock>Uh oh...</YourBlock>
            ^
</div>

There are three common reasons you might be seeing it:

1. You might be breaking Rules of Blocks.
2. You might have forgot to use the compiler.
3. You've entered unsupported behavior.

Breaking Rules of Blocks

You may have heard of "progressive enhancement," (opens in a new tab) which is the idea that tools progressively use features based on what is supported. Similarly, Million.js has "progressive degradation," or the concept that if you use features that are not supported, it will degrade to default React rendering gracefully.

This section highlights some of the possible warnings you might encounter using blocks. Note that this is not an exhaustive list.

Declaring blocks

The above usually occurs when you have a block that is not declared as a variable. This prevents the compiler from analyzing the block correctly.

console.log(block(<div />)) // ❌ Wrong
export default block(<div />) // ❌ Wrong
 
// 👇👇👇
 
const Block = block(<div />) // ✅ Correct
console.log(Block);
export default Block;

Calling block()

The above usually occurs when you have an actual JSX component like <Component /> passed into the block() function instead of a reference to the Component itself.

const BadBlock = block(<Component />) // ❌ Wrong
 
const GoodBlock = block(App)  // ✅ Correct

Using map() instead of <For />

The above will occur when you use <Array>.map within a block. This is not ideal, especially if the component that holds the list is a block. The right pattern is to remove the block on the current component and use a <For /> component instead for the children.

<div>
  {items.map((item) => (
    <div key={item}>{item}</div>
  ))}
</div>
 
// 👇👇👇
 
<For each={items}>
  {(item) => <div key={item}>{item}</div>}
</For>

Deterministic returns

Returns must be "deterministic," meaning there can only be one return statement at the end of the block that returns a stable tree.

Some examples of non-deterministic returns:

function Component() {
  const [count, setCount] = useState(initial.count);
 
  if (count > 10) {
    return <div>Too many clicks!</div>; // ❌ Wrong
  }
 
  // ❌ Wrong
  return count > 5 ? (
    'Count is greater than 5'
  ) : (
    <div>Count is {count}.</div>
  );
}
 
const ComponentBlock = block(Component);

UI Component libraries 🙅‍♀️

Many React applications use UI component libraries like Material UI, Chakra UI, or Tailwind UI. These libraries are great, but they are not optimized for Million.js.

Million.js requires that you use DOM elements instead of components. This is because components can introduce non-deterministic returns, which can cause degraded performance.

// ❌ Bad
<Stack>
  <Text>What's up my fellow components</Text>
</Stack>
 
// 🤨 Maybe
<div>
  <Text>What's up my fellow components</Text>
</div>
 
// ✅ Good
<div>
  <p>What's up my fellow components</p>
</div>

Spread attributes

You can't use spread attributes in Million.js, as they can introduce non-deterministic returns.

<div {...props} /> // ❌ Wrong

Unsupported import

This may be caused by importing the block from the wrong place. Make sure you import the block from million/react instead of million.

import { block } from 'million'; // ❌ Wrong
 
import { block } from 'million/react'; // ✅ Correct

Using the compiler

You may have forgot to use the compiler, a necessary part in ensuring that your JSX is compiled to Million.js compatible code. You can view the instructions at the installation guide.

On a side note, Million.js is technically usable without the compiler, but it's significantly more limited in scope, and there is a more limited set of features available. This is not recommended.

Unsupported behavior

If none of this worked, please create an issue (opens in a new tab) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.