# State Management Standards for React

This document outlines standards and best practices for state management in React applications. It aims to guide developers in choosing appropriate state management solutions, implementing them effectively, and writing maintainable, performant, and scalable React code.

## 1. Choosing the Right State Management Approach

Selecting the right state management is crucial for structuring React applications effectively. The choice depends on application size, complexity, and team preferences.

### 1.1. Standard: Understanding State Management Options

* **Considerations:**

* **Component State (useState, useReducer):** Suitable for simple, localized state within individual components.

* **Context API (useContext):** Appropriate for prop drilling avoidance and sharing data between components at different levels in the component tree, for data that changes infrequently.

* **Third-Party Libraries (Redux, Zustand, Recoil, Jotai):** Necessary for complex applications requiring global state management, predictable state mutations, and advanced features like middleware or atom-based state.

* **Do This:** Carefully evaluate your application's requirements before choosing a state management approach. Start with simpler solutions like component state and Context API and only adopt more complex libraries if truly needed.

* **Don't Do This:** Over-engineer state management by using a global state management solution for a small application where component state or Context API would suffice.

### 1.2. Standard: Application Size and Complexity as Determinants

* **Considerations:**

* **Small Applications:** Favor "useState" and "useReducer" for component-level state. Context API is useful for theme or user settings

* **Medium-Sized Applications:** Employ Context API combined with "useReducer" for managing more complex state that needs to be shared across a moderate number of components.

* **Large Applications:** Utilize state management libraries like Redux, Zustand, Recoil, or Jotai for centralized control, predictability, and scalability.

* **Do This:** Document your rationale for choosing a particular state management solution, outlining its benefits and trade-offs for your specific application context.

* **Don't Do This:** Migrating between state management solutions mid-development. This is costly and risky. Make an informed decision upfront.

### 1.3. Standard: Team Familiarity and Ecosystem

* **Considerations:**

* **Team Expertise:** Select solutions that your team is already familiar with or willing to learn quickly.

* **Ecosystem Support:** Choose libraries with strong community support, comprehensive documentation, and available tooling (e.g., Redux DevTools).

* **Do This:** Conduct workshops or training sessions to familiarize the team with new state management libraries before adopting them in a project.

* **Don't Do This:** Pick a niche or experimental state management library without considering its maturity, community support, and long-term maintainability.

## 2. Component State Management (useState, useReducer)

"useState" and "useReducer" are essential for managing local component state in React. Understanding their proper use is crucial for building efficient components.

### 2.1. Standard: useState for Simple State

* **Considerations:** "useState" is ideal for managing simple data types like strings, numbers, booleans, and arrays that don't require complex update logic.

* **Do This:** Use descriptive variable names for state and update functions.

* **Don't Do This:** Store derived data in "useState". Instead, calculate it within the component's render logic using "useMemo". Re-calculating values is acceptable as long as it does not cause performance bottlenecks.

"""jsx

import React, { useState, useMemo } from 'react';

function Counter() {

const [count, setCount] = useState(0);

const [multiplier, setMultiplier] = useState(2);

const doubledCount = useMemo(() => {

console.log('Calculating doubled count'); // Only calculate when count or multiplier changes

return count * multiplier;

}, [count, multiplier]);

return (

Count: {count}

Doubled Count: {doubledCount}

setCount(count + 1)}>Increment

setMultiplier(multiplier + 1)}>Increment Multiplier

);

}

"""

* **Why:** Clear naming enhances readability and maintainability. Avoiding redundant state prevents inconsistencies and improves performance. "useMemo" prevents expensive calculations on every re-render if the dependent values have not changed.

### 2.2. Standard: useReducer for Complex State

* **Considerations:** "useReducer" is suitable for managing state with multiple sub-values, complex or related update logic, or when state updates depend on the previous state.

* **Do This:** Define a clear reducer function that handles different actions consistently and returns the new state immutably.

* **Don't Do This:** Directly mutate the state within the reducer. Always return a new state object or array.

"""jsx

import React, { useReducer } from 'react';

const initialState = { count: 0, step: 1 };

function reducer(state, action) {

switch (action.type) {

case 'increment':

return { ...state, count: state.count + state.step };

case 'decrement':

return { ...state, count: state.count - state.step };

case 'setStep':

return { ...state, step: action.payload };

default:

throw new Error();

}

function Counter() {

const [state, dispatch] = useReducer(reducer, initialState);

return (

Count: {state.count}

Step: {state.step}

dispatch({ type: 'increment' })}>Increment

dispatch({ type: 'decrement' })}>Decrement

dispatch({ type: 'setStep', payload: 5 })}>Set Step to 5

);

}

"""

* **Why:** Reducers promote predictable state updates and simplify debugging. Immutability ensures that React can efficiently detect changes and re-render components.

### 2.3. Standard: Grouping Related State

* **Considerations:** When dealing with multiple related pieces of state, group them into a single state object managed by "useState" or "useReducer".

* **Do This:** Create cohesive state objects to represent logical units of data.

* **Don't Do This:** Scatter related state across multiple independent "useState" hooks, as it can make components harder to reason about.

"""jsx

import React, { useState } from 'react';

function Form() {

const [formData, setFormData] = useState({

firstName: '',

lastName: '',

email: '',

});

const handleChange = (e) => {

const { name, value } = e.target;

setFormData({ ...formData, [name]: value });

};

return (

);

}

"""

* **Why:** Grouping related state improves code organization and simplifies state updates.

## 3. Context API for Prop Drilling Avoidance

The Context API provides a way to pass data through the component tree without manually passing props at every level.

### 3.1. Standard: Context Usage for Shared Data

* **Considerations:** Context is excellent for theme settings, authentication status, or user preferences.

* **Do This:** Create a context provider at the top level where the data is needed and consume the context using "useContext" in descendant components.

"""jsx

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {

const [theme, setTheme] = useState('light');

const toggleTheme = () => {

setTheme(theme === 'light' ? 'dark' : 'light');

};

return (

{children}

);

}

function useTheme() {

return useContext(ThemeContext);

}

function ThemedComponent() {

const { theme, toggleTheme } = useTheme();

return (

Current Theme: {theme}

Toggle Theme

);

}

function App() {

return (

);

}

"""

* **Why:** Context reduces prop drilling, making components more modular and reusable.

### 3.2. Standard: Context with useReducer for Complex State

* **Considerations:** For more complex context data with predictable updates, use the Context API in conjunction with "useReducer".

* **Do This:** Encapsulate the state logic within a reducer and provide the dispatch function through the context provider.

* **Don't Do This:** Overuse context for highly dynamic data that changes frequently, as it can lead to performance issues due to unnecessary re-renders. Consider libraries designed for performance optimization in such cases.

"""jsx

import React, { createContext, useContext, useReducer } from 'react';

const CartContext = createContext();

const initialState = { items: [] };

function cartReducer(state, action) {

switch (action.type) {

case 'ADD_ITEM':

return { ...state, items: [...state.items, action.payload] };

case 'REMOVE_ITEM':

return { ...state, items: state.items.filter(item => item.id !== action.payload) };

default:

return state;

}

function CartProvider({ children }) {

const [state, dispatch] = useReducer(cartReducer, initialState);

return (

{children}

);

}

function useCart() {

return useContext(CartContext);

}

function CartItem({ item }) {

const { dispatch } = useCart();

return (

{item.name} - ${item.price}

dispatch({ type: 'REMOVE_ITEM', payload: item.id })}>

Remove

);

}

function ShoppingCart() {

const { state } = useCart();

return ({state.items.map(item => )})

}

function App() {

return (

);

}

"""

* **Why:** Combining Context API with "useReducer" allows for effective management of global/shared state with more complex update mechanisms.

## 4. Third-Party State Management Libraries

When component state or Context API becomes insufficient, consider using dedicated state management libraries. Here are some popular options:

### 4.1. Standard: Redux for Predictable State

* **Considerations:** Redux promotes a unidirectional data flow with centralized state, actions, and reducers.

* **Do This:** Follow the Redux principles strictly by defining clear actions, reducers, and middleware (e.g., Redux Thunk for asynchronous actions). Use Redux Toolkit to simplify Redux setup and reduce boilerplate.

"""jsx

// Store.js using Redux Toolkit

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from './features/counter/counterSlice';

export const store = configureStore({

reducer: {

counter: counterReducer,

});

// features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {

value: 0,

};

export const counterSlice = createSlice({

name: 'counter',

initialState,

reducers: {

increment: (state) => {

state.value += 1;

decrement: (state) => {

state.value -= 1;

incrementByAmount: (state, action) => {

state.value += action.payload;

});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

// Component

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

function Counter() {

const count = useSelector((state) => state.counter.value);

const dispatch = useDispatch();

return (

Count: {count}

dispatch(increment())}>Increment

dispatch(decrement())}>Decrement

dispatch(incrementByAmount(5))}>Increment by 5

);

}

"""

* **Why:** Redux ensures predictable state management, making it easier to debug and test complex applications. Redux Toolkit reduces setup complexity and provides best-practice configurations.

### 4.2. Standard: Zustand for Simplicity and Ease of Use

* **Considerations:** Zustand offers a simpler and more lightweight alternative to Redux with a focus on ease of use and minimal boilerplate.

* **Do This:** Define stores using the "create" function and access state and actions directly within components using "useStore".

"""jsx

import create from 'zustand';

const useStore = create((set) => ({

count: 0,

increment: () => set((state) => ({ count: state.count + 1 })),

decrement: () => set((state) => ({ count: state.count - 1 })),

}));

function Counter() {

const { count, increment, decrement } = useStore();

return (

Count: {count}

Increment

Decrement

);

}

"""

* **Why:** Zustand simplifies state management, making it a good choice for smaller to medium-sized applications where Redux might be overkill.

### 4.3. Standard: Recoil for Fine-Grained Updates

* **Considerations:** Recoil introduces the concept of atoms (units of state) and selectors (derived state), allowing for fine-grained updates and efficient re-renders.

* **Do This:** Define atoms for individual pieces of state and selectors for computed values that depend on those atoms.

"""jsx

import { RecoilRoot, atom, useRecoilState } from 'recoil';

const countState = atom({

key: 'countState',

default: 0,

});

function Counter() {

const [count, setCount] = useRecoilState(countState);

return (

Count: {count}

setCount(count + 1)}>Increment

setCount(count - 1)}>Decrement

);

}

function App() {

return (

);

}

"""

* **Why:** Recoil optimizes performance by only re-rendering components that depend on the specific atoms that have changed.

### 4.4. Immer.js for Simplified Immutable Updates

* **Considerations**: Immer simplifies immutable updates by allowing you to work with a mutable draft of the state. Immer ensures that you never accidentally modify the original state object.

"""jsx

import { useImmer } from "use-immer";

function Form() {

const [person, updatePerson] = useImmer({

firstName: "Bob",

lastName: "Smith",

});

function handleFirstNameChange(e) {

updatePerson(draft => {

draft.firstName = e.target.value;

});

}

function handleLastNameChange(e) {

updatePerson(draft => {

draft.lastName = e.target.value;

});

}

return (

Hello, {person.firstName} {person.lastName}!

);

}

"""

* **Why**: Reduces boilerplate in reducers and simplifies complex state mutations.

## 5. Best Practices and Anti-Patterns

### 5.1. Standard: Immutability

* **Do This:** Always treat state as immutable. Create new state objects or arrays instead of modifying existing ones.

* **Don't Do This:** Directly mutate the state.

"""jsx

// Correct: Creating a new array

const addItem = (item) => {

setItems([...items, item]);

};

// Incorrect: Mutating the existing array

const addItem = (item) => {

items.push(item); // BAD! Directly mutating state

setItems(items); // React may not detect the change!

};

"""

* **Why:** Immutability ensures predictable state management, simplifies debugging, and allows React to optimize rendering performance.

### 5.2. Standard: Avoiding Unnecessary Re-renders

* **Do This:** Use "React.memo", "useMemo", and "useCallback" to prevent components from re-rendering when their props or dependencies haven't changed.

* **Don't Do This:** Pass new objects or function instances as props to child components on every render, as this will always trigger re-renders.

"""jsx

import React, { useState, useCallback, memo } from 'react';

const MyComponent = memo(({ onClick, data }) => {

console.log('MyComponent rendered');

return (

{data.value}

);

});

function ParentComponent() {

const [count, setCount] = useState(0);

const data = { value: count }; // This will cause re-renders

//Create the function one time with useCallback

const handleClick = useCallback(() => {

setCount(count + 1);

}, [count]);

return (

);

}

"""

* **Why:** Optimizing re-renders improves the performance of React applications, especially those with complex UIs.

### 5.3. Standard: Async State Updates

* **Do This:** When updating state based on previous state asynchronously (e.g., after an API call), use the functional form of "setState" or dispatch actions with computed payloads based on the existing state.

* **Don't Do This:** Rely on the value of state variables immediately after calling "setState", as the update is asynchronous and the value might not be updated yet.

"""jsx

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

const incrementAsync = () => {

setTimeout(() => {

setCount((prevCount) => prevCount + 1); // Functional update

}, 1000);

};

return (

Count: {count}

Increment Async

);

}

"""

* **Why:** Using the functional form ensures that you're updating the state based on the correct previous value, even in asynchronous scenarios.

This document provides a comprehensive guideline for managing state in React applications. Following these standards will result in more maintainable, performant, and scalable React applications. Regularly review and update these standards to align with the evolving landscape of React development.

Cline

This guide explains how to effectively use .clinerules with Cline, the AI-powered coding assistant.

Overview

The .clinerules file is a powerful configuration file that helps Cline understand your project's requirements, coding standards, and constraints. When placed in your project's root directory, it automatically guides Cline's behavior and ensures consistency across your codebase.

Key Concepts

Purpose of .clinerules

Defines project-specific guidelines and requirements
Enforces consistent coding standards
Establishes documentation practices
Sets testing and quality requirements
Configures error handling preferences

File Location

Place the .clinerules file in your project's root directory. Cline automatically detects and follows these rules for all files within the project.

Rule Structure

1. Project Overview

# Project Overview
project:
  name: 'Your Project Name'
  description: 'Brief project description'
  stack:
    - technology: 'Framework/Language'
      version: 'X.Y.Z'
    - technology: 'Database'
      version: 'X.Y.Z'

2. Code Standards

# Code Standards
standards:
  style:
    - 'Use consistent indentation (2 spaces)'
    - 'Follow language-specific naming conventions'
  documentation:
    - 'Include JSDoc comments for all functions'
    - 'Maintain up-to-date README files'
  testing:
    - 'Write unit tests for all new features'
    - 'Maintain minimum 80% code coverage'

3. Security Rules

# Security Guidelines
security:
  authentication:
    - 'Implement proper token validation'
    - 'Use environment variables for secrets'
  dataProtection:
    - 'Sanitize all user inputs'
    - 'Implement proper error handling'

Best Practices

Writing Effective Rules

Be Specific
- Use clear, actionable language
- Provide examples where helpful
- Define measurable criteria
Maintain Organization
- Group related rules together
- Use consistent formatting
- Keep critical rules at the top
Regular Updates
- Review rules periodically
- Update based on team feedback
- Document changes in version control

Common Patterns

# Common Patterns Example
patterns:
  components:
    - pattern: 'Use functional components by default'
    - pattern: 'Implement error boundaries for component trees'
  stateManagement:
    - pattern: 'Use React Query for server state'
    - pattern: 'Implement proper loading states'

Integration with Development Workflow

Using with Version Control

Commit the Rules
- Include .clinerules in version control
- Document rule changes in commit messages
- Review rule changes as part of PR process
Team Collaboration
- Discuss rule changes with team
- Maintain changelog for rule updates
- Ensure all team members understand rules

Troubleshooting

Common Issues

Rules Not Being Applied
- Verify file location (must be in root directory)
- Check file formatting
- Ensure Cline has access to the file
Conflicting Rules
- Review rule hierarchy
- Resolve conflicts explicitly
- Document rule precedence
Performance Considerations
- Keep rules concise and focused
- Avoid overly complex rule structures
- Regular cleanup of obsolete rules

Examples

Basic Project Setup

# Basic .clinerules Example
project:
  name: 'Web Application'
  type: 'Next.js Frontend'
  standards:
    - 'Use TypeScript for all new code'
    - 'Follow React best practices'
    - 'Implement proper error handling'

testing:
  unit:
    - 'Jest for unit tests'
    - 'React Testing Library for components'
  e2e:
    - 'Cypress for end-to-end testing'

documentation:
  required:
    - 'README.md in each major directory'
    - 'JSDoc comments for public APIs'
    - 'Changelog updates for all changes'

Advanced Configuration

# Advanced .clinerules Example
project:
  name: 'Enterprise Application'
  compliance:
    - 'GDPR requirements'
    - 'WCAG 2.1 AA accessibility'

architecture:
  patterns:
    - 'Clean Architecture principles'
    - 'Domain-Driven Design concepts'

security:
  requirements:
    - 'OAuth 2.0 authentication'
    - 'Rate limiting on all APIs'
    - 'Input validation with Zod'

State Management Standards for React

Cline

Overview

Key Concepts

Purpose of .clinerules

File Location

Rule Structure

1. Project Overview

2. Code Standards

3. Security Rules

Best Practices

Writing Effective Rules

Common Patterns

Integration with Development Workflow

Using with Version Control

Troubleshooting

Common Issues

Examples

Basic Project Setup

Advanced Configuration

Related Rules

Deployment and DevOps Standards for React

Core Architecture Standards for React

Security Best Practices Standards for React

Testing Methodologies Standards for React

Component Design Standards for React