01 / 03

How can you pass data from a parent component to a child component in React?

Difficulty: 2/10
props, prop drilling, type checking

Data can be passed from a parent component to a child component using props. Props are properties that are set by the parent component and received by the child component as function arguments or properties.

Scenario Questions

0-2 years experience

  1. 1Imagine you have a Parent component that renders a Child component and you need to show the user's name inside the Child. How would you pass that name down?
  2. 2If the Parent receives a prop called `isAdmin` and you need the Child to render different UI based on it, what code would you write to forward that prop?
  3. 3What happens if you forget to pass a required prop from Parent to Child? How does React behave?

2-5 years experience

  1. 1You added a new feature where the Parent fetches a list of items and passes each item to a ListItem child component. The list sometimes renders empty. Walk me through how you'd debug the data flow.
  2. 2Suppose the Child component needs to call a callback when a button is clicked, and the Parent updates state based on that. How would you set up the prop and why might the callback be undefined?
  3. 3If you need to pass a large configuration object through several nested children, what alternatives would you consider and why might props become problematic?

5-8 years experience

  1. 1In a performance‑critical dashboard, the Parent re‑renders frequently. How would you structure prop passing to a Child that only needs a subset of the data to avoid unnecessary renders?
  2. 2When refactoring a legacy codebase, you notice many components receive props just to forward them deeper (prop drilling). How would you redesign the data flow, and what trade‑offs does using Context introduce?
  3. 3Explain how you would type‑check the props in a TypeScript project and what pitfalls you watch for when the Parent’s shape changes.

8+ years experience

  1. 1Your organization is moving from a monolithic React app to micro‑frontends. How would you handle passing shared data (e.g., auth token) from a host app to many independently deployed child apps?
  2. 2Design a strategy for evolving a public component library where parent components may change prop names over time. How do you ensure backward compatibility and minimal breakage for downstream teams?
  3. 3Discuss the long‑term maintenance implications of using Context vs. a state‑management library (Redux, Zustand) for cross‑tree data sharing, especially regarding bundle size and team onboarding.

Follow-up Questions

  • Can you sketch a short code example of the parent passing a prop?
  • What would you do if the child needed to modify that data?
  • How would you test that the prop is received correctly?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.