React · Question Set

Components, Props & State – React interview questions

Components, Props & State interview questions for placements and exams.

Subject: ReactDifficulty: Mixed17 questions in this set

Set overview

Questions

Included in this set

Subject

React

Explore more sets

Difficulty

Mixed

Level of this set

React – Components, Props & State questions (17)

Go through each question and its explanation. Use this set as a focused practice pack for React.

Back to React subject page

1. What is the usage of setState()?

Difficulty: EasyType: MCQTopic: State

setState() schedules an update to the component’s state and re-renders it. It can also accept a callback that runs after the update is complete.

2. What is used for passing data to a component from outside?

Difficulty: EasyType: MCQTopic: Props

Props are used to pass data from parent components to child components. They make components reusable and customizable.

3. Explain the lifecycle of a React component (mount, update, unmount).

Difficulty: MediumType: SubjectiveTopic: Lifecycle

React component lifecycle includes three phases: Mounting (component created and added to DOM), Updating (re-render due to state/prop changes), and Unmounting (component removed from DOM). Hooks like useEffect can handle these phases in functional components.

4. Explain how refs work in uncontrolled components.

Difficulty: MediumType: SubjectiveTopic: Refs

Refs let you directly access a DOM element. In uncontrolled components, you use refs to read form values without React managing the input state.

Example code

const inputRef = useRef();
const handleSubmit = () => {
  alert(inputRef.current.value);
};

5. What are functional components and class components in React?

Difficulty: EasyType: SubjectiveTopic: Components

Functional components are simple JavaScript functions that return JSX. Class components are ES6 classes that extend React.Component and use a render() method. Functional components are now preferred because they are simpler and support Hooks.

Example code

// Functional Component
function Welcome() {
  return <h1>Hello!</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

6. Explain the differences between functional and class components.

Difficulty: MediumType: SubjectiveTopic: Components

Functional components are lightweight and rely on Hooks for state and lifecycle. Class components use the render() method, have access to lifecycle methods, and use this.state. Hooks made functional components capable of everything classes can do with less code.

7. How do you handle props in functional vs class components?

Difficulty: EasyType: SubjectiveTopic: Props

In functional components, props are received as function arguments. In class components, they are accessed via this.props. Props are read-only in both cases.

Example code

// Functional
function Hello(props) { return <p>{props.name}</p>; }
// Class
class Hello extends React.Component { render() { return <p>{this.props.name}</p>; } }

8. How do you handle state in class vs functional components?

Difficulty: MediumType: SubjectiveTopic: State Mgmt

In class components, state is managed with this.state and updated using setState(). In functional components, state is handled with the useState() Hook. Both trigger re-renders when the state changes.

Example code

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

// Class
this.state = { count: 0 };
this.setState({ count: this.state.count + 1 });

9. What is useState() and how does it work?

Difficulty: EasyType: SubjectiveTopic: useState

useState() is a Hook that allows you to add state to functional components. It returns an array with the current state and a function to update it. When you call the setter function, React re-renders the component.

Example code

const [name, setName] = useState('Guest');
setName('John'); // updates state and re-renders component

10. What are controlled and uncontrolled components in React?

Difficulty: MediumType: SubjectiveTopic: Forms

In controlled components, form data is handled by React state. In uncontrolled components, the DOM itself manages the input value using refs. Controlled components provide better validation and consistency.

Example code

// Controlled
<input value={text} onChange={(e) => setText(e.target.value)} />

// Uncontrolled
<input ref={inputRef} />

11. Why are controlled components preferred for form handling?

Difficulty: MediumType: SubjectiveTopic: Forms

Controlled components make React the single source of truth for input values. This gives better control for validation, conditionally disabling inputs, and synchronizing with state.

12. How do you update state in a class component using setState()?

Difficulty: MediumType: SubjectiveTopic: State

setState() is used to update a class component’s state. It merges the new values with the existing state and triggers a re-render.

Example code

this.setState({ count: this.state.count + 1 });

13. Why shouldn’t you modify the state directly?

Difficulty: MediumType: SubjectiveTopic: State

Directly changing state (like this.state.count = 1) won’t trigger a re-render and can cause bugs. Always use setState() or Hooks to update state safely.

14. What are side effects in React components?

Difficulty: MediumType: SubjectiveTopic: useEffect

Side effects are operations that affect something outside the component, like data fetching, subscriptions, or manually changing the DOM. These are handled using the useEffect Hook.

15. What are the two types of side effects?

Difficulty: MediumType: SubjectiveTopic: useEffect

There are two types: effects without cleanup (like API calls or logging) and effects with cleanup (like removing event listeners or cancelling timers). useEffect can handle both types using return functions.

Example code

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(timer); // cleanup
}, []);

16. How does React handle memory cleanup in useEffect()?

Difficulty: MediumType: SubjectiveTopic: useEffect

React cleans up side effects automatically when a component unmounts or before the effect runs again. Returning a cleanup function inside useEffect prevents memory leaks.

17. What does state represent in React?

Difficulty: EasyType: MCQTopic: State

State represents the internal data of a component that can change over time and cause re-renders when updated.

More sets in React

React Basics(19+ Questions)
React Hooks(16+ Questions)
React Advanced Concepts(15+ Questions)
React Router, Optimization & Real-World Scenarios(18+ Questions)
React Project Setup & Architecture(14+ Questions)
React Applied Patterns & Performance(18+ Questions)

Explore related subjects

HTML CSS Javascript Typescript SQL & Databases Node Js

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.

Quick navigation:React subject page•All subjects

Subject page

React · Question Set

Components, Props & State – React interview questions

Components, Props & State interview questions for placements and exams.

Subject: ReactDifficulty: Mixed17 questions in this set

Set overview

Questions

Included in this set

Subject

React

Explore more sets

Difficulty

Mixed

Level of this set

React – Components, Props & State questions (17)

Go through each question and its explanation. Use this set as a focused practice pack for React.

Back to React subject page

1. What is the usage of setState()?

Difficulty: EasyType: MCQTopic: State

setState() schedules an update to the component’s state and re-renders it. It can also accept a callback that runs after the update is complete.

2. What is used for passing data to a component from outside?

Difficulty: EasyType: MCQTopic: Props

Props are used to pass data from parent components to child components. They make components reusable and customizable.

3. Explain the lifecycle of a React component (mount, update, unmount).

Difficulty: MediumType: SubjectiveTopic: Lifecycle

4. Explain how refs work in uncontrolled components.

Difficulty: MediumType: SubjectiveTopic: Refs

Refs let you directly access a DOM element. In uncontrolled components, you use refs to read form values without React managing the input state.

Example code

const inputRef = useRef();
const handleSubmit = () => {
  alert(inputRef.current.value);
};

5. What are functional components and class components in React?

Difficulty: EasyType: SubjectiveTopic: Components

Example code

// Functional Component
function Welcome() {
  return <h1>Hello!</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

6. Explain the differences between functional and class components.

Difficulty: MediumType: SubjectiveTopic: Components

7. How do you handle props in functional vs class components?

Difficulty: EasyType: SubjectiveTopic: Props

In functional components, props are received as function arguments. In class components, they are accessed via this.props. Props are read-only in both cases.

Example code

// Functional
function Hello(props) { return <p>{props.name}</p>; }
// Class
class Hello extends React.Component { render() { return <p>{this.props.name}</p>; } }

8. How do you handle state in class vs functional components?

Difficulty: MediumType: SubjectiveTopic: State Mgmt

Example code

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

// Class
this.state = { count: 0 };
this.setState({ count: this.state.count + 1 });

9. What is useState() and how does it work?

Difficulty: EasyType: SubjectiveTopic: useState

Example code

const [name, setName] = useState('Guest');
setName('John'); // updates state and re-renders component

10. What are controlled and uncontrolled components in React?

Difficulty: MediumType: SubjectiveTopic: Forms

Example code

// Controlled
<input value={text} onChange={(e) => setText(e.target.value)} />

// Uncontrolled
<input ref={inputRef} />

11. Why are controlled components preferred for form handling?

Difficulty: MediumType: SubjectiveTopic: Forms

Controlled components make React the single source of truth for input values. This gives better control for validation, conditionally disabling inputs, and synchronizing with state.

12. How do you update state in a class component using setState()?

Difficulty: MediumType: SubjectiveTopic: State

setState() is used to update a class component’s state. It merges the new values with the existing state and triggers a re-render.

Example code

this.setState({ count: this.state.count + 1 });

13. Why shouldn’t you modify the state directly?

Difficulty: MediumType: SubjectiveTopic: State

Directly changing state (like this.state.count = 1) won’t trigger a re-render and can cause bugs. Always use setState() or Hooks to update state safely.

14. What are side effects in React components?

Difficulty: MediumType: SubjectiveTopic: useEffect

Side effects are operations that affect something outside the component, like data fetching, subscriptions, or manually changing the DOM. These are handled using the useEffect Hook.

15. What are the two types of side effects?

Difficulty: MediumType: SubjectiveTopic: useEffect

Example code

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(timer); // cleanup
}, []);

16. How does React handle memory cleanup in useEffect()?

Difficulty: MediumType: SubjectiveTopic: useEffect

React cleans up side effects automatically when a component unmounts or before the effect runs again. Returning a cleanup function inside useEffect prevents memory leaks.

17. What does state represent in React?

Difficulty: EasyType: MCQTopic: State

State represents the internal data of a component that can change over time and cause re-renders when updated.

More sets in React

React Basics(19+ Questions)
React Hooks(16+ Questions)
React Advanced Concepts(15+ Questions)
React Router, Optimization & Real-World Scenarios(18+ Questions)
React Project Setup & Architecture(14+ Questions)
React Applied Patterns & Performance(18+ Questions)

Explore related subjects

HTML CSS Javascript Typescript SQL & Databases Node Js

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.

Quick navigation:React subject page•All subjects

Components, Props & State – React interview questions

Set overview

1. What is the usage of setState()?

2. What is used for passing data to a component from outside?

3. Explain the lifecycle of a React component (mount, update, unmount).

4. Explain how refs work in uncontrolled components.

5. What are functional components and class components in React?

6. Explain the differences between functional and class components.

7. How do you handle props in functional vs class components?

8. How do you handle state in class vs functional components?

9. What is useState() and how does it work?

10. What are controlled and uncontrolled components in React?

11. Why are controlled components preferred for form handling?

12. How do you update state in a class component using setState()?

13. Why shouldn’t you modify the state directly?

14. What are side effects in React components?

15. What are the two types of side effects?

16. How does React handle memory cleanup in useEffect()?

17. What does state represent in React?

More sets in React

Explore related subjects

Continue your preparation

Master Interviews Anywhere, Anytime

Components, Props & State – React interview questions

Set overview

1. What is the usage of setState()?

2. What is used for passing data to a component from outside?

3. Explain the lifecycle of a React component (mount, update, unmount).

4. Explain how refs work in uncontrolled components.

5. What are functional components and class components in React?

6. Explain the differences between functional and class components.

7. How do you handle props in functional vs class components?

8. How do you handle state in class vs functional components?

9. What is useState() and how does it work?

10. What are controlled and uncontrolled components in React?

11. Why are controlled components preferred for form handling?

12. How do you update state in a class component using setState()?

13. Why shouldn’t you modify the state directly?

14. What are side effects in React components?

15. What are the two types of side effects?

16. How does React handle memory cleanup in useEffect()?

17. What does state represent in React?

More sets in React

Explore related subjects

Continue your preparation

Master Interviews
Anywhere, Anytime