- We've added a new type:
SerializeFrom
. This is used to infer the (#4013) JSON-serialized return type of loaders and actions.
- Unblock hydration via async module scripts. (#3918)
- Previously, if an
action
was omitted from<Form>
oruseFormAction
, the action value would default to"."
. This is incorrect, as"."
should resolve based on the current path, but an empty action resolves relative to the current URL (including the search and hash values). We've fixed this to differentiate between the two, meaning that the resolved action will preserve the full URL. (#3697) - Enhanced some types to work more seamlessly with React 18 (#3917)
- Added a subscribe method to the transition manager, which allows subscribing and unsubscribing for React 18 strict mode compliance (#3964)
- Fix inferred types for
useLoaderData
anduseActionData
to preservenull
value types (#3879)
- Allow the
ReadonlyArray
type inSerializeType
for action and loader data (#3774) - Support undefined unions as optional keys in types returned from
useLoaderData
anduseActionData
(#3766)
-
We enhanced the type signatures of
loader
/action
anduseLoaderData
/useActionData
to make it possible to infer the data type from return type of its related server function.To enable this feature, you will need to use the
LoaderArgs
type from your Remix runtime package instead of typing the function directly:- import type { LoaderFunction } from "@remix-run/[runtime]"; + import type { LoaderArgs } from "@remix-run/[runtime]"; - export const loader: LoaderFunction = async (args) => { - return json<LoaderData>(data); - } + export async function loader(args: LoaderArgs) { + return json(data); + }
Then you can infer the loader data by using
typeof loader
as the type variable inuseLoaderData
:- let data = useLoaderData() as LoaderData; + let data = useLoaderData<typeof loader>();
The API above is exactly the same for your route
action
anduseActionData
via theActionArgs
type.With this change you no longer need to manually define a
LoaderData
type (huge time and typo saver!), and we serialize all values so thatuseLoaderData
can't return types that are impossible over the network, such asDate
objects or functions. -
Add
WebSocket
reconnect toLiveReload