Actualité Remix : v2.3, Nouveaux hooks, flushSync & Vite 5.0
La version 2.3 de Remix vient de sortir. Et tu risques d'aimer son nouveau hook.
Présentation du hook useBlocker
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.
1function ImportantForm() {2const [value, setValue] = React.useState("");34// Block navigating elsewhere when data has been entered into the input5const blocker = useBlocker(6({ currentLocation, nextLocation }) =>7value !== "" &&8currentLocation.pathname !== nextLocation.pathname9);1011return (12<Form method="post">13<label>14Enter some important data:15<input16name="data"17value={value}18onChange={(e) => setValue(e.target.value)}19/>20</label>21<button type="submit">Save</button>2223{blocker.state === "blocked" ? (24<div>25<p>Are you sure you want to leave?</p>26<button onClick={() => blocker.proceed()}>27Proceed28</button>29<button onClick={() => blocker.reset()}>30Cancel31</button>32</div>33) : null}34</Form>35);36}
Présentation du hook usePrompt (instable)
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é)
1function ImportantForm() {2const [value, setValue] = React.useState("");34// Block navigating elsewhere when data has been entered into the input5unstable_usePrompt({6message: "Are you sure?",7when: ({ currentLocation, nextLocation }) =>8value !== "" &&9currentLocation.pathname !== nextLocation.pathname,10});1112return (13<Form method="post">14<label>15Enter some important data:16<input17name="data"18value={value}19onChange={(e) => setValue(e.target.value)}20/>21</label>22<button type="submit">Save</button>23</Form>24);25}26
Nouveau paramètre flushSync pour la soumission des formulaires
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.