State Management Strategies for v0 Applications

Effective state management is crucial for building scalable, maintainable applications. Learn how to choose and implement the right state management solution for your v0 projects.

State Management Options

Decision Matrix:

- React Context: Theme, auth, simple global state

- Zustand: Complex application state, multiple stores

- SWR/React Query: Server state, data fetching, caching

- URL State: Filters, pagination, shareable state

Local Component State

Simple State with useState:

```tsx

'use client'

import { useState } from 'react'

export function Counter() {

const [count, setCount] = useState(0)

return (

<div>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>

Increment

</button>

</div>

)

}

```

Complex State with useReducer:

```tsx

type State = {

items: Item[]

filter: string

sortBy: 'name' | 'date'

}

type Action =

| { type: 'ADD_ITEM'; item: Item }

| { type: 'SET_FILTER'; filter: string }

| { type: 'SET_SORT'; sortBy: State['sortBy'] }

function reducer(state: State, action: Action): State {

switch (action.type) {

case 'ADD_ITEM':

return { ...state, items: [...state.items, action.item] }

case 'SET_FILTER':

return { ...state, filter: action.filter }

case 'SET_SORT':

return { ...state, sortBy: action.sortBy }

default:

return state

}

}

export function ItemList() {

const [state, dispatch] = useReducer(reducer, {

items: [],

filter: '',

sortBy: 'name'

})

// Use dispatch to update state

}

```

Global State with Zustand

Create a Store:

```typescript

// lib/store.ts

import { create } from 'zustand'

import { persist } from 'zustand/middleware'

interface UserStore {

user: User | null

setUser: (user: User | null) => void

preferences: Preferences

updatePreferences: (prefs: Partial<Preferences>) => void

}

export const useUserStore = create<UserStore>()(

persist(

(set) => ({

user: null,

setUser: (user) => set({ user }),

preferences: { theme: 'light', language: 'en' },

updatePreferences: (prefs) =>

set((state) => ({

preferences: { ...state.preferences, ...prefs }

}))

}),

{ name: 'user-storage' }

)

)

```

Use in Components:

```tsx

'use client'

import { useUserStore } from '@/lib/store'

export function UserProfile() {

const user = useUserStore((state) => state.user)

const preferences = useUserStore((state) => state.preferences)

const updatePreferences = useUserStore((state) => state.updatePreferences)

return (

<div>

<h2>{user?.name}</h2>

<button onClick={() => updatePreferences({ theme: 'dark' })}>

Toggle Theme

</button>

</div>

)

}

```

Server State with SWR

Data Fetching:

```tsx

'use client'

import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(r => r.json())

export function Posts() {

const { data, error, isLoading, mutate } = useSWR(

'/api/posts',

fetcher,

{

revalidateOnFocus: true,

revalidateOnReconnect: true

}

)

if (isLoading) return <Skeleton />

if (error) return <Error error={error} />

return (

<div>

{data.posts.map(post => (

<PostCard key={post.id} post={post} />

))}

<button onClick={() => mutate()}>Refresh</button>

</div>

)

}

```

Optimistic Updates:

```tsx

async function likePost(postId: string) {

// Optimistically update UI

mutate(

'/api/posts',

(data) => ({

...data,

posts: data.posts.map(p =>

p.id === postId ? { ...p, likes: p.likes + 1 } : p

)

}),

false // Don't revalidate yet

)

// Make API call

await fetch(`/api/posts/${postId}/like`, { method: 'POST' })

// Revalidate to sync with server

mutate('/api/posts')

}

```

State Persistence

localStorage with Zustand:

```typescript

import { persist } from 'zustand/middleware'

export const useCartStore = create(

persist(

(set) => ({

items: [],

addItem: (item) => set((state) => ({

items: [...state.items, item]

}))

}),

{

name: 'cart-storage',

partialize: (state) => ({ items: state.items })

}

)

)

```

Performance Optimization

Selective Subscriptions:

```tsx

// Only re-render when user name changes

const userName = useUserStore((state) => state.user?.name)

// Use shallow comparison for objects

import { shallow } from 'zustand/shallow'

const { user, preferences } = useUserStore(

(state) => ({ user: state.user, preferences: state.preferences }),

shallow

)

```

Memoization:

```tsx

const filteredItems = useMemo(() => {

return items.filter(item => item.name.includes(filter))

}, [items, filter])

```

Testing State Logic

Unit Tests:

```typescript

import { renderHook, act } from '@testing-library/react'

import { useUserStore } from '@/lib/store'

test('updates user', () => {

const { result } = renderHook(() => useUserStore())

act(() => {

result.current.setUser({ id: '1', name: 'John' })

})

expect(result.current.user?.name).toBe('John')

})

```

Proper state management leads to maintainable, scalable applications that are easy to debug and extend.