How does react work?

It's a JavaScript library for building user interfaces. It allows developers to create reusable UI components that update efficiently and automatically when data changes. React follows a declarative approach, making it easier to manage the state of an application and render dynamic content.

The major features of ReactJS are as follows:

1
Open source
2
Declarative
3
V of mvc
4
It uses Virtual DOM
5
It is Component based dev, smallest logical unit
6
JSX is used
7
One way data binding

Difficulty: 5/10

Topics: virtual DOM, reconciliation, component lifecycle

Scenario Questions

0-2 years experience

1
You need to add a button that toggles a piece of text in a functional component. Walk me through how you would implement that and what happens under the hood when the button is clicked.
2
If you render a list of items using map and forget to provide a key, what visual or performance issues might you see?
3
When you call setState in a class component, when does the UI actually update?

2-5 years experience

1
We have a component that fetches data in useEffect and updates state, but sometimes the UI shows stale data after rapid navigation. How would you debug this and what part of React's rendering model could be causing it?
2
During a refactor we switched from class components to hooks, and a component started re‑rendering twice on each state change. Explain why this might happen and how you would fix it.
3
Our app uses React.memo to optimise a heavy child component, but we notice no performance gain. What could be wrong with our memoisation strategy?

5-8 years experience

1
We need to improve the time‑to‑interactive of a large dashboard that renders thousands of rows. How would you redesign the rendering strategy using React's features to minimise work?
2
Explain how React's Fiber architecture enables interruption of rendering, and how you would leverage it when implementing a progressive loading UI.
3
Our team is introducing server‑side rendering with hydration. What pitfalls should we watch for regarding mismatched markup and how does React reconcile them?

8+ years experience

1
We are planning a gradual migration from a legacy Backbone app to a React micro‑frontend architecture. What high‑level strategy would you propose to ensure a smooth transition while keeping performance and team velocity?
2
At scale, how would you structure shared component libraries and enforce consistent rendering behavior across multiple product teams using React?
3
Discuss the trade‑offs of adopting Concurrent React (React 18) across all services in a large organization, considering backward compatibility, testing, and operational monitoring.

Follow-up Questions

❓Can you elaborate on how React's reconciliation algorithm determines what to update?
❓What are the implications of using useEffect versus useLayoutEffect in terms of rendering timing?
❓How does React's synthetic event system differ from native DOM events?