Correct Answer: getDerivedStateFromProps is called before the first render while componentWillReceiveProps don't.
You must call this.setState in componentWillReceiveProps in order to update component state.

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

67. What programming concept React use for DOM manipulation and updating?

ReactDOM

Virtual DOM

Shadow DOM

Answer

Correct Answer: Virtual DOM

Note: This Question is unanswered, help us to find answer for this one

68. Can you return multiple elements from a single component?

Yes, but you can not separate them with a line break.

Yes, but you must use React Fragment.

Yes, but you must write them in an array.

Answer

Correct Answer: Yes, but you must use React Fragment.

Note: This Question is unanswered, help us to find answer for this one

69. How can you stop event propagation in React? (Check all that apply.)

With stopPropagation function.

With preventDefault function.

Returning false from the event handler.

All of the above.

Answer

Correct Answer: With stopPropagation function.
With preventDefault function.

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

70. What happens when an error is not caught by error boundary?

Error message gets rendered below component.

Whole application breaks.

React tries to restore the previous state of a component.

Whole React component tree gets unmounted.

Answer

Correct Answer: Whole React component tree gets unmounted.

Note: This Question is unanswered, help us to find answer for this one

71. What is the name of a pseudo-global variable that determines whether the environment is development or production?

NODE_ENV

isProd

__DEV__

Answer

Correct Answer: __DEV__

Note: This Question is unanswered, help us to find answer for this one

72. What is a recommended way of sharing data between multiple components? (Check all that apply.)

Using Context.

Using flux architecture.

Declaring global variables.

Passing props from a parent component.

All of the above.

Answer

Correct Answer: Using Context.
Using flux architecture.

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

73. What is a purpose of shallow rendering in React?

For production build.

For unit testing.

For server side rendering.

All of the above.

Answer

Correct Answer: For unit testing.

Note: This Question is unanswered, help us to find answer for this one

74. What is the difference between renderToString and renderToStaticMarkup ReactDOMServer's functions?

renderToString creates extra DOM attributes while renderToStaticMarkup don't.

renderToString in server-only while renderToStaticMarkup is available in a browser too.

renderToString returns DOM as string while renderToStaticMarkup returns JSX markup.

Answer

Correct Answer: renderToString creates extra DOM attributes while renderToStaticMarkup don't.

Note: This Question is unanswered, help us to find answer for this one

75. ____ is flux architecture component that receives actions and broadcast payloads to registered callbacks.

Answer

Correct Answer: Dispatcher

Note: This Question is unanswered, help us to find answer for this one

76. Which of the following are valid properties of the React Router's Route component? (Check all that apply.)

Answer

Correct Answer: component
path
render

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

77. Jest and Enzyme are suggested libraries for what purpose?

Answer

Correct Answer: Testing

Note: This Question is unanswered, help us to find answer for this one

78. How can type checking in React be done? (Check all that apply.)

Using static type checkers like Flow and TypeScript.

Using PropTypes.

Using typeof operator.

All of the above.

Answer

Correct Answer: Using static type checkers like Flow and TypeScript.
Using PropTypes.

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

79. When should you use React.PureComponent?

If your React component’s render() function renders the same result given the same props and state.

While using ES5 and writing pure function component

It's globally available constant to check if component is pure, used to find unoptimized components

It's locally available constant to check if component is pure, used to find unoptimized components

Answer

Correct Answer: If your React component’s render() function renders the same result given the same props and state.

Note: This Question is unanswered, help us to find answer for this one

80. Which function is invoked just before render() during component update?

componentDidMount()

componentInit()

shouldcomponentUpdate()

beforeRender()

Answer

Correct Answer: shouldcomponentUpdate()

Note: This Question is unanswered, help us to find answer for this one

81. Which of the following is true about keys in React?

React keys are useful when working with dynamically created components

Setting the key value will keep components uniquely identified after the change

React will use the key values to keep track of each element

All of the above

Answer

Correct Answer: All of the above

Note: This Question is unanswered, help us to find answer for this one

82. Static object allows the defining of static methods and also means that these methods do not have access to or ?

Answer

Correct Answer: Props, state

Note: This Question is unanswered, help us to find answer for this one

83. What is the difference between props and state?

State and props both are similar

None of the above

Answer

Correct Answer: State is similar to props, but it is private and fully controlled by the component.

Note: This Question is unanswered, help us to find answer for this one

84. Which of the following is true about React Library?Which of the following is true about React Library? (choose all that apply)

Answer

Correct Answer: Updates DOM-tree
Reacts on events

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

85.
Can a single component render multiple nodes?

Yes

Only if all children are wrapped with some node

No correct answer

Answer

Correct Answer: Only if all children are wrapped with some node

Note: This Question is unanswered, help us to find answer for this one

86.
How can SyntheticEvent be stopped?

You can't stop it, it will be fired for all parent components

Return false from event handler

Fire stopPropagation on event object

Fire preventDefaults on event object

Answer

Correct Answer: Fire stopPropagation on event object
Fire preventDefaults on event object

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

87.
The defaultValue and defaultChecked props are only used during initial __?

Answer

Correct Answer: render

Note: This Question is unanswered, help us to find answer for this one

88.
What will be removed by JSX from the string inside node?

Whitespace at the beginning and ending of a line

Blank lines

New lines in the middle of a string

All of the above

Answer

Correct Answer: New lines in the middle of a string

Note: This Question is unanswered, help us to find answer for this one

89.
Which value will render nothing? (Check all that apply)

Answer

Correct Answer: null
false
undefined

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

90.
Is it possible to create ReactJS components without JSX?

Yes

Yes, but it will require Babel included

Only if it's functional component

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

91.
Which of the following is a correct JSX code?

<button onclick="activate()">Activate</button>

<button onClick={activate}>Activate</button>

<button onclick={activate}>Activate</button>

Answer

Correct Answer: <button onClick={activate}>Activate</button>

Note: This Question is unanswered, help us to find answer for this one

92.
Which of the following are valid properties of the input node in ReactJS?

Answer

Correct Answer: All of the above

Note: This Question is unanswered, help us to find answer for this one

93.
What is true about forceUpdate method in component?

It will fire re-render cycle just like it happens when state updates

It will re-render component skipping shouldComponentUpdate event

The method forceUpdate doesn't exist

None of the above

Answer

Correct Answer: It will re-render component skipping shouldComponentUpdate event

Note: This Question is unanswered, help us to find answer for this one

94.
What is true about context inside a component?

Context is no longer available anywhere in ReactJs app

nextContext can be accessed at shouldComponentUpdate

Context is not available in the constructor

None of the above

Answer

Correct Answer: nextContext can be accessed at shouldComponentUpdate

Note: This Question is unanswered, help us to find answer for this one

95.
What is the correct value of the children proptype? propTypes: { children: React.PropTypes.string.isRequired }

['test', 'test2']

99.66

'test1'

Answer

Correct Answer: 'test1'

Note: This Question is unanswered, help us to find answer for this one

96.
Which of the following is the correct data flow in a flux application?

Action->Dispatcher->View->Store

Action->Dispatcher->Store->View

Dispatcher->Action->Store->View

Action->Store->Dispatcher->View

None of the above

Answer

Correct Answer: Action->Dispatcher->Store->View

Note: This Question is unanswered, help us to find answer for this one

97.
What can be stored in the Stores while building with flux architecture?

Application state and logic

List of image nodes

State of objects

All of the above

Answer

Correct Answer: Application state and logic

Note: This Question is unanswered, help us to find answer for this one

98.
Which statement is valid for ReactDOM.findDOMNode() function?

It can be used anywhere inside the component to get DOM element at any time

Can be used in class-based or functional components

Will return false if component is not mounted yet

It returns the corresponding native browser DOM element

Answer

Correct Answer: It returns the corresponding native browser DOM element

Note: This Question is unanswered, help us to find answer for this one

99.
What values can be passed as children of a ReactJs component?

Answer

Correct Answer: All of the above

Note: This Question is unanswered, help us to find answer for this one

100.
Which function is invoked just before render() during initial rendering?

componentDidMount()

componentBeforeOccur()

componentWillReceiveMount()

componentWillMount()

Answer

Correct Answer: componentWillMount()

Note: This Question is unanswered, help us to find answer for this one

101.
What would happen if the state is updated in componentWillMount?

You may compare this.props and nextProps and perform state transitions in this method without any issues

Setting state in this method will trigger a re-rendering

In this method state can't be updated, only initialized

State can't be updated in this method

Answer

Correct Answer: State can't be updated in this method

Note: This Question is unanswered, help us to find answer for this one

102.
Which of the following will not allow an event to be accessed?

Answer

Correct Answer: Asynchronous

Note: This Question is unanswered, help us to find answer for this one

103.
Which of the following properties are available for a wheel event? (Check all that apply)

Answer

Correct Answer: deltaMode
deltaX

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

104.
Which of the following are valid component life cycle events? (Check all that apply)

Answer

Correct Answer: componentWillUnmount
componentWillUpdate

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

105.
Which of the following is a valid Composition Event?

Answer

Correct Answer: onCompositionUpdate

Note: This Question is unanswered, help us to find answer for this one

106.
Which of the following functions belong to ReactDOM? (Check all that apply)

Answer

Correct Answer: render()
findDOMNode()

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

107.
What are component methods? (choose all that apply)

replaceState(newState)

componentWillMount function();

setState(changes)

componentDidMount function();

forceUpdate():

Answer

Correct Answer: replaceState(newState)
setState(changes)
forceUpdate():

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

108.
In controlled components, which is the correct way to select multiple values using the select drop-down?

<select defaultValue={["lahore", "london"]}, multiple=>(true)> <option value="lahore">welcome lahore!</option> <option value="london">welcome london!</option> <option value="toronto">welcome toronto</option> </select>

<select defaultValue={["lahore", "london"]} multiple={true}> <option value="lahore">welcome lahore!</option> <option value="london">welcome london!</option> <option value="toronto">welcome toronto</option> </select>

<select defaultValue={["lahore", "london"]} multiple=(true)> <option value="lahore">welcome lahore!</option> <option value="london">welcome london!</option> <option value="toronto">welcome toronto</option> </select>

<select defaultValue=>{["lahore", "london"]} multiple=true> <option value="lahore">welcome lahore!</option> <option value="london">welcome london!</option> <option value="toronto">welcome toronto</option> </select>

Answer

Correct Answer: <select defaultValue={["lahore", "london"]} multiple={true}> <option value="lahore">welcome lahore!</option> <option value="london">welcome london!</option> <option value="toronto">welcome toronto</option> </select>

Note: This Question is unanswered, help us to find answer for this one

109.
Which following method is used for updating the state of the component?

Answer

Correct Answer: setState()

Note: This Question is unanswered, help us to find answer for this one

110.
What are the Animation Events? (choose all that follow)

Answer

Correct Answer: onAnimationStart
onAnimationEnd
onAnimationIteration

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

111.
Which of the following code examples is correct for State object usage?

this.setState(function(previousState, currentProps) { return {counter: previousState.counter + 1}; });

this.state = {( firstName: 'Michael', lastName: 'Chan' )}

this.setState({someKey: 'add new item'});

this.setState = function(previousState, currentProps) { return {counter: previousState.counter + 1}; });

Answer

Correct Answer: this.setState(function(previousState, currentProps) { return {counter: previousState.counter + 1}; });

Note: This Question is unanswered, help us to find answer for this one

112.
What are the Component properties? (choose all that apply)

Answer

Correct Answer: this.isMounted
this.props
this.state

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

113.
The lifecycle methods can be grouped into the following categories?

Answer

Correct Answer: unmounting
updating
mounting

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

114.
What are the Composition Events? (choose all that apply)

Answer

Correct Answer: onCompositionUpdate
onCompositionStart
onCompositionEnd

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

115.
The state of the application is stored in the _____, from where the data then flows to the views?

Answer

Correct Answer: stores

Note: This Question is unanswered, help us to find answer for this one

116.
How can you set the state of a component, retrieve that state, create properties when initializing the component? I'm learning ReactJs! {this.props.name}

var stateComp = React.createClass({ propTypes : { name : React.PropTypes.string }, getDefaultProps : function(){ return { name : "Mike" } }, getInitialState : function(){ return { value : 1 } } render : function(){ return (

var stateComp = React.createClass({ propTypes : function { name : React.PropTypes.string }, getDefaultProps : function(){ return { name : "Mike" } }, getInitialState : function(){ return value : 1 } }, render : function(){ return (

Answer

Correct Answer: var stateComp = React.createClass({ propTypes : { name : React.PropTypes.string }, getDefaultProps : function(){ return { name : "Mike" } }, getInitialState : function(){ return { value : 1 } }, render : function(){ return (

{this.state.value}

) } });

Note: This Question is unanswered, help us to find answer for this one

117.
In Redux a store has the following responsibilities? (choose all that apply)

Makes possible to unregister listeners by calling the function returned

Registers new listeners with subscribe(listener)

Allow access to the action by exposing a setState() function

Makes state mutations possible with state props

Holding application state

Answer

Correct Answer: Makes possible to unregister listeners by calling the function returned
Registers new listeners with subscribe(listener)
Holding application state

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

118.
Lifecycle methods will receive context and SETSTATE() TRIGGERS AN UPDATE as follows? (choose all that apply)

shouldComponentUpdate

componentWillMount

componentWillReceiveProps

componentWillUnmount

Answer

Correct Answer: shouldComponentUpdate
componentWillReceiveProps

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

119.
Referencing context in lifecycle methods, the following lifecycle methods will receive an additional parameter in the context object? (check all that apply)

componentDidUpdate(nextProps, nextState, nextContext)

componentWillReceiveProps(nextProps, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

shouldComponentUpdate(prevProps, prevState, prevContext)

Answer

Correct Answer: componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(prevProps, prevState, prevContext)

Note: This question has more than 1 correct answers

Note: This Question is unanswered, help us to find answer for this one

Basic React.js MCQ

1. What pattern is being used in this code? const { tree, lake } = nature;

2. Why might you use a React.ref?

3. Which language can you not use with React?

4. When using the React Developer Tools Chrome extension, what does it mean if the React icon is red?

5. What might you use webpack for?

6. When does the componentDidMount function fire?

7. You want to disable a button so that it does not emit any events onClick. Which prop do you use to acomplish this?

8. What syntax do you use to create a component in React?

9. How might you check property types without using Flow or TypeScript?

10. What is the JavaScript syntax extension that is commonly used to create React elements?

11. Which tool is not part of Create React App?

12. What is the browser extension called that React developers use to debug applications?

13. What command can you use to generate a React project?

14. React is an open-source project but is maintained by which company?

15. What is the process of deciding whether an update is necessary?

16. How would you generate the boilerplate code for a new app that you are building to collect underpants?

17. You are rendering a list with React when this warning appears in the console: "Warning: Each child in a list should have a unique 'key' prop." How do you fix this issue?

18. What is the first file loaded by the browser in a basic React project?

19. What is this pattern called? const [count, setCount] = useState(0);

20. When using a portal, what is the second argument?ReactDOM.createPortal(x, y);

21. Describe what is happening in this code? const { name: firstName } = person;

22. What is setCount? const [count, setCount] = useState(0);

23. When using a portal, what is the first argument? ReactDOM.createPortal(x, y);

24. What is the first argument, x, that is sent to the createElement function?React.createElement(x, y, z);

25. Why should you use React Router's Link component instead of a basic tag in React?

26. Consider the following component. What is the default color for the star? const Star = ({ selected = false }) => ;

27. Which function is used to update state variables in a React class component?

28. Per the following code, when is the Hello component displayed? const greeting = isLoggedIn ? : null;

29. Which choice will not cause a React component to rerender?

30. Which library does the fetch() function come from?

31. Which answer best describes a function component?

32. Currently, handleClick is being called instead of passed as a reference. How do you fix this? Click this

33. What can you use to wrap Component imports in order to load them lazily?

34. Q42. Which Hook could be used to update the document's title?

35. How do you set a default value for an uncontrolled form field?

36. What package contains the render() function that renders a React element tree to the DOM?

37. Why is it a good idea to pass a function to setState instead of an object?

38. What is sent to an Array.map() function?

39. All React components must act like _ with respect to their props.

40. React components are composed to create a user interface. How are components composed?

41. In which lifecycle method do you make requests for data in a class component?

42. What do you call a React component that catches JavaScript errors anywhere in the child component tree?

43. To create a constant in JavaScript, which keyword do you use?

44. A representation of a user interface that is kept in memory and is synced with the "real" DOM is called what?

45. When using webpack, why would you need to use a loader?

46. Which of these terms commonly describe React applications?

47. Which attribute do you use to replace innerHTML in the browser DOM?

48. What is the children prop?

49. Why is it important to avoid copying the values of props into a component's state where possible?

50. When might you use React.PureComponent?

51. When do you use useLayoutEffect?

52. What can you use to handle code splitting?

53. Consider the following code from React Router. What do you call :id in the path prop?

54. Which props from the props object is available to the component with the following syntax?

55. Why might you use useReducer over useState in a React component?

56. What is the name of the tool used to take JSX and turn it into createElement calls?

57. How do you handle passing through the component tree without having to pass props down manually at every level?

58. What is the testing library most often associated with React?

59. If a function component should always render the same way given the same props, what is a simple performance optimization available for it?

60. If you want to import just the Component from the React library, what syntax do you use?

61. Can you render children components outside of a parent component?

62. How can you bind a function to a component instance? (Check all that apply.)

63. How you can provide an initial value for uncontrolled input?

64. _____ function is used for attaching event listeners on markup rendered by ReactDOMServer.

65. Can you access refs at a wrapped component in higher-order component technique?

66. Which of following is true about componentWillReceiveProps and getDerivedStateFromProps? (Check all that apply.)

67. What programming concept React use for DOM manipulation and updating?

68. Can you return multiple elements from a single component?

69. How can you stop event propagation in React? (Check all that apply.)

70. What happens when an error is not caught by error boundary?

71. What is the name of a pseudo-global variable that determines whether the environment is development or production?

72. What is a recommended way of sharing data between multiple components? (Check all that apply.)

73. What is a purpose of shallow rendering in React?

74. What is the difference between renderToString and renderToStaticMarkup ReactDOMServer's functions?

75. ____ is flux architecture component that receives actions and broadcast payloads to registered callbacks.

76. Which of the following are valid properties of the React Router's Route component? (Check all that apply.)

77. Jest and Enzyme are suggested libraries for what purpose?

78. How can type checking in React be done? (Check all that apply.)

79. When should you use React.PureComponent?

32. Currently, handleClick is being called instead of passed as a reference. How do you fix this?

85.
Can a single component render multiple nodes?

86.
How can SyntheticEvent be stopped?

87.
The defaultValue and defaultChecked props are only used during initial __?

88.
What will be removed by JSX from the string inside node?

89.
Which value will render nothing? (Check all that apply)

90.
Is it possible to create ReactJS components without JSX?

91.
Which of the following is a correct JSX code?

92.
Which of the following are valid properties of the input node in ReactJS?

93.
What is true about forceUpdate method in component?

94.
What is true about context inside a component?

95.
What is the correct value of the children proptype? propTypes: { children: React.PropTypes.string.isRequired }

96.
Which of the following is the correct data flow in a flux application?

97.
What can be stored in the Stores while building with flux architecture?

98.
Which statement is valid for ReactDOM.findDOMNode() function?

99.
What values can be passed as children of a ReactJs component?

100.
Which function is invoked just before render() during initial rendering?

101.
What would happen if the state is updated in componentWillMount?

102.
Which of the following will not allow an event to be accessed?

103.
Which of the following properties are available for a wheel event? (Check all that apply)

104.
Which of the following are valid component life cycle events? (Check all that apply)

105.
Which of the following is a valid Composition Event?

106.
Which of the following functions belong to ReactDOM? (Check all that apply)

107.
What are component methods? (choose all that apply)

108.
In controlled components, which is the correct way to select multiple values using the select drop-down?

109.
Which following method is used for updating the state of the component?

110.
What are the Animation Events? (choose all that follow)

111.
Which of the following code examples is correct for State object usage?

112.
What are the Component properties? (choose all that apply)

113.
The lifecycle methods can be grouped into the following categories?

114.
What are the Composition Events? (choose all that apply)

115.
The state of the application is stored in the _____, from where the data then flows to the views?

116.
How can you set the state of a component, retrieve that state, create properties when initializing the component? I'm learning ReactJs! {this.props.name}

117.
In Redux a store has the following responsibilities? (choose all that apply)

118.
Lifecycle methods will receive context and SETSTATE() TRIGGERS AN UPDATE as follows? (choose all that apply)

119.
Referencing context in lifecycle methods, the following lifecycle methods will receive an additional parameter in the context object? (check all that apply)

120.
Which of the following code syntax is True in createClass?

121.
Which of the following are basic principles of Redux? (choose all that apply)

122.
Which of the following types can be the ReactNode?

123.
Which validator is used to check if property value is a number?

124.
What is incorrect with the following component? class MyComponent extends React.Component { render() { return ( This is a component ); } }

125.
How many nodes should render() method return?

126.
Which of the following correctly explains the term "mounting"?

127.
Do you need to add key property on ReactJs elements?

128.
How to set ReactJS global configuration?

129.
Which of the following is correct transformation of the following JSX syntax code?

130.
Which of the following is true about componentDidMount method?

131.
ReactJS is developed by _____?

132.
How write comments in JSX code?

133.
Which of the following is/are not a valid component event?

134.
Which is correct function to render ReactJs component at server side as static html page?

135.
What visual design guidelines must be used to build web UIs with ReactJs?

136.
Which of the following are mounting methods?

137.
What does acronym JSX mean?

138.
Can you use ReactJs with AngularJs on same web application?

139.
Will and if yes, when and how immutable data will make big ReactJs application faster?

140.
What is default css display value for ReactJs web application?

141.
Which statement about ReactJs is incorrect?

142.
How set custom html inside ReactJs component?

143.
Can you use ReactJs with NodeJS?

144.
Which of the following is the primary mental data flow in Flux?

145.
PropTypes is used for ___ ?

146.
Can you use ReactJs without flux?

147.
Which of the following methods can be used to define any default props which can be accessed via this.props?

148.
Which of the following is true about Flux Dispatcher?

149.
Which JSX syntax is incorrect?