React Components & Props — Interview Questions & Answers

Ques 1: What are components in React?

Ans: Components are reusable, independent pieces of UI in React. Each component returns JSX and can manage its own state and logic.

Ques 2: What are the two main types of components in React?

1. Functional Components — Simple JavaScript functions that return JSX.
2. Class Components — ES6 classes that extend React.Component and use lifecycle methods.

Ques 3: What is a functional component?

Ans: A functional component is a plain JavaScript function that accepts props and returns JSX.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

Ques 4: What is a class component?

Ans: A class component is a component that extends React.Component and includes lifecycle methods and state.

Example:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Ques 5: What is the difference between functional and class components?

Feature	Functional Component	Class Component
Syntax	Function	Class
State	useState Hook	this.state
Lifecycle	useEffect Hook	Lifecycle methods
Performance	Faster	Slightly heavier
Simplicity	Simple	Verbose

Ques 6: What is the component lifecycle in React?

Ans: The component lifecycle represents different phases (Mounting, Updating, Unmounting) that a class component goes through during its existence.

Ques 7: What are the main React lifecycle methods?

1. Mounting: constructor(), componentDidMount()
2. Updating: shouldComponentUpdate(), componentDidUpdate()
3. Unmounting: componentWillUnmount()

Ques 8: How are lifecycle methods handled in functional components?

Ans: Functional components use the useEffect() Hook to mimic lifecycle behavior like mounting, updating, and cleanup.

Ques 9: What are props in React?

Ans: Props (short for “properties”) are read-only inputs passed from parent to child components to make components dynamic and reusable.

Example:

<Greeting name="John" />

Ques 10: Are props mutable or immutable?

Ans: Props are immutable — they cannot be changed by the child component.

Ques 11: How do you access props in a functional component?

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Ques 12: How do you access props in a class component?

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Ques 13: What is props destructuring?

Ans: Destructuring simplifies prop usage by extracting values directly.

Example:

function Welcome({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

Ques 14: What happens if props are not passed?

Ans: If props are missing, the component may show undefined. You can use defaultProps or default values in destructuring to handle this.

Ques 15: How do you define default props?

function Welcome({ name = "Guest" }) {
  return <h1>Hello, {name}</h1>;
}

or

Welcome.defaultProps = { name: "Guest" };

Ques 16: Can props be functions?

Ans: Yes, props can be functions — this allows parent components to pass callbacks.

Example:

<Child onClick={handleClick} />

Ques 17: What is component reusability in React?

Ans: It means creating generic components that can be reused with different props and behaviors without code duplication.

Ques 18: How do you make a reusable component?

• Use props for customization
• Avoid hardcoded data
• Keep logic and presentation separate

Example:

<Button label="Save" color="blue" />
<Button label="Cancel" color="red" />

Ques 19: Can a component render another component?

Ans: Yes. React components are composable.

Example:

function App() {
  return <Header />;
}

Ques 20: What are higher-order components (HOCs)?

Ans: A HOC is a function that takes a component and returns a new component with added functionality.

Example:

const Enhanced = withLogger(MyComponent);

Ques 21: What are pure components?

Ans: A pure component renders only when props or state change, optimizing performance by avoiding unnecessary re-renders.

Ques 22: Can props be validated?

Ans: Yes, using the prop-types library.

Example:

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

Ques 23: What is “children” prop in React?

Ans: The children prop allows passing nested elements to a component.

Example:

<Card>
  <p>This is inside the card</p>
</Card>

Ques 24: Can you pass objects or arrays as props?

Ans: Yes.

Example:

<User info={{ name: 'John', age: 25 }} />

Ques 25: What is the difference between props and state?

Props	State
Passed from parent	Managed inside component
Immutable	Mutable
External data	Internal data
Functional purpose	Logical purpose