zustand VS vite

Zustand

Link: https://zustand-demo.pmnd.rs/

You add the current user state to a React Context or state management library, read from it on the top bar, and write to it after a user signs in. Done. No big deal, right?

Zustand

Reducer-based: requires dispatching actions to update a big centralised state, often called a “single source of truth”. In this group, we have Redux and Zustand.

DEV is a Rails monolith, which uses Preact in the front-end using islands architecture. The reason why I mention all this is that it's not a full-stack JavaScript application, and there is no state management library like Redux or Zustand in use. The data store, for the most part on the front end, is all data attributes.

Zustand on GitHub

Maybe you heard about Redux, Zustand or MobX. All of them are state management libraires for React. But why would you even need one? And should you learn one now?

First you have to know that all those react projects are created using Vite, and for each of them, you need change the vite.config.ts file by adding the following configuration:

JavaScript React Flowbite Tailwind Firebase - Auth, Database, and Hosting Vite

For this full-stack single-page app, you'll use Vite.js as your frontend build tool and the react-beautiful-dnd package for draggable items.

Vite

Imagine a shiny new React app — that’s what we’ll build! We’ll use a cool tool called Vite to set it up.

If you want to learn more about the Vite build tool here is a link to the documentation.

We all know what React is at this point, but why use it with Vite and React Router DOM over something like NextJS?

Vite [ https://vitejs.dev/ ]

A great example of this is the introduction to the Vite project.

/** * On component mount, initialze the worker. */ useEffect(() => { if (window.Worker) { // Refer to the Vite's Query Suffix syntax for loading your custom worker: https://vitejs.dev/guide/features.html#import-with-query-suffixes const worker = new CustomWorker(); workerRef.current = worker; } }, []);