Latest tips

Actors in XState implement an RxJS-compatible Observable interface. Instead of directly subscribing to the actor, you can use RxJS from():

// Create the actor (also works with `fromPromise`, ...)
const machine = setup({ ... }).createMachine({ ... });
const actor = createActor(machine).start();

// Subscribe to it, the normal way
actor.subscribe((snapshot) => console.log(snapshot));

// Subscribe to it using RxJS
from(actor).subscribe((snapshot) => console.log(snapshot));

Now that's not much of a difference. But it gets more powerful when you use operators to transform and filter the snapshot, or combine it with other observables.

from(actor)
  .pipe(
    startWith(actor.getSnapshot()),
    map((snapshot) => snapshot.context.value),
    filter((value) => checkValue(value)),
    distinctUntilChanged()
  )
  .subscribe((value) => console.log(value));

Vitest's describe() function is commonly used with a string to label a test group, like this:

describe("myFunction", () => {
  test("should return true", () => {
    expect(myFunction()).toBe(true);
  });
});

Did you know you can also pass a class or function instead of a string to describe()? Vitest won't execute the function but will use its name as the label for the test group.

//       ↓ Pass a function
describe(myFunction, () => {
  test("should return true", () => {
    expect(myFunction()).toBe(true);
  });
});

This approach works well with React components too (since they are just functions):

describe(Greeting, () => {
  test("should render correctly", () => {
    render(<Greeting />);
    expect(screen.getByText("Hello World")).toBeInTheDocument();
  });
});

A capturing group (...) groups a subpattern. For example, ([A-Z]\d) matches a letter followed by a digit, like "A1". A backreference, denoted by \1, \2, etc., refers to a previous capturing group and matches the same text as that group.

For instance, in the pattern ([A-Z]\d)\1, \1 refers to the first capturing group ([A-Z]\d), ensuring that the same letter-digit combination is repeated.

const pattern = /([A-Z]\d)\1/;

pattern.test("A1A1"); // true
pattern.test("A1B1"); // false

You can also use a backreference with quantifiers:

const pattern = /(\d)\1{2}/;

pattern.test("111"); // true
pattern.test("122"); // false

The ESLint Config Inspector allows you to examine your flat configuration. It displays the rules you have set up and the files to which they apply. Use the following command to inspect your configuration:

eslint --inspect-config

Naming your config objects will help you easily identify them when using the inspector:

// eslint.config.js
export default [
  {
    name: "common", // <-- Define a name
    rules: {
      "no-console": "error",
    },
  },
  {
    name: "react", // <-- Define a name
    plugin: { react },
    rules: {
      "react/jsx-boolean-value": "error",
    },
  },
];

When developing features such as a country selector, a currency picker, or a language switcher, you often need to display the names of countries, currencies, and languages translated into the user's language. JavaScript's Intl.DisplayNames object is a handy tool for this purpose.

To use Intl.DisplayNames, create a new instance by specifying the user's current language and the type of display names you need. Then, retrieve the translated display name using the of() method. In the following example, we generate the display name for the US region in both English and German.

const regionEnglish = new Intl.DisplayNames("en", { type: "region" });
regionEnglish.of("US"); // United States

const regionGerman = new Intl.DisplayNames("de", { type: "region" });
regionGerman.of("US"); // Vereinigte Staaten

By altering the type parameter in the Intl.DisplayNames constructor, you can retrieve display names for different categories such as languages or currencies.

const lang = new Intl.DisplayNames("en", { type: "language" });
lang.of("en-US"); // American English
lang.of("fr"); // French

const currency = new Intl.DisplayNames("en", { type: "currency" });
currency.of("USD"); // US Dollar