Basic React Questions

1. What is React?
React is an open-source JavaScript library developed by Facebook for building user interfaces,
especially single-page applications.

2. What are the main features of React?

 Component-based architecture
 Virtual DOM for faster rendering
 One-way data binding
 JSX syntax

3. What is JSX?
JSX (JavaScript XML) is a syntax extension that allows writing HTML inside JavaScript code.

4. What is the difference between functional and class components?

 Functional: Simple JS functions, use hooks for state/lifecycle.

 Class: ES6 classes, use this.state and lifecycle methods.

5. What is the Virtual DOM?

A lightweight copy of the real DOM that React uses to update only changed parts for better
performance.

6. What are props in React?

Props (properties) are read-only data passed from a parent component to a child component.

7. What is state in React?

State is a JavaScript object that stores a component’s dynamic data and triggers UI updates when
changed.

8. Difference between props and state?

 Props: read-only, passed from parent to child.

 State: mutable, managed within the component.

9. What are React hooks?

Functions that let you use state and lifecycle features in functional components (e.g., useState,
useEffect).

10. What is useState in React?

A hook that lets you add state to functional components.
Intermediate React Questions

11. What is useEffect in React?

A hook for side effects like fetching data, updating the DOM, or timers.

12. What is conditional rendering in React?

Showing different UI based on conditions, using if, ternary (? :), or logical &&.

13. What are React fragments?

<></> wrapper that lets you return multiple elements without adding extra DOM nodes.

14. How do you handle events in React?

By passing event handler functions to elements, e.g.,

<button onClick={handleClick}>Click</button>

15. What is controlled vs uncontrolled components?

 Controlled: Form data handled by React state.

 Uncontrolled: Form data handled by the DOM using refs.

16. What is React Router?

A library for navigation in React apps, enabling multiple pages without full reloads.

17. How do you pass data from child to parent in React?

By passing a callback function from parent to child and calling it with the data in the child.

18. What is context in React?

A way to pass data deeply without prop drilling using React.createContext().

19. What is prop drilling?

Passing props through multiple layers just to reach a deeply nested component.

20. What is a higher-order component (HOC)?

A function that takes a component and returns a new component with extra features.

Advanced React Questions

21. What is memoization in React?

Optimization technique to prevent unnecessary re-renders using React.memo or hooks like
useMemo.

22. Difference between useMemo and useCallback?

  useMemo returns a memoized value.
 useCallback returns a memoized function.

23. What is lazy loading in React?

Loading components only when needed using React.lazy and Suspense.

24. What is code splitting in React?

Breaking code into smaller chunks to load only the required parts for faster performance.

25. How does React handle reconciliation?

By comparing the Virtual DOM with the previous one and updating only changed parts in the
real DOM.

26. What is the difference between CSR and SSR in React?

 CSR: Client-side rendering, rendering in the browser.

 SSR: Server-side rendering, rendering HTML on the server before sending it to the client.

27. How to improve performance in a React app?

 Use React.memo
 Code splitting
 Avoid anonymous functions in JSX
 Optimize component re-renders

28. What is an error boundary in React?

A component that catches JavaScript errors in child components and displays a fallback UI.

29. What is hydration in React?

The process of attaching React’s event listeners to server-rendered HTML.

30. What are custom hooks?

Reusable functions that use React hooks logic, allowing you to share stateful behavior between
components.

React Rapid-Fire Q&A – Basic to Advanced

Basic Questions (Beginner Level)

1. What is React?
A JavaScript library by Facebook for building user interfaces, mainly single-page applications.

2. What is JSX?
JavaScript XML — allows writing HTML inside JavaScript.
3. Difference between functional and class components?
Functional → simple functions, use hooks.
Class → ES6 classes, use lifecycle methods.

4. What are props?

Read-only data passed from parent to child components.

5. What is state in React?

A component’s local data storage that can change over time.

6. Difference between props and state?

Props → read-only, external.
State → mutable, internal.

7. What is the Virtual DOM?

A lightweight copy of the real DOM that updates efficiently.

8. What are React hooks?

Functions like useState, useEffect that let you use React features in functional components.

9. What is useState?
Hook for adding state in functional components.

10. What is useEffect?

Hook for side effects like fetching data or DOM updates.

Intermediate Questions (Practical Level)

11. What is conditional rendering?

Displaying UI based on a condition.

{isLoggedIn ? <Dashboard /> : <Login />}

12. What are React fragments?

<></> wrapper for grouping elements without extra DOM nodes.

13. How do you handle events in React?

By passing event handler functions:

<button onClick={handleClick}>Click</button>

14. Controlled vs uncontrolled components?

Controlled → React state handles input value.
Uncontrolled → DOM handles input via refs.
15. What is React Router?
A library for navigation in React apps.

16. How do you pass data from child to parent?

Via callback functions passed as props.

17. What is context in React?

A way to pass data without prop drilling.

18. What is prop drilling?

Passing props through many components unnecessarily.

19. What is a higher-order component (HOC)?

A function that takes a component and returns an enhanced one.

20. What is useRef?

Hook for persisting values or accessing DOM elements.

Advanced Questions (Performance & Architecture)

21. What is memoization in React?

Preventing re-renders using React.memo or hooks.

22. Difference between useMemo and useCallback?

useMemo → memoizes value, useCallback → memoizes function.

23. What is lazy loading?

Loading components only when needed:

const MyComp = React.lazy(() => import('./MyComp'));

24. What is code splitting?

Breaking app code into chunks for faster load times.

25. What is reconciliation in React?

Process of comparing Virtual DOM to previous version and updating only changes.

26. CSR vs SSR in React?

CSR → Rendered in browser.
SSR → Rendered on server before sending HTML.

27. How to improve React performance?

Use React.memo, code splitting, avoid inline functions, optimize renders.
28. What is an error boundary?
Component that catches errors in child components.

29. What is hydration in React?

Attaching event listeners to server-rendered HTML.

30. What are custom hooks?

Reusable functions containing React hook logic.

React Coding Examples

31. List rendering in React

items.map(item => <li key={item.id}>{item.name}</li>)

32. Controlled form input

<input value={name} onChange={e => setName(e.target.value)} />

33. Fetch data with useEffect

useEffect(() => { fetch('/api').then(res => res.json()) }, []);

34. Conditional button disable

<button disabled={!formValid}>Submit</button>

35. Passing props

<Child name="Vaishnaavi" />

More Advanced Concepts

36. What is React.StrictMode?

Tool for highlighting potential problems in an app.

37. What is the difference between React.createElement and JSX?

JSX is syntax sugar for React.createElement.

38. How does key work in React lists?

Helps React identify which items have changed.
39. What is the difference between controlled and uncontrolled form validation?
Controlled → React manages values, Uncontrolled → DOM manages values.

40. What are render props?

Technique where a component’s child is a function that returns UI.

41. What is server-side rendering’s main benefit?

Better SEO and faster first render.

42. What is hydration’s drawback?

Initial page load can be slower due to attaching events.

43. Why should you avoid index as key in lists?

It causes incorrect re-renders if list order changes.

44. How does React.memo work?

It compares props and re-renders only if they change.

45. What is suspense in React?

Used for handling loading states with React.lazy.

46. How do you prevent prop drilling without context?

Using composition or state management libraries.

47. What is the difference between useReducer and useState?

useState → simple state, useReducer → complex state logic.

48. What are portals in React?

Render children into a different part of the DOM.

49. What is concurrent mode in React?

Experimental feature for smoother rendering.

50. How to debug React components?

Use React DevTools, console logs, breakpoints.

Basic & Core Concepts

1. What is React and why is it used?

A JavaScript library for building fast, interactive UIs; it uses components, Virtual DOM,
and one-way data binding.
2. What is JSX?
JavaScript XML — syntax for writing HTML inside JavaScript.
3. Difference between functional and class components?
Functional: simple JS functions, use hooks.
Class: ES6 classes, use this.state and lifecycle methods.
 4. What are props in React?
Read-only data passed from parent to child components.
5. What is state in React?
A mutable object that stores a component’s dynamic data.
6. Props vs state?
Props → external & immutable.
State → internal & mutable.
7. What is the Virtual DOM and how does it work?
A lightweight copy of the real DOM; React updates only the changed elements,
improving performance.

Hooks & State Management

8. What are hooks in React?

Functions like useState and useEffect that let functional components use state and
lifecycle features.
9. What is useEffect used for?
To perform side effects like API calls, DOM updates, or timers.
10. What is useState?
A hook that adds state to functional components.
11. What is the difference between useMemo and useCallback?
useMemo → memoizes values.
useCallback → memoizes functions.
12. What is context in React?
A way to share data globally without prop drilling.

Rendering & Performance

13. What is conditional rendering in React?

Displaying components based on certain conditions.
14. How do you prevent unnecessary re-renders?
Use React.memo, useMemo, useCallback.
15. What is React.memo?
A higher-order component that memoizes a functional component’s output.
16. What are keys in React lists?
Unique identifiers for list items to help React track changes.

Routing & Data Flow

 17. What is React Router?
A library for navigation without page reloads.
18. How to pass data from child to parent?
Using a callback function passed as a prop.
19. What is prop drilling? How to avoid it?
Passing props through many components unnecessarily; can be avoided with context or
state management libraries.

Advanced Topics

20. What is lazy loading in React?

Loading components only when needed using React.lazy and Suspense.
21. What is an error boundary?
A component that catches JavaScript errors in child components.
22. CSR vs SSR in React?
CSR → rendering in the browser.
SSR → rendering on the server before sending HTML.
23. What are custom hooks?
Reusable functions that use React hooks logic.
24. What is reconciliation?
React’s process of comparing Virtual DOM trees and updating only changed parts in the
real DOM.
25. How do you improve performance in large React apps?
Code splitting, memoization, virtualization, avoiding unnecessary re-renders.