Zustand with React: A Simple Exercise

The Zustand part is based on the tutorial "Zustand - Complete Tutorial" by Cosden Solutions.

Base concepts of Zustand:

Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.
The generated custom hook is not exactly a hook, because we can use it outsizes the react components within regular functions.
In contrast of Redux Zustand doesn't use a complex state provider, but as we said it uses hooks.
It deals with common pitfalls, like the dreaded zombie child problem, React concurrency, and context loss between mixed renderers. It may be the one state manager in the React space that gets all of these right.

React + TypeScript + Vite + Zustand

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

In addition in this boilerplate is added support for SASS and the current latest version of TypeScript - 5.5.2.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

pa4080/exc.react-zustand

Zustand with React: A Simple Exercise

React + TypeScript + Vite + Zustand

Expanding the ESLint configuration