Which of the following is a key benefit of using controlled components in React forms?
Simplified state management with reduced boilerplate code.
Enhanced control over form data and validation.
Direct manipulation of the DOM for improved performance.
Seamless integration with external libraries for form handling.
When a component's state or props change, React decides whether to update the actual DOM. What is this process called?
Component rehydration
State reconciliation
Virtual DOM diffing
Lifecycle management
What is the purpose of the useState hook in React?
useState
To style components dynamically
To fetch data from an API
To manage and update the state of a functional component
To handle user input events
What is the correct way to embed a JavaScript expression inside JSX?
{ expression }
expression
( expression )
{{ expression }}
What is the purpose of event.preventDefault() in React event handling?
event.preventDefault()
To stop the event from bubbling up the component tree
To prevent the default behavior of the event (like form submission)
To cancel the event entirely and prevent any further actions
To detach the event handler after it has been executed once
When would it be more appropriate to consider using an uncontrolled component in a React form?
When you prefer a more imperative approach and direct DOM manipulation.
When integrating with a third-party library that requires direct access to form elements.
When dealing with a large, complex form where performance optimization is critical.
When you need real-time validation and immediate feedback to the user.
In JSX, how would you set the 'class' attribute for an element?
What happens if a prop is not provided to a component with a default prop defined?
An error is thrown
The prop will be undefined
The component will not render
The default prop value is used
What is the purpose of using key prop in JSX elements within a list?
key
To give each element a unique identifier for styling purposes.
To associate event handlers with specific elements.
To help React efficiently update and re-render lists.
To define the order in which elements should be displayed.
Which of the following is NOT a valid way to bind an event handler in a React class component?
Binding in the constructor: this.handleClick = this.handleClick.bind(this)
this.handleClick = this.handleClick.bind(this)
Using an arrow function in the callback: onClick={() => this.handleClick()}
onClick={() => this.handleClick()}
Directly passing the method: onClick={this.handleClick}
onClick={this.handleClick}
Using addEventListener directly on the DOM element
addEventListener