Skip to main content

2. State, Effects & Lists

Goal for this page: make your app interactive and dynamic — respond to clicks and typing, run side effects, and render collections of data.

Step 2.1 — State with useState​

What & why: State is data that changes over time and causes the UI to re-render when it does (a counter, a form input, whether a menu is open). useState is the hook that gives a component its own state.

Learn:

Your task: Add a "like" counter to your Card that increments when clicked. Add a toggle button that shows/hides the card's description.

How AquaGen does this

Small, component-local state like this stays inside the component. Later (page 4) you'll meet state that's shared across the whole app — in AquaGen that lives in a Store file built on React Context, exactly like AppStore and each feature's store.

Step 2.2 — Handling events & forms​

What & why: Users interact through events (clicks, typing, submitting). A controlled input keeps the input's value in state, which is the standard React pattern for forms.

Learn:

Your task: Add a text input to your app whose value is stored in state. Show what the user typed live, below the input. Add a "Clear" button that resets it.

Step 2.3 — Side effects with useEffect​

What & why: A side effect is anything outside rendering — a timer, a subscription, logging, or (next page) fetching data. useEffect runs code after render and can clean up after itself. Understanding the dependency array is key.

Learn:

Your task: Use useEffect to update the browser tab title (document.title) whenever your like-counter changes. Add a setInterval timer in an effect and clean it up on unmount — confirm you understand why the cleanup matters.

Step 2.4 — Rendering lists & keys​

What & why: Real apps render arrays of data. You map an array to an array of components, and each needs a stable key so React can track items efficiently.

Learn:

Your task: Create a hardcoded array of ~5 items and render a Card for each with map. Give each a proper key. Then add the search input from Step 2.2 and filter the displayed list by what's typed. (Next page you'll swap the hardcoded array for real API data.)

Checkpoint

You can hold state, respond to user input, run and clean up effects, and render filtered lists. Now connect it to a real API and add pages.

Next: → Data fetching & routing