What's next

Seven days ago you were learning what const and arrow functions are. Today you have a typed, accessible React app with server rendering, Server Functions and caching, running on a public URL. That is a lot of ground.

This last lesson has three parts: a look back to connect the pieces, a capstone project to make the knowledge your own, and a reading list for your own reading list.

The week in one tableCopy Anchor Link

The ideas that matter mostCopy Anchor Link

APIs change. The ideas below have stayed the same for years, and they will make any new React API easier to learn.

• UI is a function of state. You describe what the screen should look like for a given state, and React updates the page. You don't change the page by hand.
• Components are pure. Given the same props and state, a component returns the same JSX and changes nothing outside itself while rendering. That is what lets React, and the compiler, re-render safely.
• State is a snapshot, and updates are immutable. Each render sees its own fixed values. You change state by giving React a new value, never by changing the old one.
• Data flows down, events flow up. Parents pass data as props, and children report what happened through callbacks. When two components need the same state, move it to their closest shared parent.
• Derive, don't sync. If you can calculate something from props or state, calculate it while rendering. Effects are for synchronizing with things outside React, such as timers, subscriptions and the network.
• Put work where it belongs. Data and secrets on the server, interactivity in small Client Components, and slow parts behind Suspense.

Quick check

A component stores fullName in state and uses an effect to update it whenever firstName or lastName changes. What is the better approach?

Add fullName to the effect's dependency arrayCalculate const fullName = firstName + ' ' + lastName while renderingMove fullName into contextUse useRef for fullName

Check answer

Quick check

Which part of a Next.js page should be a Client Component?

The part that reads books from the databaseThe layout with the header and navigation linksThe small search box that filters as you typeThe page that displays one book's details

Check answer

A final review challengeCopy Anchor Link

Here is one last bug hunt that uses ideas from across the week.

Try it

Three bugs, three days

This component has three bugs, each from a different day. Add a book and watch: the book appears, but the Unread count doesn't change. React also prints a warning in the console, and the unread count is kept in state that it doesn't need. Find and fix all three.

Show solution

1. Mutation (Day 3). books.push(...) changes the existing array, then setBooks(books) passes the same array back, so React sees no change. The new book only appeared because setTitle('') caused a re-render anyway. The effect depends on books, and since books was still the same array, the effect never ran again, which is why Unread stayed stale. Creating a new array with the spread syntax fixes it.
2. Missing key (Day 2). Without key, React can't tell list items apart between renders and warns in the console. book.id is stable and unique.
3. Synced state (Day 4). unread can be calculated from books, so keeping it in state with an effect only adds an extra render and a chance to be wrong. Calculating it while rendering is simpler and always correct.

Pick a capstone projectCopy Anchor Link

Tutorials give you the next step. A project of your own makes you choose the next step, and that is where most of the learning happens. Pick one idea below, or your own, and build it over the next week or two.

However you choose, these steps help:

1. Write down the smallest useful version. For the habit tracker, that might be "add a habit, tick it off for today, see a list". Build only that first.
2. Sketch the screens and split them into components, then decide where each piece of state lives. This is the Thinking in React method from Day 4.
3. Deploy on the first day, even if it is almost empty. Then every push is a small, safe step.
4. Add one feature at a time, and write a test for anything with logic, like the streak calculation.
5. Share it. Post the URL, ask for feedback, and read other people's code.

Where to keep learningCopy Anchor Link

These are the resources this course leaned on most. Each one is good at something different.

A suggested order: finish your capstone with react.dev open beside you. Then take one structured course, Joy of React or Epic React if you can pay for one, or Full Stack Open if you'd rather not. Read TkDodo when you start fetching a lot of data, and patterns.dev when your app starts to feel slow or tangled.