Falsy values in JavaScript

A quick recap of something we learnt in our JavaScript course, there are only a few Falsy values in JavaScript.

// All of these behave like "false"
// Hence called "Falsy"
if (false) {
  console.log('I will not execute');
}
if (null) {
  console.log('I will not execute');
}
if (undefined) {
  console.log('I will not execute');
}
if ('') {
  console.log('I will not execute');
}
if (0) {
  console.log('I will not execute');
}
if (NaN) {
  console.log('I will not execute');
}

React and Falsy Values

React doesn't render falsy values, except for numbers. This is shown in this demo:

App.tsx

export default function App() {
  return (
    <>
      <div>false: {false}</div>
      <div>null: {null}</div>
      <div>undefined: {undefined}</div>
      <div>'': {""}</div>
      <div>0: {0}</div>
      <div>NaN: {NaN}</div>
    </>
  );
}

Standard Number Rendering

Because React always renders a number (even when falsy), it allows for easier development experience as demonstrated in this demo:

App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const inc = () => setCount((clicks) => clicks + 1);
  const dec = () => setCount((clicks) => clicks - 1);

  return (
    <>
      <div>
        <button onClick={inc}>+</button>
        <button onClick={dec}>-</button>
      </div>
      <p>Count: {count}</p>
    </>
  );
}

JavaScript `&&` chaining

A quick recap of something we learnt in our JavaScript course, is the concept of && chaining. This can be used to short circuit to falsy values which is a feature we use for conditional rendering in React.

let person;

person = { name: { first: 'Jane', last: 'Doe' } };
console.log(person && person.name && person.name.first); // 'Jane'

person = null;
console.log(person && person.name && person.name.first); // null

let shouldDisplay;

shouldDisplay = true;
console.log(shouldDisplay && 'Display'); // 'Display'

shouldDisplay = false;
console.log(shouldDisplay && 'Display'); // false

React `&&` chain on booleans

We can use && to conditionally render content in React.

When it is false, the chain short circuits to false and React renders nothing
When it is true, the chain continues to the item we want to render

App.tsx

import { useState } from "react";

export default function App() {
  const [isShown, setIsShown] = useState(false);
  const toggle = () => setIsShown((isShown) => !isShown);

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      {isShown && <p>Conditional Content</p>}
    </div>
  );
}

React `&&` chain on nullish

For undefined and null (collectively called nullish as discussed in our JavaScript course), React also renders nothing and therefore we can use is similar to booleans

App.tsx

import { useState } from "react";

type User = { name: string } | null;

export default function App() {
  const [user, setUser] = useState<User>(null);
  const load = () => setUser({ name: "Jane" });
  const clear = () => setUser(null);

  return (
    <>
      <div>
        <button onClick={load}>Load</button>
        <button onClick={clear}>Clear</button>
      </div>

      {user && <p>{user.name}</p>}
    </>
  );
}

JavaScript `!!` operator

A quick recap of something we learnt in our JavaScript course, !! operator converts all Falsy values to boolean false

console.log(!!false); // false
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!''); // false
console.log(!!0); // false
console.log(!!NaN); // false

React `&&` chain on numbers

We can convert falsy numbers to literal false by using !! before using them in conditional rendering with &&. This way all conditional rendering in React is done with && allowing us to write concise consistent code.

App.tsx

db.ts

import { useState } from "react";
import { db } from "./db";

export default function App() {
  const [messages, setMessages] = useState<string[]>([]);
  const addMessage = () => {
    if (messages.length === db.length) return;
    setMessages([...messages, db[messages.length]]);
  }
  const removeMessage = () =>
    setMessages(messages.slice(0, messages.length - 1));

  return (
    <div className="App">
      <div>
        <button onClick={addMessage}>Add</button>
        <button onClick={removeMessage}>Remove</button>
      </div>
      {!!messages.length && (
        <ul>
          {messages.map((message) => (
            <li>{message}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Transcript