How do you prevent a useEffect hook from running on every render?
useEffect
By not passing a dependency array
By wrapping the useEffect call in a conditional statement
By passing an empty array [] as the second argument to useEffect
[]
By using componentDidMount instead
componentDidMount
What is the primary difference between controlled and uncontrolled components in React forms?
Controlled components directly manipulate the DOM, while uncontrolled components use React's state management.
Controlled components are suitable for simple forms, while uncontrolled components are ideal for complex forms.
Controlled components are deprecated in React, and uncontrolled components are the recommended approach.
Controlled components rely on React's state management for form data, while uncontrolled components use DOM references.
How do class components in React typically handle events?
Using inline arrow functions directly in the JSX
Class components cannot handle events; only functional components can
By relying on external state management libraries for event handling
By defining methods on the class that act as event handlers
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 dealing with a large, complex form where performance optimization is critical.
When integrating with a third-party library that requires direct access to form elements.
When you need real-time validation and immediate feedback to the user.
Why is it generally not recommended to mutate the DOM directly in React?
React doesn't have access to the DOM, so manipulation is impossible
Direct DOM manipulation can lead to inconsistencies between the actual DOM and React's virtual DOM
React's event system automatically prevents DOM manipulation
DOM manipulation is slow and inefficient in modern browsers
How do you represent an empty tag in JSX, like an <img> tag?
<img></>
<img></img>
What is the correct way to embed a JavaScript expression inside JSX?
{{ expression }}
expression
{ expression }
( expression )
In a class component, how do you update the state?
By calling this.setState({ new state })
this.setState({ new state })
Using the useState hook
useState
Using this.state = { new state } directly
this.state = { new state }
By modifying this.props object
this.props
What is the purpose of form validation in React?
To automatically submit the form when all fields are filled.
To send data to the server for validation.
To style form elements based on user input.
To ensure data integrity and prevent invalid submissions.
What are Synthetic Events in React?
React's custom event objects that wrap native events
Native browser events directly exposed by the DOM
Events related to state changes within a React component
Events triggered only by synthetic user actions (like bot interactions)