React Questions

Saurabh Gupta

Score: 🔥 27

Beginner

Took 8 minutes

Programming Framework

React

80%

Questions Attempted

10 / 10

Correct Answers

Incorrect Answers

Points Earned

🔥 8

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's the difference between JSX attributes and HTML attributes?

There is no difference, they are the same.
JSX attributes are written in camelCase, while HTML attributes are lowercase.
JSX attributes are used for styling, while HTML attributes are for functionality.
JSX attributes can only be strings, while HTML attributes can be any data type.

Explanation:

While they serve similar purposes, JSX enforces camelCase naming convention for attributes to align with JavaScript's conventions.

Question 3

Which of the following is a common approach for implementing form validation in React?

Using HTML5 form validation attributes.
Writing custom validation functions within the component.
Utilizing a dedicated form validation library.
All of the above.

Explanation:

React provides flexibility in implementing form validation. You can leverage HTML5's built-in validation, create custom functions tailored to your application, or use dedicated libraries for more complex scenarios.

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

When a component's state or props change, React decides whether to update the actual DOM. What is this process called?

Virtual DOM diffing
State reconciliation
Component rehydration
Lifecycle management

Explanation:

React uses a Virtual DOM, a lightweight representation of the actual DOM. When state or props change, React performs a diffing algorithm on the Virtual DOM. This process identifies the minimal changes needed, optimizing updates to the real DOM for performance.

Question 6

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

class Welcome extends React.Component { ... }
function Welcome(props) { ... }
const Welcome = () => { ... };
let Welcome = (props) => { ... }

Explanation:

This is the most common and recommended syntax for defining functional components in modern React, using arrow functions.

Question 7

What is the primary characteristic of a controlled component in React?

It directly manipulates the DOM to update form values.
It maintains its own internal state for form data.
It relies on the browser to manage form data.
It uses external libraries for form handling.

Explanation:

In React, controlled components store their form data within the component's state. Changes to the form input update the state, and the state updates the input's value, making React the single source of truth.

Question 8

What is the primary role of 'Synthetic Events' in React?

To directly manipulate the DOM without using React's virtual DOM
To provide a cross-browser consistent interface for handling DOM events
To enable asynchronous event handling in React components
To prevent default browser actions for all events

Explanation:

React normalizes events across different browsers using Synthetic Events. This ensures that your event handling code behaves consistently regardless of the user's browser.

Question 9

What's a common way to bind event handlers in React class components?

Using bind in the constructor
Using arrow functions in the render method
Calling addEventListener within the componentDidMount lifecycle method
Both 'Using bind in the constructor' and 'Using arrow functions in the render method'

Explanation:

Two common approaches to bind event handlers are: 1) using this.handleClick = this.handleClick.bind(this) in the constructor or 2) using arrow functions directly in the render method, which lexically scope this.

Question 10

How do you pass data from a parent component to a child component in React?

Using state
Using refs
Using props
Using events

Explanation:

Props are a mechanism in React for passing data down the component tree, from parent to child, enabling communication and data flow between components.