state-management.md

State Management

In this project, state management is categorized into several types.

Component State

This type of state is specific to a component and isn't intended to be shared elsewhere. However, you can pass it as a prop to children components when necessary. Typically, starting with component state is recommended, and if needed elsewhere, you can lift the state up.

Used in this project:

• useState: for simpler, independent states

Other options:

• useReducer: for more complex states where a single action updates several pieces of state

Example Code

Global State

Global state is shared across multiple components and is managed using a state management library. For optimal performance and maintainability, it's advised to keep the state close to the components using it, rather than making everything global from the start.

Used in this project:

• Redux + Redux Toolkit

Example Code

Server Cache State

This type of state originates from the server and is cached on the client for future use. While it's possible to store remote data inside a state management store like Redux, there are specialized solutions for this purpose.

Used in this project:

• RTK Query

Other options:

• react-query
• swr
• apollo client
• urql

Example Code

Form State

This type of state tracks user inputs in a form.

Used in this project:

• React Hook Form

Other options:

• Formik
• React Final Form

You can integrate validation libraries with these solutions for client-side input validation. Some good options include:

• yup (Used in this project)
• zod

Example Code

URL State

Certain state can be stored in the URL as query parameters, often used for things like filters and pagination in lists.

This state is typically tracked via URL params (/app/${dynamicParam}) or query params (/app?dynamicParam=1). Access and control can be managed through your routing solution, such as react-router-dom.

Example Code

Persistent State

Some state needs to persist across browser sessions and is stored in localStorage or sessionStorage.

Example Code