useState Patterns and Common Pitfalls

The fundamentals of useState are straightforward — declare state, call the setter, React re-renders. But as your MERN Blog components grow more complex, several subtle patterns and pitfalls become important. In this lesson you will master the functional updater form for safe sequential updates, lazy initialisation for expensive initial values, how to decide between multiple state variables and one grouped object, and how to recognise and fix the most common useState bugs: stale closures, direct mutation, and unnecessary re-renders caused by state that should not be state.

The Functional Updater Form #

// When new state depends on old state — always use the functional form
// This guarantees you always act on the latest state value,
// even if multiple updates are batched together

// ── Counter — safe increment ──────────────────────────────────────────────────
setCount(prev => prev + 1); // ✓ uses latest queued value

// ── Toggle ────────────────────────────────────────────────────────────────────
setIsOpen(prev => !prev);  // ✓

// ── Add to list ───────────────────────────────────────────────────────────────
setPosts(prev => [...prev, newPost]); // ✓

// ── Remove from list ──────────────────────────────────────────────────────────
setPosts(prev => prev.filter(p => p._id !== deletedId)); // ✓

// ── Update item in list ───────────────────────────────────────────────────────
setPosts(prev => prev.map(p =>
  p._id === updatedPost._id ? { ...p, ...updatedPost } : p
)); // ✓

// ── Object with one field updated ─────────────────────────────────────────────
setUser(prev => ({ ...prev, name: 'Jane' })); // ✓

Lazy Initialisation #

// ── Problem: expensive computation runs on every render ───────────────────────
const [posts, setPosts] = useState(JSON.parse(localStorage.getItem('posts')) || []);
// JSON.parse is called every render, even though useState only uses it on mount

// ── Solution: lazy initialiser — pass a function, not a value ─────────────────
const [posts, setPosts] = useState(() => {
  // This function runs ONLY on the first render
  const saved = localStorage.getItem('posts');
  return saved ? JSON.parse(saved) : [];
});

// Lazy initialisation use cases:
// ✓ Reading from localStorage or sessionStorage
// ✓ Heavy computation to derive the initial value
// ✓ Creating a complex initial object
// ✓ Parsing URL search params for initial filter state

const [filters, setFilters] = useState(() => {
  const params = new URLSearchParams(window.location.search);
  return {
    tag:   params.get('tag')   || '',
    sort:  params.get('sort')  || 'createdAt',
    page:  parseInt(params.get('page') || '1', 10),
  };
});

Multiple Variables vs One Object #

// ── Rule: group state that always changes together ────────────────────────────

// ✓ Separate variables: independent values that rarely update together
const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const [selectedTag, setSelectedTag] = useState('');
// Each can be updated independently without touching the others

// ✓ One object: values that are always set/reset together
const [asyncState, setAsyncState] = useState({ data: null, loading: false, error: null });
// When a fetch starts: loading: true, error: null
// When it succeeds: data: result, loading: false, error: null
// When it fails: error: msg, loading: false, data: null
// These three always change together — makes sense as one object

const setLoading  = ()      => setAsyncState({ data: null,  loading: true,  error: null });
const setSuccess  = (data)  => setAsyncState({ data,        loading: false, error: null });
const setError    = (error) => setAsyncState({ data: null,  loading: false, error });

// ── Anti-pattern: artificial grouping ────────────────────────────────────────
const [state, setState] = useState({ isOpen: false, count: 0, name: '' });
// These are unrelated — updating isOpen requires spreading count and name
// Separate variables are cleaner here

Identifying Unnecessary State #

// Ask: "Can this be computed from existing state?"
// If yes → compute it, do not store it

function PostListPage() {
  const [posts,   setPosts]   = useState([]);
  const [query,   setQuery]   = useState('');
  const [filter,  setFilter]  = useState('all');

  // ❌ WRONG — derived state:
  // const [filteredPosts, setFilteredPosts] = useState([]);
  // const [postCount,     setPostCount]     = useState(0);

  // ✅ CORRECT — derived values computed at render time:
  const filteredPosts = posts
    .filter(p => filter === 'all' || p.published === (filter === 'published'))
    .filter(p => p.title.toLowerCase().includes(query.toLowerCase()));

  const postCount  = filteredPosts.length;              // always in sync
  const hasResults = filteredPosts.length > 0;          // always in sync
  const isEmpty    = filteredPosts.length === 0 && !loading; // always in sync

  return (
    <div>
      <p>{postCount} posts found</p>
      <PostList posts={filteredPosts} />
    </div>
  );
}

The Stale Closure Bug — and the Fix #

// ── The bug: handler captures stale state value ───────────────────────────────
function AutoSaveEditor() {
  const [content, setContent] = useState('');

  useEffect(() => {
    const timer = setInterval(() => {
      // content is captured from the initial render — always ''!
      console.log('Auto-saving:', content); // stale closure bug
      localStorage.setItem('draft', content);
    }, 5000);
    return () => clearInterval(timer);
  }, []); // empty deps — timer never re-created, content stays stale

  return <textarea value={content} onChange={e => setContent(e.target.value)} />;
}

// ── Fix 1: Add content to the dependency array ────────────────────────────────
useEffect(() => {
  const timer = setInterval(() => {
    localStorage.setItem('draft', content); // always fresh
  }, 5000);
  return () => clearInterval(timer);
}, [content]); // re-creates timer when content changes

// ── Fix 2: Use a ref to hold the latest value ─────────────────────────────────
const contentRef = useRef(content);
useEffect(() => { contentRef.current = content; }, [content]);

useEffect(() => {
  const timer = setInterval(() => {
    localStorage.setItem('draft', contentRef.current); // always latest via ref
  }, 5000);
  return () => clearInterval(timer);
}, []); // timer never re-created, but reads latest via ref

Common Mistakes #

Mistake 1 — Using useState for values that do not need to trigger re-renders #

❌ Wrong — storing a timeout ID or a subscription reference in state:

const [timerId, setTimerId] = useState(null);
setTimerId(setTimeout(fn, 1000)); // triggers re-render unnecessarily

✅ Correct — use useRef for mutable values that should not cause re-renders:

const timerRef = useRef(null);
timerRef.current = setTimeout(fn, 1000); // no re-render ✓

Mistake 2 — Initialising state with a prop and expecting it to stay in sync #

❌ Wrong — state initialised from a prop does not update when the prop changes:

function EditModal({ post }) {
  const [title, setTitle] = useState(post.title); // one-time init
  // If post.title changes in the parent — title state does NOT update!
}

✅ Correct — use the prop directly if it is read-only, or use useEffect to sync:

useEffect(() => { setTitle(post.title); }, [post.title]); // syncs when prop changes ✓

Mistake 3 — Not resetting form state when the component is reused #

❌ Wrong — form retains previous values when the parent passes a new post to edit:

function PostEditForm({ post }) {
  const [title, setTitle] = useState(post.title);
  // When parent passes a different post — title still shows the old post's title
}

✅ Correct — add a key to force remount when the identity changes:

<PostEditForm key={post._id} post={post} />
// Changing post._id forces React to unmount + remount — fresh state ✓

Quick Reference #