Retour aux articles

Actualité Remix : v2.3, Nouveaux hooks, flushSync & Vite 5.0

Remix v2.3
2 minutes de lecture- 13 vues

La version 2.3 de Remix vient de sortir. Et tu risques d'aimer son nouveau hook.

Présentation du hook useBlockerHeader Icon

useBlocker te permet de bloquer la navigation interne dans ton application Remix, conditionnellement. Marre d'avoir des utilisateurs qui ne remplissent pas entièrement le formulaire ? Avec ce hook, tu vas pouvoir afficher un composant s'ils essaient de quitter la page. Une fois la navigation bloquée, tu laisses le choix à tes visiteurs de confirmer leur action (quitter la page) ou annuler (rester sur la page).

L'exemple ci-dessous, présent dans la documentation de Remix nous explique comment utiliser ce hook.

formulaire.tsx

_36
function ImportantForm() {
_36
const [value, setValue] = React.useState("");
_36
_36
// Block navigating elsewhere when data has been entered into the input
_36
const blocker = useBlocker(
_36
({ currentLocation, nextLocation }) =>
_36
value !== "" &&
_36
currentLocation.pathname !== nextLocation.pathname
_36
);
_36
_36
return (
_36
<Form method="post">
_36
<label>
_36
Enter some important data:
_36
<input
_36
name="data"
_36
value={value}
_36
onChange={(e) => setValue(e.target.value)}
_36
/>
_36
</label>
_36
<button type="submit">Save</button>
_36
_36
{blocker.state === "blocked" ? (
_36
<div>
_36
<p>Are you sure you want to leave?</p>
_36
<button onClick={() => blocker.proceed()}>
_36
Proceed
_36
</button>
_36
<button onClick={() => blocker.reset()}>
_36
Cancel
_36
</button>
_36
</div>
_36
) : null}
_36
</Form>
_36
);
_36
}

Présentation du hook usePrompt (instable)Header Icon

usePrompt (instable) te permet également de bloquer la navigation interne. Seule différence ? Il utilise la fenêtre native de confirmation de ton navigateur. (Tu n'as pas à créer un composant personnalisé)

formulaire.tsx

_25
function ImportantForm() {
_25
const [value, setValue] = React.useState("");
_25
_25
// Block navigating elsewhere when data has been entered into the input
_25
unstable_usePrompt({
_25
message: "Are you sure?",
_25
when: ({ currentLocation, nextLocation }) =>
_25
value !== "" &&
_25
currentLocation.pathname !== nextLocation.pathname,
_25
});
_25
_25
return (
_25
<Form method="post">
_25
<label>
_25
Enter some important data:
_25
<input
_25
name="data"
_25
value={value}
_25
onChange={(e) => setValue(e.target.value)}
_25
/>
_25
</label>
_25
<button type="submit">Save</button>
_25
</Form>
_25
);
_25
}

Nouveau paramètre flushSync pour la soumission des formulairesHeader Icon

flushSync (instable) n'est pas un hook, mais il s'utilise de pair avec les hooks useSubmit() et useFetcher() pour soumettre les formulaires.

Cette fonctionnalité est similaire à la méthode flushSync de React (qui te permet de commit les changements d'état de manière synchrone)

La version v2.2 de Remix ajoutait le support instable du compilateur Vite. De son côté, Vite est passé en version 5.0, ce qui implique une optimisation des performances.

Articles similaires
Gère les erreurs avec le framework Remix.js
6 minutes de lecture - 326 vuesRemixReactJS

Comment gérer les erreurs avec Remix ? (ErrorBoundary)

Avoir des erreurs Javascript ne fait jamais plaisir. Mais il existe le composant ErrorBoundary). Dans ce guide, tu vas découvrir comment afficher un composant d'erreur personnalisé en pour protéger toutes les pages de ton application.

Rejoins la

newsletter