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?

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?