ReactJS React Components Flashcards

24 sample cards from the React Components deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. Which lifecycle method runs once after a class component is first inserted into the DOM, and what is it used for?

   componentDidMount() — ideal for side effects like data fetching, subscriptions, or manual DOM/timer setup after the initial render.

2. Which lifecycle method runs after every update (re-render) but not on the initial mount?

   componentDidUpdate(prevProps, prevState) — used to react to prop/state changes, e.g. refetch data when a prop changes.

3. Which lifecycle method runs just before a component is removed, and what belongs there?

   componentWillUnmount() — used for cleanup: clearing timers, cancelling network requests, and removing event listeners/subscriptions to prevent memory leaks.

4. What is the purpose of shouldComponentUpdate(nextProps, nextState)?

   A performance optimization: return false to skip re-rendering when the new props/state don't require an update; default behavior returns true.

5. In componentDidUpdate, how do you avoid an infinite update loop when calling setState?

   Wrap the setState in a condition comparing prevProps/prevState to the current values, e.g. if (prevProps.id !== this.props.id) { ...setState... }.

6. Which useEffect call approximates componentDidMount + componentWillUnmount?

   useEffect(() => { /* setup */ return () => { /* cleanup */ }; }, []) — the empty dependency array runs setup once on mount and the returned function on unmount.

7. How must you update state in a class component, and why not assign this.state directly?

   Use this.setState({ ... }). Directly assigning this.state does not trigger a re-render and bypasses React's update mechanism.

8. Is this.setState synchronous or asynchronous, and how do you read updated state right after calling it?

   It is asynchronous/batched. To read the result, use the second callback argument: this.setState({...}, () => { /* use this.state here */ }).

9. How do you update state based on the previous state in a class component?

   Pass a function to setState: this.setState(prev => ({ count: prev.count + 1 })), ensuring the update uses the latest state rather than a possibly stale this.state.

10. Can a class component modify this.props?

    No. Props are read-only in class components just as in functional components; only the parent that owns the data may change them.

11. How do you correctly bind an event-handler method to this in a class component?

    Bind in the constructor (this.handle = this.handle.bind(this)), or define it as an arrow-function class field (handle = () => {...}) so this refers to the instance.

12. Compare state and props in one sentence each.

    Props are read-only data passed in from a parent and owned externally; state is internal, mutable data owned and managed by the component itself.

13. What is the standard direction of data flow in React?

    Unidirectional (one-way): data flows down from parent to child via props; there is no automatic upward or sibling flow.

14. How does a parent pass data to a child component?

    By supplying it as a JSX attribute (prop) on the child element, e.g. <Child name="Al" count={5} />, which the child reads via props.

15. When a parent's state changes and it is passed as a prop to a child, what happens to the child?

    The child re-renders with the new prop value, since React re-renders children when the props they receive change.

16. Can a child directly change a value it received as a prop from its parent?

    No. Props are read-only; the child cannot mutate them. To change the data, the parent must update its own state (often via a callback the child calls).

17. What is "prop drilling" in parent-to-child communication?

    Passing a prop down through several intermediate components that don't use it, just to reach a deeply nested child. It can be avoided with the Context API.

18. How does a child send data up to its parent?

    The parent passes a callback function as a prop; the child invokes that function with data as an argument, e.g. props.onChange(newValue), letting the parent handle it.

19. Give the code pattern for child-to-parent communication via a callback.

    Parent: <Child onSend={(val) => this.setState({ data: val })} />. Child: <button onClick={() => props.onSend('hi')}>Send</button>.

20. Why can't a child mutate the parent's state directly?

    Because state is encapsulated in the parent; React enforces one-way data flow. The child must request a change by calling a parent-provided callback, and the parent updates its own state.

21. What is "lifting state up" and when do you do it?

    Moving shared state to the closest common ancestor of the components that need it. You do it so multiple children can read/update the same data through props and callbacks.

22. How do two sibling components share data in React?

    By lifting the shared state up to their common parent; the parent passes the state down to one sibling as a prop and passes an updater callback to the other, so changes propagate through the parent.

23. Why can't sibling components communicate directly with each other?

    Because React's data flow is unidirectional (top-down) and siblings have no parent-child relationship; data must travel up to a common ancestor and back down through props.

24. Name a built-in React feature that lets distant or sibling components share data without prop drilling.

    The Context API (React.createContext with a Provider and useContext/Consumer), which lets components read shared values without passing props through every level.

What this deck covers

React Components flashcards FAQ