Remixed React Router


Very soon React Router v6.4's going to be released with a metric ton of new features, integrating the best of remix.run data fetching straight into react router, streamlining how requests are made across routes as well as how data is managed in basically all applications.

import { useLoaderData, Link } from "react-router-dom"; export async function loader() { return [ { id: "abc", title: "Fake Note", content: "We'll replace this with real data soon", }, ]; } export default function Root() { const notes = useLoaderData(); return ( <div> {notes.map((note) => ( <div key={note.id}> <Link to={`/note/${note.id}`}>{note.title}</Link> </div> ))} <Outlet /> </div> ); }

As you can see, defining the loader function directly in the route it allows for easy prefetching and universal data management. Can't wait to implement this on some of my sites. What will also be interesting to see is how vercel's SWR data management changes, if at all.

This update will allow developers to better organise the structure of their app around React's component system. Limiting updates to visible components and using data only where it is necessary.

Another post will be forthcoming once the update is fully released into the wild.