BRUCE_FE React Interview Notes - How to Choose State Management Solutions

1. useState - Component Local State

The simplest state management method, used for storing and updating local state within components.

import { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" with initial value 0
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Best Use Cases:

• 1. Internal State Management - UI component internal state
• 2. Complex Form State - Form validation, error handling
• 3. Global State - Application-level shared state

2. useReducer - Complex Local State

When component state logic is complex, useReducer provides a more structured state management approach. It's based on Redux concepts but scoped to the component level.

import { useReducer } from 'react';

// Define reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error();
  }
}

function Counter() {
  // Initialize state and dispatch function with reducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  
  return (
    <div>
      <p>Current count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

Best Use Cases:

• 1. Complex form state management
• 2. Multiple related state variables need synchronous updates
• 3. Components with complex state change logic
• 4. Need centralized state transition logic management

3. Context API - Cross-Component State Sharing

Context API is used to share data between components at different levels, avoiding 'props drilling' issues. It's particularly suitable for sharing global information like themes and user authentication.

const CounterContext = createContext();

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

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <ChildA />   
      <ChildB />   
    </CounterContext.Provider>
  );
}

function ChildA() {
  console.log('ChildA render');
  return <p>Hello</p>;
}

function ChildB() {
  const { count } = useContext(CounterContext);
  console.log('ChildB render');
  return <p>Count: {count}</p>;
}

// ------------------------------
const ChildA = React.memo(() => {
  console.log('ChildA render');
  return <p>Hello</p>;
});

// ------------------------------
const ThemeContext = createContext();
const UserContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <UserContext.Provider value={{ user: 'John' }}>
        <Main />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

Best Use Cases:

• 1. Application theme settings
• 2. User authentication information
• 3. Language/internationalization configuration
• 4. Global state for small to medium applications

1. Redux - Mature Centralized State Management

Redux is the most mature state management library in the React ecosystem, based on the principles of a single data source and immutable data, making state changes predictable and traceable.

// Create slice (Redux Toolkit)
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    }
  }
});

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

// Configure store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

// Use in React component
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

優勢：

• 1. High state predictability, easy to debug
• 2. Powerful development tools support time-travel debugging
• 3. Middleware system extends functionality (async operations etc.)
• 4. Mature ecosystem and best practices

適用場景：

• 1. Large e-commerce platforms (like Shopee, PChome) need to manage complex states like products, shopping carts, users, orders, etc.
• 2. Enterprise management systems (like ERP, CRM systems) handle large amounts of forms and data flow
• 3. Social media applications (like Facebook, Instagram clones) manage user interactions, notifications, and content flow
• 4. Financial trading platforms need strict state tracking and audit functionality

2. Zustand - Simple and Easy-to-Use State Management

Zustand is a small and easy-to-use state management library that provides Redux-like functionality but with a cleaner API and less boilerplate code.

Use Cases:

• 1. Personal blogs or portfolio websites that need simple global state but don't want Redux's complexity
• 2. Small to medium e-commerce websites (like small brand websites) managing shopping carts and user preferences
• 3. Project management tools (like Trello clones) managing boards and task states
• 4. MVP products for startups, need rapid development while keeping code clean

3. Jotai/Recoil - Atomic State Management

Jotai and Recoil provide atomic state management, breaking down state into small, independent atomic units that can be composed and derived, suitable for performance-focused applications.

// Jotai example
import { atom, useAtom } from 'jotai';

// Create atomic states
const countAtom = atom(0);
const doubleCountAtom = atom(get => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Double count: {doubleCount}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

優勢：

• 1. Fine-grained re-render control, performance optimization
• 2. Composable state fragments
• 3. Derived state and async support
• 4. Code splitting friendly
• 5. Atomic-level state for easy testing and maintenance

適用場景：

• 1. Data visualization dashboards (like Google Analytics clones) that need efficient updates of multiple independent charts
• 2. Collaborative editing tools (like Google Docs or Notion clones) that need precise UI update control
• 3. Real-time chat applications (like Slack or Discord clones) that need to handle multiple chat rooms and notification states
• 4. Stock trading or cryptocurrency monitoring applications that need high-frequency updates of multiple independent data points