Remix is ​​a full-stack framework based on React and Node developed by the React Router development team to solve some of the tricky problems developers face when developing with React.

Remix 1.9 is released, the updates are as follows:

Support for optional route segments for React Router

We supported optional route segments in the latest minor release of React Router 6.5.0, and now Remix supports them too. To this end, we introduce a new convention for filesystem routing.

Route filenames surrounded by parentheses will be converted to optional sections for React Router. E.g, /($lang)/about will be converted to /:lang?/about.

this means /($lang)/about will match:

/en/about
/fr/about
/about  <-- $lang is optional!

Added support for new TypeScript syntax

The Remix compiler now supports the new TypeScript 4.9 syntax. In the latest TypeScript version, there are several cool features.

One of our favorite features is satisfies keyword that lets you verify that an expression conforms to a given type — without changing the expression’s result type.

// this example comes from the TypeScript 4.9 release notes
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255]
//  ~~~~ The typo is now caught!
} satisfies Record<Colors, string | RGB>;
// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

Routing Performance Improvement

Sometimes, you can reap huge benefits from small changes.We defineConventionalRoutes The lookup algorithm in .

On a local run of a production build of a larger, realistic project (~700 routes):

• Before: 10-15 seconds
• Now: 1 second, 10x faster

Bugfixes: Firefox and <LiveReload>

Fixed in Firefox <LiveReload> An issue in , which caused the page to reload infinitely after a change.

For more details, please check: https://github.com/remix-run/remix/releases/tag/remix%401.9.0