Questions
2 of 3
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
How can you transfer data from a child component to a parent component in react?
Difficulty: 5/10
state lifting, callback props, context
We can pass data from child to parent using a callback function passed as a prop from parent to children, this callback will be called to update parent with the data in child component.
Create a callback function in the parent component: This function will be used to update the state of the parent component. In this example, when the button in ChildComponent is clicked, the sendData method is called, which in turn calls the handleData method of ParentComponent (passed down as a prop), updating the state of ParentComponent with the data from ChildComponent
Pass the callback function to the child component as a prop: The child component can then call this function and pass data to it
Scenario Questions
0-2 years experience
- 1You have a Child component that renders a button. When the button is clicked, the Parent needs to know the click happened. How would you implement this?
- 2Suppose the Child component contains a text input and you need to display the entered value in the Parent. Walk me through the steps you'd take.
2-5 years experience
- 1We have a form split across several child components, and the Parent must collect all field values to submit. The current design uses callbacks passed down, but the form sometimes loses data after a child re‑renders. What could be causing this and how would you fix it?
- 2During a refactor, a child component that used to call a prop function to update the Parent's state started throwing 'undefined is not a function'. What debugging steps would you take and how would you restore the data flow?
5-8 years experience
- 1In a large dashboard, dozens of nested child components need to report status updates to a top‑level container. Compare using lifted state via callbacks versus React Context or a state‑management library. Which would you choose and why?
- 2You notice that frequent child‑to‑parent callbacks are causing unnecessary re‑renders of the Parent and its siblings, hurting performance. How would you mitigate this while preserving the data flow?
8+ years experience
- 1Our legacy codebase relies heavily on prop drilling for child‑to‑parent communication across many layers, making new feature work painful. Propose a migration strategy to a more scalable solution, considering backward compatibility and team adoption.
- 2We are planning a micro‑frontend architecture where each micro‑frontend is a React app that needs to send events to a host container. How would you design the communication mechanism, and what trade‑offs does it have compared to traditional prop callbacks?
Follow-up Questions
- What issues might arise if the callback isn’t memoized?
- How would you handle multiple sibling components needing the same data?
- Can you think of a scenario where lifting state would be a bad choice?