React Components, Props & State Mastery

A comprehensive guide to React's declarative component architecture, immutable state, unidirectional data flow, and props.

SLRJ Digital Engineering Verified•Topic: React Core Foundations

Downloadable Study GuideVerified PDF

React 19 Hooks & Component Architecture Handbook

Format: PDF Document • Size: 6.0 KB • Pages: 2

Download PDF

Executive Overview

React revolutionized frontend web development by replacing imperative DOM manipulation (document.getElementById, element.appendChild) with declarative components that automatically synchronize with underlying data state.

2. Props vs State Demystified

Understanding the difference between Props (external inputs) and State (internal memory) is the foundation of React engineering:

Props vs State Comparison

Attribute	Props (Properties)	State
Ownership	Passed in by parent component	Created and owned within the component
Mutability	Read-Only (Immutable by the receiving child)	Mutable only via state setter function
Purpose	Configure child components and pass callbacks	Hold interactive data that changes over time
Re-render Trigger	Changes in parent props trigger child re-render	Calling setter function triggers component re-render

3. The Golden Rule of State Immutability

In React, state values are immutable. You must never mutate arrays or objects directly; always return new references via spread syntax or array methods.

Immutable State Updates in React

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// WRONG: Direct Mutation (React will NOT re-render!)
const [notes, setNotes] = useState([{ id: 1, title: "HTML" }]);
notes.push({ id: 2, title: "CSS" }); // BUG!
setNotes(notes);
 
// CORRECT: Creating a New Array Reference
setNotes(prevNotes => [
  ...prevNotes,
  { id: 2, title: "CSS" }
]);
 
// UPDATING OBJECT STATE IMMUTABLY
setUser(prev => ({
  ...prev,
  preferences: {
    ...prev.preferences,
    theme: "dark"
  }
}));

Note:React relies on Object.is reference equality to detect state changes. If you mutate the existing object, the reference remains identical and React skips re-rendering.

Frequently Asked Questions

Q:Why should keys in React lists be unique IDs instead of index?

Using array indices as keys causes subtle UI bugs when items are filtered, deleted, or reordered. Stable IDs allow React's reconciliation engine to preserve component state and DOM focus correctly.

Knowledge Check & Practice Assignments

Reinforce what you just learned with interactive challenges.

What happens if you mutate state directly without calling its setter function in React?

Previous TopicJavaScript Promises, Async/Await & Fetching APIs Next TopicNext.js App Router & Layout Architecture

Related Web Development Notes

Next.js

Next.js App Router & Layout Architecture

Master Next.js App Router: file-system routing conventions, nested layouts, loading skeletons, error boundaries, and streaming SSR.

Loading Interface...

Attribute

Props (Properties)

State

Ownership

Passed in by parent component

Created and owned within the component

Mutability

Read-Only (Immutable by the receiving child)

Mutable only via state setter function

Purpose

Configure child components and pass callbacks

Hold interactive data that changes over time

Re-render Trigger

Changes in parent props trigger child re-render

Calling setter function triggers component re-render

// WRONG: Direct Mutation (React will NOT re-render!) const [notes, setNotes] = useState([{ id: 1, title: "HTML" }]); notes.push({ id: 2, title: "CSS" }); // BUG! setNotes(notes); // CORRECT: Creating a New Array Reference setNotes(prevNotes => [ ...prevNotes, { id: 2, title: "CSS" } ]); // UPDATING OBJECT STATE IMMUTABLY setUser(prev => ({ ...prev, preferences: { ...prev.preferences, theme: "dark" } }));