Which of the following is a key difference between functional components and class components in React?
Functional components are stateless, while class components can have state
Functional components are used for complex UI logic, while class components are for simple elements
Functional components are written in JavaScript, while class components use TypeScript
Functional components cannot receive props, while class components can
What is the purpose of event.preventDefault() in React event handling?
event.preventDefault()
To cancel the event entirely and prevent any further actions
To stop the event from bubbling up the component tree
To detach the event handler after it has been executed once
To prevent the default behavior of the event (like form submission)
Which of the following is a common approach for implementing form validation in React?
All of the above.
Utilizing a dedicated form validation library.
Writing custom validation functions within the component.
Using HTML5 form validation attributes.
What is the purpose of using key prop in JSX elements within a list?
key
To help React efficiently update and re-render lists.
To associate event handlers with specific elements.
To give each element a unique identifier for styling purposes.
To define the order in which elements should be displayed.
What will happen if you update the state directly in a React component?
Nothing will happen; the state will remain unchanged.
The component will re-render, and the state change will be reflected correctly.
The component will re-render, but the state change won't be reflected.
An error will be thrown, and the application will crash.
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 deprecated in React, and uncontrolled components are the recommended approach.
Controlled components are suitable for simple forms, while uncontrolled components are ideal for complex forms.
Controlled components rely on React's state management for form data, while uncontrolled components use DOM references.
In React functional components, how do you typically handle events?
By defining methods inside the component class
Using inline event handlers directly in JSX
By creating separate event listener functions outside the component
Events are not handled in functional components, only in class components
Why is it generally not recommended to mutate the DOM directly in React?
Direct DOM manipulation can lead to inconsistencies between the actual DOM and React's virtual DOM
React's event system automatically prevents DOM manipulation
React doesn't have access to the DOM, so manipulation is impossible
DOM manipulation is slow and inefficient in modern browsers
What is the purpose of the componentWillUnmount() lifecycle method?
componentWillUnmount()
To update the state based on changes in props.
To perform any necessary cleanup operations before a component is removed from the DOM.
To handle user interactions like button clicks.
To render the component for the first time.
Which of the following JSX expressions is INVALID?
<span>This is incorrect {</span>