Lab 4

Click Event

  

Passing Data on Event

Passing Functions

Broken Counter: 7

Counter: 7

Boolean State Variables

Done

Yay! Done

Urgent

!!very urgent!!

String State Variables

John

Doe

JD

Date State Variables

Thu Jan 15 2026

2026-01-15

Fri Jan 16 2026

2026-01-16

Thu Jan 22 2026

2026-01-22

Object State Variables

{
  "name": "Peter",
  "age": 24,
  "city": "Boston"
}

Array State Variable

  • 1
  • 2
  • 3
  • 4
  • 5

Profile

Topics
Theme
{
  "firstName": "",
  "lastName": "",
  "password": "",
  "dob": null,
  "role": "",
  "newsletter": false,
  "topics": [],
  "theme": "light"
}

Counter 123

Counter 123

Prop Drilling

Parent count: 0

Child

This component never uses count itself. It only forwards props.

Middle

Grandchild

Count: 0

Addition Calculator

Enter two numbers and navigate using either buttons (programmatic) or links (declarative):

Programmatic navigation (using router.push):

Declarative navigation (using Link):

5 + 10 + 2 → Query Params (Link)5 + 10 + 2 → Path Params (Link)

React Context

Two siblings share one counter without the parent passing props through the middle.

Reader: 7

Writer

Context Todo List

Profile (React Context)

Topics
Theme
{
  "firstName": "",
  "lastName": "",
  "password": "",
  "dob": null,
  "role": "",
  "newsletter": false,
  "topics": [],
  "theme": "light"
}

Zustand Counter: 7

Zustand

Zustand Counter: 7

Zustand Todo List

Profile (Zustand)

Topics
Theme
{
  "firstName": "",
  "lastName": "",
  "password": "",
  "dob": null,
  "role": "",
  "newsletter": false,
  "topics": [],
  "theme": "light"
}

Redux Toolkit

Hello Redux

Hello Redux

Redux Counter: 7

Add Redux

Sum: 0

Redux Todo List

  • Learn HTML
  • Learn CSS
  • Learn JavaScript

useEffect

The document title updates after React paints, whenever name or count changes.

Writing Your Own Hooks

useWindowSize

Loading window size...

useToggle

useLocalStorage

Selected: Monday. Reload the page and it stays selected.

Each caller gets its own state

useProfileForm

Topics
Theme