What is State in React? State vs Props

State is the engine of React interactivity. Without state, a React component is a static snapshot — it receives props, renders JSX, and never changes. With state, a component becomes dynamic: it can remember information between renders, respond to user actions, and update the UI when that information changes. Understanding the difference between state and props — and knowing which data belongs in each — is the most important conceptual skill in React development. In this lesson you will build the mental model that drives every component design decision you will make in the MERN Blog.

State vs Props — The Core Distinction #

What Belongs in State #

What Happens When State Changes #

Initial render:
  React calls the component function
  useState(0) returns [0, setCount]
  Component renders with count = 0

User clicks "Like" → setLiked(true) is called:
  1. React schedules a re-render (does NOT update immediately)
  2. React re-calls the component function
  3. useState(false) now returns [true, setLiked]
     (React remembers the new value for this state slot)
  4. Component renders with liked = true
  5. React diffs the new output against the previous virtual DOM
  6. React updates only the changed DOM nodes (the button text/class)

The component function runs again on every state change —
that is how React knows what the updated UI looks like.

State Is Preserved Across Re-renders #

// React preserves state for a component instance as long as it stays in the tree
// Each time the component re-renders, useState() returns the CURRENT value,
// not the initial value

function LikeButton({ postId }) {
  const [liked,     setLiked]     = useState(false); // initial: false
  const [likeCount, setLikeCount] = useState(0);     // initial: 0

  const handleLike = () => {
    setLiked(prev => !prev);                          // toggle
    setLikeCount(prev => prev + (liked ? -1 : 1));   // +1 or -1
  };

  // On re-render: liked and likeCount hold their current values,
  // not the initial false and 0
  return (
    <button
      onClick={handleLike}
      className={liked ? 'btn btn--liked' : 'btn'}
    >
      {liked ? '❤️' : '🤍'} {likeCount}
    </button>
  );
}

State Is Local — Each Instance Has Its Own #

// Each PostCard instance has its own independent liked state
function PostList({ posts }) {
  return (
    <div>
      {posts.map(post => (
        // Each PostCard has its own liked state — liking one does not affect others
        <PostCard key={post._id} post={post} />
      ))}
    </div>
  );
}

// If PostCard has useState(false) for liked:
// Post 1: liked = false  (independent)
// Post 2: liked = true   (user liked this one)
// Post 3: liked = false  (independent)
// They do not share state — each instance is a separate component

Common Mistakes #

Mistake 1 — Storing derived data in state #

❌ Wrong — redundant state that can get out of sync:

const [posts,       setPosts]       = useState([]);
const [filteredPosts, setFilteredPosts] = useState([]); // redundant!
const [searchQuery, setSearchQuery] = useState('');

// Now you have to remember to call setFilteredPosts every time posts or searchQuery changes
// Bugs happen when you forget

✅ Correct — compute filtered list at render time:

const [posts,       setPosts]       = useState([]);
const [searchQuery, setSearchQuery] = useState('');

// Derived — computed fresh on every render, always in sync
const filteredPosts = posts.filter(p =>
  p.title.toLowerCase().includes(searchQuery.toLowerCase())
);

Mistake 2 — Confusing state with regular variables #

❌ Wrong — changing a regular variable does not cause a re-render:

function Counter() {
  let count = 0; // regular variable — NOT state
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => count++}>+</button>
      {/* count++ changes the variable but React never re-renders — UI stays at 0 */}
    </div>
  );
}

✅ Correct — use useState to track values that should trigger re-renders:

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Mistake 3 — Putting everything in state #

❌ Wrong — tracking values that never change or are only used once:

const [siteTitle, setSiteTitle] = useState('MERN Blog'); // never changes!
const [postCount, setPostCount] = useState(posts.length); // derives from posts

✅ Correct — constants are constants, derived values are computed:

const SITE_TITLE = 'MERN Blog'; // constant — not state
const postCount  = posts.length; // derived from state — not state itself

Quick Reference #