Snackgirls Coding Notes · 03
I chose cleared games. Why hasn’t the list changed?
Use before-and-after views of a game list to explore components, rendering, and hydration.
It’s checked. Why are both games still there?
Hi, it’s Red. Today we looked at a practice screen for our game journal, Play Notes. Starlight Adventure is marked Cleared, while Moonlight Racing is In progress.
Kirari selected “Show cleared games.” A check mark appeared, but the game still in progress stayed on the list too.
I only wanted the games I’ve cleared. Why are both still here?
Nea and I checked the code. In this example, the logic to change the list based on the selection hadn’t been added yet. Changing a check mark and filtering the game list are separate behaviors we need to implement.
Find what changed on the same screen
Compare the first and last panels. Moonlight Racing, the game still in progress, is gone in the last one. The outlines in the middle panel show how we could divide the screen into components.
Start with the words used to build a screen
A component is a part of the interface
Think of a game entry that groups its name, picture, and clear status. A part of the interface built as a unit like this is a component. We can show two entries using the same structure with different names and status values.
Rendering turns data and code into a screen
Using data such as “Starlight Adventure, Cleared” and the game-entry code to produce the interface is called rendering. One approach is to prepare the initial screen on the server before sending it to the browser.
Hydration connects interactivity to a prepared screen
Sometimes the browser first displays HTML prepared on the server. JavaScript then runs so the interface can respond to actions such as clicks. Connecting React’s interactivity to server-generated HTML is called hydration.
So seeing the screen doesn’t always mean it’s ready for every click yet.
An unresponsive screen is not always a hydration problem
In our comic, the list-filtering code is missing. Hydration does not write that code for us. If another screen does not respond, we need to consider several possible causes, including code errors. Not every web page uses hydration. We’re looking at it here while studying server and client components in Next.js.
Server Components and Client Components
The server can prepare the part that reads and displays game information. But filtering the list when a control is clicked and keeping track of that selection, as in our example, needs functionality running in the browser. We can build that interactive part as a Client Component.
A client is the side that requests and uses a service—our browser in this case. The initial HTML for a Client Component can still be prepared on the server. “Client” does not mean every step happens only in the browser from the start.
Where does ‘use client’ belong?
In Next.js, putting 'use client' at the top of a file marks a Client Component boundary. The code imported by that file matters too. import is syntax for bringing in code from another file.
That means a component without buttons can also be included on the client side. Check the directive and import relationships rather than guessing from appearance. For now, remember that the boundary is defined in code; you don’t have to memorize the syntax yet.
Looking right and working right are different
The video below uses menus and a date-range filter. Separate the screen appearing from the screen responding to an action.
Original video · Korean audio.
After clicking, check the list too
A check mark alone did not mean the intended behavior was finished. If we selected “Show cleared games,” we also needed to check that games still in progress disappeared from the list.
We should check how the list changes when we click, not just how the control looks.
I changed my request to AIKO too: “When I check Show cleared games, remove games still in progress from the list.” Saying what should change after which action made the behavior much clearer.
Small exercises · 3 questions
Explain what the filter should do
Compare the before-and-after panels and think about how you would describe the behavior to AIKO. Try answering before opening the examples.
1. Find the difference
Compare the first and last panels. Which game disappeared, and why should it have disappeared?
Show a sample answer
Moonlight Racing disappeared because it is still in progress. With “Show cleared games” selected, only the cleared Starlight Adventure should remain.
2. Click something in this article
Select “Show a sample answer” below. Describe one difference before and after you select it.
Show a sample answer
The hidden answer appears. This disclosure feature is built into HTML and supported by the browser. Not every interaction needs React or hydration.
3. Describe the problem to AIKO
If the filter does not work, go beyond “Fix it.” Write what you selected, what you expected, and what actually happened.
Show a sample answer
For example: “I checked Show cleared games. I expected only cleared games to remain, but I still see a game in progress.” Don’t assume the cause before checking the code.
Comments
0No login needed. Edit or delete your comment from the same browser.
All comments 0
한국어 · English · 日本語No comments yet. Start the conversation.