20 Common React Theoretical Questions & Answers

1. What is React?

React is an open-source JavaScript library developed by Meta (Facebook) for building fast, interactive user interfaces, especially single-page applications. It uses a component-based architecture and a declarative UI.

2. What are React components?

Components are independent, reusable pieces of UI.

• Functional Components (preferred)
• Class Components (older)

3. What is JSX?

JSX (JavaScript XML) is a syntax extension that allows writing HTML-like code inside JavaScript. It is compiled toReact.createElement() calls.

4. What is the Virtual DOM?

The Virtual DOM is an in-memory representation of the UI. When state changes, React:

• Creates a new Virtual DOM
• Diffs it with the previous version
• Updates only the changed parts in the real DOM

This improves performance.

5. What are props in React?

Props (“properties”) are read-only data passed from parent to child components. They help customize components.

6. What is state in React?

State is mutable data stored inside a component. When state changes, the component re-renders.

7. Difference between state and props

• Props: Immutable, set by parent
• State: Mutable, managed by the component

8. What are hooks in React?

Hooks are functions that allow functional components to use state and lifecycle features.

• useState
• useEffect
• useContext
• useMemo, useCallback

9. What is useState?

A hook that adds state to functional components.

const [count, setCount] = useState(0);

10. What is useEffect?

A hook used for side effects like data fetching, subscriptions, or timers. It runs after render.

useEffect(() => {
    console.log("mount or update");
}, []);

11. What is lifting state up?

Sharing state between sibling components by moving it to their closest common parent.

12. What is React Context?

Context allows passing data (theme, user, settings) down the component tree without prop drilling.

13. What is prop drilling?

Passing props through multiple components even when only the deepest component needs them.

14. What are controlled components?

Form elements where React controls the value via state.

15. What are uncontrolled components?

Form elements where the DOM maintains state, accessed via refs.

16. What is reconciliation?

The process of comparing Virtual DOM trees and efficiently updating the real DOM using a diffing algorithm.

17. What are keys in lists?

Keys uniquely identify list items, helping React track changes and avoid rendering bugs.

<li key={id}>Item</li>

18. What is React Router?

A library for navigation in React apps using components likeRoute, BrowserRouter, and Link.

19. What is Redux?

Redux is a state management library based on a single store, actions, reducers, and pure functions.

20. React vs Angular vs Vue

• React: Library, medium learning curve
• Angular: Full framework, steep learning curve
• Vue: Framework, beginner-friendly