Recognize Key React Concepts

In Part 3, you built a weather app with Next.js and React. You followed step-by-step instructions, and the app works. However, real production apps use many more concepts and features than what we covered. Going through them all would go much beyond the scope of this course.

Fortunately, it is also not essential for a designer working in code to know them and fully understand them all. But it is useful to recognize them when you see them — in your own code, in someone else's codebase, or in AI-generated output. When you can name what you're looking at, you can describe problems precisely, ask better questions, and give AI agents more effective instructions.

State and re-rendering

The most fundamental concept in React is state — data that can change over time and causes the UI to update when it does. When you type in a search box and the results filter in real time, that's state. When you click a tab and the content switches, that's state. The most basic tool for managing state is useState, a React hook that gives you a value and a function to change it. When you call that function, the component re-renders — React recalculates what the UI should look like with the new data.

Server vs client components

Next.js has a crucial distinction that trips up even experienced developers: server components vs client components. Server components run on the server during the build or when a page loads. They can fetch data directly (like your weather API calls) but they can't use state, handle clicks, or access browser APIs. Client components run in the user's browser — they can use state, respond to interactions, and do everything that requires being in the browser. In Next.js, components are server components by default. You opt into client behavior by adding the "use client" directive at the top of the file.

This matters because it's one of the most common sources of errors. If AI generates code that uses useState in a server component (without the "use client" directive), it will fail. If you understand why, you can fix it in seconds. If you don't, you'll be stuck.

Routing and data fetching

Routing is how the app knows which page to show based on the URL. You already used this in Part 3: files in the app/ directory map to URL paths. Dynamic routes (folders with [slug] or [id]) let a single page template handle many different URLs. Layouts (layout.tsx) wrap pages with shared UI. The Link component enables fast navigation between pages without full reloads. These patterns appear in virtually every Next.js project.

Data fetching is how your app gets data from external sources. In your weather app, you used server actions (functions marked with "use server") to fetch data from the API. Next.js also supports loading states — a loading.tsx file that shows a loading indicator while data is being fetched. Understanding where data comes from and how it flows into your UI is essential for working in any real codebase.

Other hooks

Beyond useState, React has other hooks you'll encounter. useEffect runs code when something changes — for example, fetching data when a page loads or updating the document title. useRef gives you a direct reference to a DOM element, like focusing an input field. You don't need to memorize these. Just know they exist, so when you see them in code or in AI output, you recognize what they're doing.