Q31
Q31 Consider this code:
componentDidMount() { this.setState({data: 'new data'}); }.
When is the new data available for render?
Immediately after componentDidMount is called
After the component re-renders
It's available in componentDidMount
None of the above
Q32
Q32 What is a potential issue with this setState usage?
this.setState({value: this.state.value + 1});
It directly mutates the state
It may lead to outdated values due to the asynchronous nature of setState
It's the correct way to update state
None of the above
Q33
Q33 Identify the issue in this code:
class MyComponent extends React.Component {
render() {
return
State is not initialized in the constructor
The render method is missing a return statement
The JSX syntax is incorrect
No issue
Q34
Q34 What is wrong with this lifecycle method usage?
componentDidMount() { this.setState({value: this.props.initialValue}); }
Props should not be used to set state
componentDidMount should not call setState
No issue
The method is deprecated
Q35
Q35 In React, how do you attach an event handler to an element?
Using the onEvent attribute
Using the addEventListener method
Using the handleEvent method
None of the above
Q36
Q36 What is the correct way to bind a method to a component instance in a React class component?
this.method = this.method.bind(this) in the constructor
this.method.bind(this) in the render method
Using an arrow function in the method definition
All of the above
Q37
Q37 Why is it generally a good idea to bind event handler methods in a class component's constructor?
To improve performance
To allow access to the 'this' keyword
To prevent memory leaks
To ensure the method is only called once
Q38
Q38 Which of the following is true about event handling in React?
React events are named using camelCase
React event handlers can return false to prevent default behavior
React wraps the native event into a SyntheticEvent
All of the above
Q39
Q39 What is a SyntheticEvent in React?
A custom event system for handling native events
A simulation of an event for testing
A deprecated feature for handling events
None of the above
Q40
Q40 What does the following code do?
Renders a button that logs 'Click me' when clicked
Renders a clickable button that runs the handleClick method when clicked
Does nothing
Throws an error
Q41
Q41 How do you pass an argument to an event handler in React?
By using an arrow function in the onClick attribute
By using the bind method
Both a and b
None of the above
Q42
Q42 What issue might arise from this code snippet?
The handleClick method will be called when the component renders, not when the button is clicked
The button will not render
The button will render but will not be clickable
None of the above
Q43
Q43 Identify the error in this code:
The event handler is not bound in the constructor
The event handler attribute should be 'onClick', not 'onclick'
The handleClick method does not exist
No error
Q44
Q44 What is wrong with this event handler definition?
handleClick() { console.log(this.state.value); }
'this' is not bound to the component
The method doesn't return anything
The method should be static
No issue
Q45
Q45 In React, what is conditional rendering?
Rendering components based on certain conditions
Rendering components only once
Rendering components without using JSX
None of the above
Q46
Q46 Which operator is commonly used for inline conditional rendering in React?
&& (Logical AND)
|| (Logical OR)
? : (Ternary Operator)
== (Equality)
Q47
Q47 What is the purpose of using the ternary operator in React?
To perform type checking
To create high-order components
To render one of two components based on a condition
To manipulate state
Q48
Q48 How can you prevent a component from rendering in React?
Return null in the render method
Remove the component from the DOM
Set the component's display style to none
Uninstall the component
Q49
Q49 What will the following code render?
{isLoggedIn &&
Nothing
An error
Q50
Q50 How does the following code render different components?
{isLoggedIn ?
Renders
Always renders
Always renders
None of the above
Q51
Q51 Identify the issue in this conditional rendering code:
{isLoggedIn ?
Missing the false condition
isLoggedIn is not defined
No issue
Q52
Q52 What's wrong with this code snippet for conditional rendering?
{isLoggedIn &&
It will always render
It combines two different conditional rendering patterns incorrectly
There is no issue; it's a correct implementation
Q53
Q53 What is the purpose of keys in React lists?
To enhance performance
To uniquely identify list items
To style list items
To handle events on list items
Q54
Q54 What type of value should be used for keys in React?
Any unique number
Any string
Any unique identifier
Any type of value can be used as a key
Q55
Q55 In React, when is it necessary to use keys?
When rendering a list of items
When rendering a single item
When rendering nested components
All of the time
Q56
Q56 What can happen if you don't provide unique keys for items in a list in React?
The list will not render
React will throw an error
Performance issues and bugs in the UI update logic
The keys will be automatically generated
Q57
Q57 How would you render a list of numbers in React?
Q58
Q58 What is the correct way to assign a key inside a map() function in React?
Use the index of the array
Use a unique property of each item
Any random number
Keys are not necessary in map()
Q59
Q59 Identify the error in this code for rendering a list:
Missing key attribute on
Incorrect use of map()
todo.text is undefined
No error
Q60
Q60 What's wrong with using indexes as keys in React for the following code?
It can cause rendering issues if the list changes
It's not allowed in React
It will make the list render slower
There's no issue with this approach
