React State Initialization Patterns

Proper state initialization in React improves performance and prevents bugs. Here's how to do it effectively.

Basic Initialization#

import { useState } from 'react';

function Counter() {
  // Direct value initialization
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  const [items, setItems] = useState([]);
  const [user, setUser] = useState(null);

  return <div>{count}</div>;
}

Lazy Initialization#

// For expensive computations, use a function
function ExpensiveComponent({ data }) {
  // This function only runs ONCE on mount
  const [processed, setProcessed] = useState(() => {
    return expensiveProcessing(data);
  });

  return <div>{processed}</div>;
}

// BAD - runs on every render
function BadExample({ data }) {
  const [value, setValue] = useState(expensiveProcessing(data));
  return <div>{value}</div>;
}

// Reading from localStorage
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('theme');
    return saved ? JSON.parse(saved) : 'light';
  });

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Props to State (Anti-pattern Warning)#

// AVOID - state that mirrors props
function BadComponent({ initialValue }) {
  // This only uses initialValue once, updates to prop are ignored
  const [value, setValue] = useState(initialValue);
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

// BETTER - use key to reset when needed
function Parent() {
  const [userId, setUserId] = useState(1);

  return (
    // Key change resets component state
    <UserForm key={userId} initialData={userData} />
  );
}

// OR - use effect for sync (carefully)
function SyncedComponent({ externalValue }) {
  const [value, setValue] = useState(externalValue);

  useEffect(() => {
    setValue(externalValue);
  }, [externalValue]);

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Derived State#

// DON'T store derived state
function BadList({ items }) {
  const [filteredItems, setFilteredItems] = useState([]);
  const [filter, setFilter] = useState('');

  // Syncing derived state is error-prone
  useEffect(() => {
    setFilteredItems(items.filter(item => item.includes(filter)));
  }, [items, filter]);

  return /* ... */;
}

// DO compute during render
function GoodList({ items }) {
  const [filter, setFilter] = useState('');

  // Derived value - no state needed
  const filteredItems = items.filter(item => item.includes(filter));

  // Use useMemo if expensive
  const filteredItems = useMemo(
    () => items.filter(item => item.includes(filter)),
    [items, filter]
  );

  return /* ... */;
}

Complex State Objects#

// Initialize with complete shape
function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    address: {
      street: '',
      city: '',
      zip: '',
    },
  });

  const updateField = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value,
    }));
  };

  const updateAddress = (field, value) => {
    setFormData(prev => ({
      ...prev,
      address: {
        ...prev.address,
        [field]: value,
      },
    }));
  };

  return /* ... */;
}

useReducer for Complex State#

import { useReducer } from 'react';

const initialState = {
  items: [],
  loading: false,
  error: null,
  page: 1,
};

function reducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true, error: null };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, items: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload };
    case 'NEXT_PAGE':
      return { ...state, page: state.page + 1 };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

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

  // Or with lazy initialization
  const [state, dispatch] = useReducer(reducer, null, () => {
    return getInitialStateFromStorage() || initialState;
  });

  return /* ... */;
}

Ref for Non-Render Values#

import { useState, useRef, useEffect } from 'react';

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

  // Don't need state for values that don't affect render
  const intervalRef = useRef(null);
  const startTimeRef = useRef(null);

  const start = () => {
    startTimeRef.current = Date.now();
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
  };

  const stop = () => {
    clearInterval(intervalRef.current);
    console.log('Ran for:', Date.now() - startTimeRef.current);
  };

  useEffect(() => {
    return () => clearInterval(intervalRef.current);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

State Lifting#

// Lift state to common ancestor
function Parent() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      <List items={items} selectedId={selectedId} onSelect={setSelectedId} />
      <Detail itemId={selectedId} />
    </div>
  );
}

function List({ items, selectedId, onSelect }) {
  return (
    <ul>
      {items.map(item => (
        <li
          key={item.id}
          onClick={() => onSelect(item.id)}
          className={item.id === selectedId ? 'selected' : ''}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}

Initial State from URL#

function SearchPage() {
  // Initialize from URL search params
  const [searchParams, setSearchParams] = useSearchParams();

  const [filters, setFilters] = useState(() => ({
    query: searchParams.get('q') || '',
    category: searchParams.get('cat') || 'all',
    sort: searchParams.get('sort') || 'relevance',
  }));

  // Sync state back to URL
  useEffect(() => {
    const params = new URLSearchParams();
    if (filters.query) params.set('q', filters.query);
    if (filters.category !== 'all') params.set('cat', filters.category);
    if (filters.sort !== 'relevance') params.set('sort', filters.sort);
    setSearchParams(params);
  }, [filters, setSearchParams]);

  return /* ... */;
}

Reset State Pattern#

function EditForm({ item, onSave, onCancel }) {
  // Initialize from prop
  const [draft, setDraft] = useState(item);

  // Reset when item changes
  useEffect(() => {
    setDraft(item);
  }, [item]);

  // Or use key from parent
  // <EditForm key={item.id} item={item} />

  const handleReset = () => {
    setDraft(item);
  };

  return (
    <form>
      <input
        value={draft.name}
        onChange={e => setDraft({ ...draft, name: e.target.value })}
      />
      <button type="button" onClick={handleReset}>Reset</button>
      <button type="button" onClick={onCancel}>Cancel</button>
      <button type="submit">Save</button>
    </form>
  );
}

Best Practices#

Initialization:
✓ Use lazy init for expensive ops
✓ Provide complete initial shape
✓ Use functions for localStorage
✓ Consider useReducer for complex

Performance:
✓ Compute derived values, don't store
✓ Use refs for non-render values
✓ useMemo for expensive derivations
✓ Split state by update frequency

Patterns:
✓ Lift state to common ancestor
✓ Use key to reset components
✓ Sync URL with state when needed
✓ Reset state explicitly when needed

Avoid:
✗ Mirroring props in state
✗ Storing derived state
✗ Expensive inline initialization
✗ Unnecessary state synchronization

Proper state initialization improves performance and prevents bugs. Use lazy initialization for expensive computations, compute derived values during render instead of storing them, and use refs for values that don't affect rendering. Lift state to the appropriate level and use the key prop to reset components when needed.