React Essentials: From Imperative to Declarative UI

1. In vanilla JS you’d write h1.textContent = newTitle to update a heading. What is the declarative React equivalent?

• Call React.update(h1, newTitle) to tell React what changed
• Change the data (a variable or, later, state) — React re-runs the component function and patches the DOM automatically
• Use document.querySelector inside the component to directly update the DOM element
• Manually traverse the Virtual DOM and apply diffs

2. What does Babel compile <h1>Hello</h1> into?

• A raw HTML string injected via innerHTML
• React.createElement('h1', null, 'Hello') — a plain JS object describing the UI node
• A direct document.createElement('h1') call that creates a real DOM node immediately
• A WebAssembly instruction that the browser renders natively

3. A teammate proposes: “Instead of learning React, let’s just use vanilla JavaScript with document.getElementById — it’s more direct and we already know it.” Evaluate this suggestion for a project with 50+ interactive UI components that update frequently.

• They’re right — vanilla JS with direct DOM manipulation is always simpler, faster, and more maintainable than using a framework
• For a small page, vanilla JS is fine, but with 50+ components, manually tracking DOM updates becomes error-prone. React eliminates stale-UI bugs
• React is always the better choice regardless of project size — even a static landing page benefits from the Virtual DOM’s efficiency
• They should use jQuery instead — it offers the same declarative model as React but with a smaller bundle size

1. Why does React use className instead of class for CSS classes?

• React invented its own HTML attribute names to distinguish itself from plain HTML
• class is a reserved keyword in JavaScript, so JSX (which is valid JS) uses className to avoid a syntax conflict
• React’s virtual DOM uses a different internal representation where class has a different meaning
• className is faster for the browser to process than class

2. Why must JSX components return a single root element?

• React can only diff trees that have one root; multiple roots would break the reconciliation algorithm
• This is a browser limitation — the DOM only allows one child per script
• React.createElement returns a single object, so a function returning multiple top-level JSX elements would be returning multiple objects, which isn’t valid in JS without an array
• It’s a style convention, not a technical requirement — React ignores extra roots

3. How do you write an inline style with font-size: 18px and color: red in JSX?

• style="font-size: 18px; color: red"
• style={{ fontSize: "18px", color: "red" }}
• style={{ "font-size": 18px, color: red }}
• style={fontSize: "18px", color: "red"}

4. Analyze this code. A student writes function card() { return <div>A card</div>; } and uses <card />. It renders an empty box. Why?

• Components must extend React.Component — plain function components cannot return JSX without a base class
• React uses capitalization: lowercase → HTML element, uppercase → component. <card /> becomes an unknown HTML tag
• The function body is missing return — without it, the JSX is created but never returned to React for rendering
• JSX only supports standard HTML tag names — custom element names must be registered via React.registerElement()

5. Which of these are correct JSX? (Select all that apply) (select all that apply)

• <img src={url} alt='logo' />
• <div class='container'>...</div>
• <p>{user.name.toUpperCase()}</p>
• <button onclick={handleClick}>Click</button>

1. Inside a component, you have function Card({ title }) { title = 'New'; ... }. What is wrong with this?

• Nothing — props can be freely reassigned inside the component
• Props are read-only (like const function parameters) — mutating them breaks React’s one-way data flow and causes unpredictable behaviour
• You must use this.title to access props in function components
• The destructuring syntax { title } is invalid — you must write props.title

2. Which of these is the correct way to pass a number prop to a component?

• <Card price="99.99" />
• <Card price={99.99} />
• <Card price=99.99 />
• <Card price=(99.99) />

3. Analyze this: <Card title="React" /> and <Card title={"React"} /> produce the same result. When would they differ?

• They never differ — both syntaxes are always identical
• They differ for strings — quotes produce a string, braces produce a symbol
• They are the same for string literals, but only {} works for expressions: title={getTitle()} is valid, title=getTitle() is not
• {} is faster because it skips string parsing

4. A ProductCard receives price as a prop and renders ${price.toFixed(2)}. What happens if the parent passes price={undefined}?

• React renders $undefined as text — ugly but harmless
• The call undefined.toFixed(2) throws a TypeError and the component crashes
• React silently ignores the undefined prop and renders $0.00 as a default
• The component renders but .toFixed(2) returns the string 'NaN'

5. Arrange the lines to build a Greeting component that accepts name and emoji props and renders them. (arrange in order)

1. function Greeting({ name, emoji }) {
2. return (

3. {emoji} Hello, {name}!

4. );
5. }

• function Greeting(name, emoji) {

• emoji Hello, name!

1. Why doesn’t let count = 0; count++; cause the UI to update in React?

• You must use var instead of let to make React track the variable
• React’s reconciler only re-renders when state changes — mutating a local variable does nothing to signal React; useState’s setter is the trigger
• Arrow functions prevent React from seeing variable assignments
• React automatically batches all updates, so count++ is delayed by 500ms

2. What is wrong with this code? if (isLoggedIn) { const [user, setUser] = React.useState(null); }

• useState cannot store null as an initial value — only strings, numbers, and booleans are supported
• Hooks must be called at the top level of a component — calling useState conditionally breaks React’s internal order-tracking and causes crashes
• You cannot use const with array destructuring in React — let is required for state variables
• There is nothing wrong — React handles conditional hook calls automatically using internal tracking

3. You have const [items, setItems] = React.useState([]). How do you correctly add an item?

• items.push(newItem) — then React detects the array was mutated
• setItems(items.push(newItem)) — push returns the new length, passing it to setItems
• setItems([...items, newItem]) — create a new array with the spread operator and pass it to the setter
• items[items.length] = newItem; setItems(items) — modify in place then re-set

4. A teammate proposes storing the counter value in a global variable outside the component instead of using useState, arguing “it’s simpler and doesn’t reset.” Evaluate this approach — what breaks?

• Nothing breaks — global variables persist across renders and React detects changes to them automatically
• The global variable persists, but changing it doesn’t trigger a re-render — the UI stays frozen. Also, if the component is used twice, both instances share the same global, causing conflicts
• Global variables bypass the Virtual DOM diffing process, making them significantly slower than useState
• React throws a strict-mode error when it detects global variable access inside any component function

5. (Interleaving — Which concept applies?) For each scenario, identify the React concept needed: (a) A greeting card that shows different names for different users (b) A like counter that tracks clicks (c) A heading that uses class instead of className

• (a) state, (b) props, (c) JSX rules
• (a) props, (b) state (useState), (c) JSX rules
• (a) JSX rules, (b) props, (c) state
• (a) state, (b) JSX rules, (c) props

6. (Spaced review — Step 2: JSX) A student’s component renders but looks wrong: the heading has no CSS class applied, clicking does nothing, and the image tag causes a syntax error. Which combination of JSX rules is being violated?

• Using class instead of className, onclick instead of onClick, and <img> without self-closing />
• Using className instead of class, onClick instead of onclick, and missing the src attribute
• Forgetting to wrap JSX in a Fragment, using an inline style string, and missing a key prop
• Using lowercase component name, returning multiple root elements, and missing curly braces around a variable

1. Why is it dangerous to use the array index as a key for a dynamic list?

• Array indices are numbers, but React requires string keys — converting indices to strings adds overhead
• If items are reordered, inserted, or removed, the index of items changes — React maps keys to component instances, so incorrect keys cause wrong state to be associated with the wrong component
• Using indices is significantly slower because React must convert each numeric index to a string internally
• Array indices are not globally unique across sibling lists, causing key collisions and rendering conflicts

2. You need to render a list of user cards. Which key strategy is correct?

• users.map((user, index) => <Card key={index} user={user} />)
• users.map(user => <Card key={user.id} user={user} />)
• users.map(user => <Card key={Math.random()} user={user} />)
• users.map(user => <Card key={user} user={user} />)

3. (Spaced review — Step 3: Props) A TaskItem component needs to let the user mark a task as done. The task data comes from the parent via props. Which approach is correct?

• task.done = true inside TaskItem — mutate the prop directly since it is the same object
• Add const [done, setDone] = useState(task.done) inside TaskItem — duplicate the prop into local state
• Call a callback prop from the parent: onToggle(task.id) — let the parent update the data and pass new props down
• Use document.getElementById to update the checkbox directly in the DOM

4. Arrange the lines to render a playlist using .map() with stable keys. (arrange in order)

1. function Playlist({ songs }) {
2. return (
3. • {songs.map(song =>
   • {song.title}
   • )}
4. );
5. }

• {song.title}
• {songs.forEach(song =>

1. What does {showBadge && <Badge />} render when showBadge is false?

• The text false
• An empty <div> placeholder to preserve layout space
• Nothing — false is not rendered by React
• A Badge component with visible={false} passed automatically

2. Analyze this bug: {count && <Badge count={count} />}. When count is 0, a 0 appears in the UI instead of nothing. Why?

• React treats all numbers as truthy in boolean contexts, including zero, so 0 && always renders the right side
• Unlike false, null, and undefined, the number 0 IS a valid React node — React renders it as text. Use {count > 0 && <Badge />} instead
• The && operator does not work with numbers in JavaScript — it is designed only for boolean operands
• This is a known React bug in the reconciler that incorrectly renders falsy values, expected to be fixed in React 19

3. Evaluate two approaches to implementing filters: A: Store the full filtered array in state: const [visibleTasks, setVisibleTasks] = useState(allTasks) B: Store only the filter string in state: const [filter, setFilter] = useState('all') and derive visible tasks with .filter() Which is better?

• A is better — pre-filtering into a separate state variable avoids recomputing the filter on every render
• B is better — derived data should be computed from minimal state, not stored separately. A duplicates data, creating sync bugs when the source changes
• Both are equivalent in behavior and performance — choose whichever approach matches your team’s coding style
• Neither is correct — filtered data should be managed through React Context to avoid prop drilling

4. Arrange the fragments to write a filter button that highlights when active, using a ternary for the variant prop. (arrange in order)

2. ? 'primary'
3. : 'outline-secondary'}
4. onClick={() => setFilter('done')}>
5. Done