client & server
syntax & hooks
fun facts
ui/ux
100
3. A Like button that counts clicks should be a…
- A) Client Component
- B) Server Component
A) Client Component
100
What is a React Hook
A special function that lets you use state and other React features without writing a class
100
Who on ZotMeet is a leftie but writes with their right hand
Who is Kailee
100
This on/off switch slides left or right, like the ones in phone settings.
What is a toggle (switch)?
200
Which of these can a Server Component do that a Client Component can't?
- A) Attach an onClick handler
- B) Use useState to track a counter
- C) Query a database without exposing to the browser
- C) Query a database without exposing to the browser
200
This React Hook lets a component remember a value between renders and gives a setter function to update it
What is useState()
200
Who on Zotmeet has hit a half-court shot in IM basketball
Who is Ethan Tran
200
This pop-up box appears over the page and dims everything behind it until you close it
What is a modal
300
Which component is the best candidate to stay a Server Component?
- A) A search box that filters results on every keystroke
- B) A product description that fetches data and renders static text
- C) A Like button with a click counter
- B) A product description that fetches data and renders static text
300
You use these to put a variable inside JSX
What are curly braces {}
300
Who on ZotMeet has been to 20 countries
Who is Arshia
300
This screen shows up when there’s no content yet, like “No meeting yet — create one now!”
What is an "Empty State"
400
like-button.js starts with 'use client' and imports Stats from './stat.js', which has no directive of its own. What kind of component is Stats when its used?
- A) A Client Component
- B) A Server Component
- C) Neither, the build fails
- D) Decided at Runtime, dependent on hooks
A) A Client Component,
Bc everything imported into a 'use client' module becomes part of the client bundle
400
What is wrong/missing with the following snippet:
names.map((name) =>
<li>
{name}
<li>
A unique 'key' prop.
This is bc React uses the key to match list items between renders to update them efficiently
ex: names.map((name, index) =>
<li key={index}>
{name}
</li>)
400
Who on ZotMeet has spent over 48 hours waiting for a flight at an airport
Who is Arya
400
This trail of links shows where you are on a site, like Home > Shop > Shoes.
What are Breadcrumbs