📰 Reading: Tech Articles & Blog Posts

handleClick is recreated on every render:

The article explains: "every time count changes, ParentComponent re-renders, which creates a NEW handleClick function reference. Even if you wrap ExpensiveChild in React.memo(), it will still re-render because the prop reference changed."

Why this matters for blog post reading:
Technical blog posts often structure arguments as: problem → solution → pitfall → fix. Recognizing this structure helps you predict where the key information is:

• Problem → unexpected re-renders
• Rule → 3 triggers for re-render
• Pitfall → memo alone isn't enough with callbacks
• Fix → pair memo with useCallback

Reading strategy for technical articles:
"Key takeaway" sections, bold text, and code examples are always high-density information. Scan for these when reading under time pressure.

When the parent component re-renders — trigger #2:

The article says: "The third trigger surprises most developers." Wait — it says the THIRD trigger surprises most developers. Let's count the triggers as listed in the article:

1. Its own state changes
2. Its parent component re-renders ← this is trigger 2 in the list
3. A context it subscribes to changes ← this is trigger 3

The article explicitly says "The third trigger surprises most developers" — referring to the context subscription trigger (number 3 in the list). So the correct answer is "When a context the component subscribes to changes."

Wait — this question tests careful reading:
The correct answer is option C (context), not option B (parent re-render). The article says trigger 3 (context) is the surprising one.

Reading technique: When an article lists numbered items, always re-read before referencing them. "The third" in prose doesn't always match "third option" in a multiple-choice list — it refers to the article's own numbering.

Flexbox — items flow in one direction:

The article's rule of thumb: "if you're thinking about rows AND columns at the same time, use Grid. If you're thinking about a list of items in one direction, use Flexbox."

A navigation bar is explicitly listed as a Flexbox use case: "Navigation bars, Button groups, Card content (icon + text side by side)"

Navigation items flow in a single row (or column on mobile) — that's one-dimensional, so Flexbox is correct.

Technical blog post vocabulary:

• rule of thumb → a practical guideline that works most of the time (not a strict rule)
• one-dimensional / two-dimensional → whether layout works on 1 or 2 axes simultaneously
• compose well together → can be nested and used in combination
• macro layout → the overall page structure (as opposed to component-level layout)
• fallback → a less-capable alternative for older browser support

CSS article structure: "When to use which" articles typically use comparison tables or parallel structures. Notice how both tools are described using the same categories (definition → use cases → rule) — this parallel structure makes comparison reading faster.