react-router VS vite

Recently, I was working on a React Router v7 application where I needed to display a toast notification after a (un)successful form submission. Naturally, I used an action to return the submission status and utilized it inside a useEffect to trigger the toast. Here's what my initial code looked like:

+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router' export const InteractiveDemo = () => { return ( + // Hack to nest MemoryRouter inside BrowserRouter. + // https://github.com/remix-run/react-router/issues/7375 + + + + ) }

A simple React, Vite, and react-router setup can go a long way.

Now, I'm not saying it's the only option. Remix is still awesome for full-stack apps, and there's this new kid on the block called Tanstack Start that's doing some cool things so make sure to keep an eye out. And hey, if you just need routing, React Router V7 was recently launched.

The standard for handling navigation in React apps. It allows you to handle navigation between different components and pages seamlessly. 🔗reactrouter.com

react-router adds about 30 kB (minified) to your bundle, while wouter requires less than 4 kB. Although the react-router team has made significant efforts in version 7 to optimize its bundle size, it still feels excessive if your primary task is simply switching between a few routes.

react-router-dom: Enables client side routing.

React Router Documentation

We'll use React with Vite, shadcn/ui (a collection of reusable components I have been wanting to try for a while), React Hook Form for form management, and Zod for schema-based form validation.

Recently, a ticket was added to our sprint with the goal of reducing packages with critical and high vulnerabilities in a legacy project. The task involved migrating a Vue 2 project using Vue CLI as the build tool to Vite.

Tools like Vite should be used to build React components and JSX into a javascript bundle that can be executed in the browser.

Start a new TypeScript project called ‘wasm-on-web’ with Vite (or your framework of choice, if any)

Astro Next.js Remix Vite Tanstack Start

A simple React, Vite, and react-router setup can go a long way.

Repo: Vite React TypeScript Starter

Vite is a modern JavaScript build tool designed to provide a faster and leaner development experience for web projects. Pronounced “veet,” Vite is French for “quick” or “fast,” reflecting its focus on speed and efficiency.