React Questions

Ritik Yadav

Score: 🔥 35

Beginner

Took 13 minutes

Programming Framework

React

100%

Questions Attempted

10 / 10

Correct Answers

Incorrect Answers

Points Earned

🔥 10

Question 1

How do uncontrolled components in React handle form data?

By using refs to directly access and manage DOM values.
By storing the data in a global state management library.
By relying on data binding between the form and component state.
By sending an HTTP request to the server on every input change.

Explanation:

Uncontrolled components in React don't rely on the component's state for form data. Instead, they use refs to directly interact with the DOM, allowing you to extract values when needed.

Question 2

What will happen if you update the state directly in a class component instead of using this.setState()?

The component will re-render automatically
The state will be updated, but the component won't re-render
An error will be thrown
The application will crash

Explanation:

Directly updating this.state will modify the state, but React won't be aware of this change. this.setState() is crucial as it notifies React about the state update, triggering the necessary re-rendering process.

Question 3

Why is it generally not recommended to mutate the DOM directly in React?

React's event system automatically prevents DOM manipulation
Direct DOM manipulation can lead to inconsistencies between the actual DOM and React's virtual DOM
React doesn't have access to the DOM, so manipulation is impossible
DOM manipulation is slow and inefficient in modern browsers

Explanation:

React uses a virtual DOM to efficiently update the UI. Directly manipulating the DOM can interfere with React's reconciliation process and create synchronization issues between the virtual and actual DOM.

Question 4

In JSX, how would you set the 'class' attribute for an element?

<div class='my-class'></div>
<div className='my-class'></div>
<div class=my-class></div>
<div class="my-class"></div>

Explanation:

Since 'class' is a reserved keyword in JavaScript, JSX uses 'className' to set the CSS class of an element.

Question 5

What is the purpose of event.preventDefault() in React event handling?

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

Explanation:

Similar to vanilla JavaScript, event.preventDefault() is used in React to prevent the browser's default behavior associated with an event, such as a link redirect or form submission.

Question 6

What are Synthetic Events in React?

Native browser events directly exposed by the DOM
React's custom event objects that wrap native events
Events triggered only by synthetic user actions (like bot interactions)
Events related to state changes within a React component

Explanation:

Synthetic events are plain JavaScript objects created by React that hold information about an event across different browsers. They provide a consistent API and prevent cross-browser inconsistencies.

Question 7

What is the primary purpose of components in React?

To manage application state
To break down the UI into independent, reusable pieces
To handle user interactions
To directly manipulate the DOM

Explanation:

Components are the building blocks of a React application. They encapsulate UI elements, making them reusable and easier to manage.

Question 8

How can you display validation errors to the user in a React form?

By conditionally rendering error messages based on validation results.
By using browser alerts to notify the user of invalid input.
By logging errors to the console for debugging purposes.
By relying solely on HTML5's built-in validation error messages.

Explanation:

A common approach is to conditionally render error messages in your component's JSX. After validating input, you can update the component's state with error information and use it to control the display of error messages.

Question 9

What is the correct syntax for defining default props in a functional component in React?

MyComponent.defaultProps = { name: 'John' };
defaultProps = { name: 'John' }(MyComponent);
function MyComponent(props) { props.defaultProps = { name: 'John' }; }
export default function MyComponent(props = { name: 'John' }) { }

Explanation:

This syntax correctly assigns an object with default prop values to the 'defaultProps' property of the 'MyComponent' function, providing fallback values for props if not provided.

Question 10

What is the purpose of the useState hook in React?

To fetch data from an API
To manage and update the state of a functional component
To style components dynamically
To handle user input events

Explanation:

The useState hook is the primary way to introduce and manage state within functional components in React. It provides a way to store and update values that can cause re-renders when changed, making the component dynamic.