Expression Slots in React

Have you ever wondered how React evaluates what's inside the curly braces {}?

That's what we'll dive into today!

JSX transpilation

When you write JSX, it gets transpiled into JavaScript. The transpilation process is what allows you to write HTML-like syntax in JavaScript.

Let's take a look at an example:

const element = <h1>Hello, world!</h1>;

This JSX code gets transpiled into the following JavaScript code:

const element = React.createElement("h1", null, "Hello, world!");

React.createElement() is a function that creates a React element. It takes three arguments:

1. The type of element (in this case, "h1").

2. The element's properties (in this case, null).

3. The element's children (in this case, "Hello, world!").

So, how does React evaluate what's inside the curly braces {}?

What's inside the curly braces?

When you write JSX, you can use curly braces {} to embed JavaScript expressions. These expressions can almost be anything. It can't be for example a for loop or an if statement. But it can be a variable, a function call, or a ternary operator.

Why is that?

That's because when React sees the curly braces, it simply extracts the expression inside and puts it in the children of the element.

const name = "John Doe";
const element = <h1>Hello, world! {name}</h1>;

This will transpile into:

const name = "John Doe";
const element = React.createElement("h1", null, "Hello, world! ", name);

It's important to note that anything after the first two arguments of React.createElement() is considered the children of the element. It can be annotated like React.createElement(type, props, ...children).

Going back to the example, as you can see, the name variable simply gets forwarded as a child of the h1 element.

When you see this, it's starting to make sense why you can't use a for loop or an if statement inside the curly braces. React expects a single expression, not a block of code.

Let's take a look at a last example with an if statement:

const isLoggedIn = true;
const element = <h1>Hello, world! {if (isLoggedIn) {
  return "John Doe";
} else {
  return "Guest";
}}</h1>;

If we were to forward this to React.createElement(), it would look like this:

const isLoggedIn = true;
const element = React.createElement("h1", null, "Hello, world! ", if (isLoggedIn) {
  return "John Doe";
} else {
  return "Guest";
});

This doesn't work because if is a statement, not an expression. React expects an expression inside the curly braces, not a statement. An expression can be evaluated to produce a value on its own. If statements are used for control flow and executing different blocks of code based on a condition.

Conclusion

Understanding how React evaluates expressions inside curly braces is important when working with JSX. Remember that React expects an expression, not a statement, inside the curly braces. This expression gets evaluated and passed as a child to the element.