What is the core equation of React?
UI = f(state). Your user interface is a function of your application’s state. Given the same state, you always get the same UI. Components are those functions.
What is the difference between imperative and declarative UI programming?
Imperative: you give step-by-step DOM instructions (find element, change class, update text). Declarative: you describe what the UI should look like for a given state, and React figures out the DOM operations.
What analogy captures declarative UI well?
A taxi: you say where you want to go (declarative), not turn-by-turn directions (imperative). React is the driver — it knows shortcuts and handles the details.
What are the 5 steps of ‘Thinking in React’?
1) Break UI into a component hierarchy. 2) Build a static version (no state). 3) Identify the minimal state. 4) Decide where state should live. 5) Add inverse data flow (callbacks).
Why should you build a static version first with no state?
Building static UI requires lots of typing but no thinking. Adding interactivity requires lots of thinking but little typing. Separating these concerns makes each phase cleaner.
How do you decide if something should be state?
Ask three questions: Does it change over time? (if not, it’s a constant). Is it passed from a parent via props? (then parent owns it). Can you compute it from other state/props? (then derive it). Only what’s left is state.
What does ‘keep state DRY’ mean?
Don’t Repeat Yourself. Store the minimal data needed and derive everything else. E.g. store a list of items in state, but compute the item count from the array length — don’t store both.
What is ‘derived state’ and why is it better than storing extra state?
Values computed from existing state/props (e.g. filteredList from list + searchTerm). Derived state can never be out of sync, unlike redundant state which can become contradictory.
How do you decide which component should own a piece of state?
Find every component that renders something based on that state. Find their closest common parent. That parent (or a component above it) should own the state.
What does ‘unidirectional data flow’ mean?
Data flows one way: parent → child via props. Children can’t directly modify parent state. Instead, parents pass callback functions that children invoke to request changes.
What is ‘inverse data flow’?
When a child needs to change a parent’s state, the parent passes a setter function as a prop. The child calls it, data flows back up, and the parent re-renders with new state flowing down.
How should you think about a React component?
As a pure function: props/state go in, JSX comes out. Same inputs = same output. Side effects (data fetching, timers, DOM manipulation) belong in useEffect, not in the render logic.
What does ‘components are functions’ mean practically?
Every render is a fresh function call. Local variables are recreated, closures capture current state/props, and the returned JSX is a new snapshot. Nothing persists between renders except state and refs.
Why does React re-render an entire subtree and not just the changed component?
React can’t know in advance which children depend on the changed data. Re-rendering the subtree and diffing the result is simpler and usually fast enough. memo opts specific children out.
What is the ‘state machine’ mental model for components?
Think of each component as having a finite set of visual states (loading, error, success, empty, etc.). State determines which visual state is active. Events trigger transitions between states.
How does the spreadsheet analogy apply to React?
In a spreadsheet, changing cell A1 automatically recalculates B1 and C1 that depend on it. In React, changing state automatically re-renders every component that depends on that state.
What mental shift do event handlers require in React?
Don’t think ‘when this button is clicked, update that DOM element.’ Think ‘when this button is clicked, update state — React will figure out the DOM changes from the new state.’
Why does React own the rendering schedule?
You describe what the UI should be; React decides when and how to apply updates. This lets React batch updates, prioritize urgent work (like user input), and defer less critical renders.
What does ‘component composition’ mean?
Building complex UIs by nesting simple components, each responsible for one thing. Prefer composing small focused components over building large monolithic ones.
How does the component tree map to your data model?
Good component boundaries often mirror the shape of your data. If your JSON has a list of products each with details, you likely have a ProductList component containing ProductItem components.
What is the key difference between props and state?
Props are like function arguments — passed in from outside, read-only within the component. State is like a component’s private memory — it persists across renders and can be updated by the component itself.
Why should components be ‘pure’ during rendering?
Pure components (same inputs → same output, no side effects) are predictable, testable, and safe for React to re-render or skip. Impure render logic causes bugs that are hard to trace.
