TL;DR

Remix now supports server actions with useTransition for improved user experience when performing server-side updates, allowing for optimistic UI updates during data fetching.

New

• Server Actions now support useTransition (React hook) for seamless optimistic UI updates.
• Improved error handling for server actions provides more informative error messages.

Fixes Worth Knowing

• Fixed an issue where server actions would sometimes not revalidate data correctly, ensuring data consistency.
• Resolved a bug causing incorrect form submission behavior with nested routes.

TL;DR

Remix UI components have a breaking change: props are now accessed via a handle object instead of being passed directly to render functions. Additionally, route pattern matching and URL creation have been improved to handle percent-encoded characters more consistently.

Breaking

• Remix UI Components: Props are no longer passed as arguments to component render functions. Access props via the handle.props property on a Handle object.

New

• Route Pattern Matching: Improved handling of percent-encoded characters in pathnames for more consistent matching.
• URL Creation: createHref now encodes pathname parameters and validates hostname parameters for safer URLs.

Fixes Worth Knowing

• Memcache Session Storage: Fixed an issue where ttlSeconds values over 30 days were misinterpreted, ensuring relative durations are correctly applied.
• UI Anchors: The anchor function now accepts coordinate targets in addition to HTML elements.
• UI CSS: Fixed nested CSS selector rendering.

Before You Upgrade

• Update your Remix UI components to access props via the handle.props property instead of function arguments.
• Review any custom URL creation logic using createHref to ensure encoded parameters are handled correctly.

TL;DR

Remix UI now supports context menus via menu.contextTrigger(), allowing menus to open from right-click locations while maintaining existing keyboard and submenu functionality.

New

• Context Menus: The remix/ui/menu component gains menu.contextTrigger() for right-click menu support.
• Anchor Updates: The remix/ui/anchor component now accepts coordinate targets alongside HTML elements for more flexible positioning (anchor points).

Fixes Worth Knowing

• Updated dependencies across the @remix-run/* packages to the latest versions, improving stability and incorporating bug fixes from those packages.

TL;DR

Remix applications using lazy-file will now correctly handle slicing operations on already-sliced file segments, preventing unexpected behavior when working with large files (data streaming).

Fixes Worth Knowing

Slicing a LazyBlob or LazyFile that has already been sliced now calculates the new slice relative to the current slice, rather than the original file. This resolves issues with incorrect data ranges when repeatedly slicing file segments.

TL;DR

Remix applications using lazy-file must now import file system utilities (reading/writing files) directly from @remix-run/fs instead of @remix-run/lazy-file/fs.

Breaking

• Removed lazy-file/fs export. (Use @remix-run/fs instead.)

New

• Improved MIME type detection. (Determines file types more accurately.)

Fixes Worth Knowing

None.

Before You Upgrade

Replace all imports of lazy-file/fs with @remix-run/fs in your codebase.

TL;DR

Remix applications using lazy-file need to be reviewed as the openFile() function now preserves the full path in file.name, potentially breaking code relying on just the filename.

Breaking

• openFile()'s file.name property now includes the full path (file system location) instead of just the filename.

New

• Added findFile() function (utility for locating files) to simplify asset discovery.

Fixes Worth Knowing

• None.

Before You Upgrade

• Review any code that accesses file.name after calling openFile() and update it to handle the full path or explicitly set the name option.

TL;DR

Remix now displays deprecation warnings for older configuration options and the @remix-run/netlify package, guiding users toward current best practices for deployment and development.

Breaking

• @remix-run/netlify is deprecated (use @netlify/remix-adapter instead).
• devServerBroadcastDelay and devServerPort are deprecated (development server configuration).

Fixes Worth Knowing

• Security vulnerability resolved (npm audit).
• Improved source maps (debugging tool).

Before You Upgrade

If you are using @remix-run/netlify, migrate to @netlify/remix-adapter for continued support.

TL;DR

Remix now supports nested routes, allowing for more complex and organized application structures.

Breaking

• Route paths must now include a trailing slash / (required for nested routes).

New

• Nested routes enable building more complex UIs (hierarchical page structures).
• useLoaderData now accepts a selector function (function to extract specific data).

Fixes Worth Knowing

• Improved error messages for data loading issues (helps with debugging).

Before You Upgrade

• Update all route file paths to include a trailing slash.

TL;DR

Remix now supports file uploads within <Form> components, significantly improving handling of user-submitted files.

Breaking

• browserBuildDirectory is deprecated; use assetsBuildDirectory instead (configuration setting).

New

• <Outlet context> allows passing UI state to nested routes (component prop).
• Asset prefetching is now supported for any asset type via route links (performance enhancement).
• ESM output is now available for server builds (module format).

Fixes Worth Knowing

• <Form> now correctly appends values to search params instead of overriding them.
• Builds are more reliable across different environments.

Before You Upgrade

• Update your Remix configuration to use assetsBuildDirectory instead of browserBuildDirectory.

TL;DR

Remix now supports Server Actions, enabling you to directly call server-side functions from your components without API routes (web development technique).

Breaking

• Server Actions replace Form Actions; update your forms accordingly (form submission handling).

New

• Server Actions provide a simpler, more type-safe way to mutate data (data modification) directly from components.
• Improved error handling for Server Actions with better visibility into failures.

Fixes Worth Knowing

• Fixed a bug where Remix would sometimes incorrectly invalidate data on route transitions.

Before You Upgrade

• Review your form submissions and migrate from Form Actions to Server Actions.