React
React.js
Q1. If you want to import just the Component from the React library, what syntax do you use?
import React.Component from 'react'
import [ Component ] from 'react'
import Component from 'react'
[β ]
import { Component } from 'react'
Q2. If a function component should always render the same way given the same props, what is a simple performance optimization available for it?
[β ] Wrap it in the
React.memo
higher-order component.Implement the
useReducer
Hook.Implement the
useMemo
Hook.Implement the
shouldComponentUpdate
lifecycle method.
Q3. How do you fix the syntax error that results from running this code?
[β ] Wrap the object in parentheses.
Call the function from another file.
Add a return statement before the first curly brace.
Replace the object with an array.
Q4. If you see the following import in a file, what is being used for state management in the component?
import React, {useState} from 'react';
[β ] React Hooks
stateful components
math
class components
Q5. Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?
{{name: "Rachel", age: 31}}
[β ]
{name: "Rachel", age: 31}
{person: "Rachel", person: 31}}
{person: {name: "Rachel", age: 31}}
Q6. What is the testing library most often associated with React?
Mocha
Chai
Sinon
[β ] Jest
Q7. To get the first item from the array (βcookingβ) using array destructuring, how do you adjust this line?
const first = ["cooking", "art", "history"]
const [] = ["cooking", "art", "history"]
const [, first]["cooking", "art", "history"]
[β ]
const [first] = ["cooking", "art", "history"]
Q8. How do you handle passing through the component tree without having to pass props down manually at every level?
React Send
React Pinpoint
React Router
[β ] React Context
Q9. What should the console read when the following code is run?
Horse
[β ] Cat
Mouse
undefined
10. What is the name of the tool used to take JSX and turn it into createElement calls?
JSX Editor
ReactDOM
Browser Buddy
[β ] Babel
11. Why might you use useReducer over useState in a React component?
when you want to replace Redux
[β ] when you need to manage more complex state in an app
when you want to improve performance
when you want to break your production app
12. Which props from the props object is available to the component with the following syntax?
any that have not changed
[β ] all of them
child props
any that have changed
13. Consider the following code from React Router. What do you call :id in the path prop?
This is a route modal
[β ] This is a route parameter
This is a route splitter
This is a route link
14. If you created a component called Dish and rendered it to the DOM, what type of element would be rendered?
div
section
component
[β ]
h1
15. What does this React element look like given the following function? (Alternative: Given the following code, what does this React element look like?)
<h1 props={null}>What's happening?</h1>
[β ]
<h1>What's happening?</h1>
<h1 id="component">What's happening?</h1>
<h1 id="element">What's happening?</h1>
16. What property do you need to add to the Suspense component in order to display a spinner or loading state?
lazy
loading
[β ] fallback
spinner
17. What do you call the message wrapped in curly braces below?
a JS function
a JS element
[β ] a JS expression
a JSX wrapper
18. What can you use to handle code splitting?
React.memo
React.split
[β ]
React.lazy
React.fallback
19. When do you use useLayoutEffect
?
to optimize for all devices
to complete the update
to change the layout of the screen
[β ] when you need the browser to paint before the effect runs
20. What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)?
Button A will not have access to the event object on click of the button.
Button B will not fire the handler this.handleClick successfully.
Button A will not fire the handler this.handleClick successfully.
[β ] There is no difference.
21. How do you destructure the properties that are sent to the Dish component?
function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
[β ]
function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }
22. When might you use React.PureComponent
?
when you do not want your component to have props
when you have sibling components that need to be compared
[β ] when you want a default implementation of
shouldComponentUpdate()
when you do not want your component to have state
23. Why is it important to avoid copying the values of props into a componentβs state where possible?
because you should never mutate state
because
getDerivedStateFromProps()
is an unsafe method to use[β ] because you want to allow a component to update in response to changes in the props
because you want to allow data to flow back up to the parent
24. What is the children prop?
a property that adds child components to state
[β ] a property that lets you pass components as data to other components
a property that lets you set an array as a property
a property that lets you pass data to child elements
25. Which attribute do you use to replace innerHTML in the browser DOM?
injectHTML
[β ] dangerouslySetInnerHTML
weirdSetInnerHTML
strangeHTML
26. Which of these terms commonly describe React applications?
[β ] declarative
integrated
closed
imperative
27. When using webpack, why would you need to use a loader?
to put together physical file folders
[β ] to preprocess files
to load external data
to load the website into everyoneβs phone
28. A representation of a user interface that is kept in memory and is synced with the βrealβ DOM is called what?
[β ] virtual DOM
DOM
virtual elements
shadow DOM
29. You have written the following code but nothing is rendering. How do you fix this problem?
Add a render function.
[β ] Change the curly braces to parentheses or add a return statement before the
h1
tag.Move the
h1
to another component.Surround the
h1
in adiv
.
Q30. To create a constant in JavaScript, which keyword do you use?
[β ] const
let
constant
var
Q31. What do you call a React component that catches JavaScript errors anywhere in the child component tree?
error bosses
error catchers
error helpers
[β ] error boundaries
Q32. In which lifecycle method do you make requests for data in a class component?
constructor
[β ] componentDidMount
componentWillReceiveProps
componentWillMount
Q33. React components are composed to create a user interface. How are components composed?
by putting them in the same file
[β ] by nesting components
with webpack
with code splitting
Q34. All React components must act like _ with respect to their props.
monads
[β ] pure functions
recursive functions
higher-order functions
Q35. Why might you use a ref?
[β ] to directly access the DOM node
to refer to another JS file
to call a function
to bind the function
Q36. What is [e.target.id]
called in the following code snippet?
a computed property name
a set value
[β ] a dynamic key
a JSX code string
Q37. What is the name of this component?
[β ] Clock
It does not have a name prop.
React.Component
Component
Q38. What is sent to an Array.map()
function?
[β ] a callback function that is called once for each element in the array
the name of another array to iterate over
the number of times you want to call the function
a string describing what the function should do
Q39. Why is it a good idea to pass a function to setState
instead of an object?
It provides better encapsulation.
It makes sure that the object is not mutated.
It automatically updates a component.
[β ]
setState
is asynchronous and might result in out of sync values.
Q40. What package contains the render() function that renders a React element tree to the DOM?
React
[β ]
ReactDOM
Render
DOM
Q41. How do you set a default value for an uncontrolled form field?
Use the
value
property.[β ] Use the
defaultValue
property.Use the
default
property.It assigns one automatically.
Q42. What do you need to change about this code to get it to run?
Add quotes around the return value
Remove
this
Remove the render method
[β ] Capitalize
clock
Explanation: In JSX, lower-case tag names are considered to be HTML tags. Read this article
Q43. Which Hook could be used to update the documentβs title?
[β ]
useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
useEffect(() => { title = name + ' ' + lastname; });
useEffect(function updateTitle() { name + ' ' + lastname; });
useEffect(function updateTitle() { title = name + ' ' + lastname; });
Q44. What can you use to wrap Component imports in order to load them lazily?
React.fallback
React.split
[β ]
React.lazy
React.memo
Q45. How do you invoke setDone only when component mounts, using hooks?
useEffect(() => { setDone(true); });
[β ]
useEffect(() => { setDone(true); }, []);
useEffect(() => { setDone(true); }, [setDone]);
useEffect(() => { setDone(true); }, [done, setDone]);
Q46. Which of the following click event handlers will allow you to pass the name of the person to be hugged?
<button onClick={(name) => this.hug(name)}>Hug Button</button>
<button onClick={this.hug(e, name)}>Hug Button</button>
<button onClick={(e) => hug(e, name)}>Hug Button</button>
[β ]
<button onClick={(e) => this.hug(name,e)}>Hug Button</button>
Q47. Currently, handleClick
is being called instead of passed as a reference. How do you fix this?
<button onClick={this.handleClick.bind(handleClick)}>Click this</button>
<button onClick={handleClick()}>Click this</button>
[β ]
<button onClick={this.handleClick}>Click this</button>
<button onclick={this.handleClick}>Click this</button>
Q48. Which answer best describes a function component?
A function component is the same as a class component.
[β ] A function component accepts a single props object and returns a React element.
A function component is the only way to create a component.
A function component is required to create a React component.
Q49. Which library does the fetch()
function come from?
FetchJS
ReactDOM
[β ] No library.
fetch()
is supported by most browsers.React
Q50. What will happen when this useEffect Hook is executed, assuming name is not already equal to John?
It will cause an error immediately.
It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.
[β ] It will update the value of name once and not run again until name is changed from the outside.
It will cause an infinite loop.
Q51. Which choice will not cause a React component to rerender?
if the component calls
this.setState(...)
the value of one of the componentβs props changes
if the component calls
this.forceUpdate()
[β ] one of the componentβs siblings rerenders
Q52. You have created a new method in a class component called handleClick, but it is not working. Which code is missing?
this.handleClick.bind(this);
props.bind(handleClick);
this.handleClick.bind();
[β ]
this.handleClick = this.handleClick.bind(this);
Q53. React does not render two sibling elements unless they are wrapped in a fragment. Below is one way to render a fragment. What is the shorthand for this?
A
B
[β ] C
D
Q54. If you wanted to display the count state value in the component, what do you need to add to the curly braces in the h1
?
[β ] this.state.count
count
state
state.count
Q55. Per the following code, when is the Hello component displayed?
never
[β ] when
isLoggedIn
is truewhen a user logs in
when the Hello function is called
Q56. In the following code block, what type is orderNumber?
[β ] string
boolean
object
number
Q57. You have added a style property to the h1
but there is an unexpected token error when it runs. How do you fix this?
const element = <h1 style="backgroundColor: "blue""}>Hi</h1>;
[β ]
const element = <h1 style={{backgroundColor: "blue"}}>Hi</h1>;
const element = <h1 style={blue}>Hi</h1>;
const element = <h1 style="blue">Hi</h1>;
Q58. Which function is used to update state variables in a React class component?
replaceState
refreshState
updateState
[β ]
setState
Q59. Consider the following component. What is the default color for the star?
black
red
[β ] grey
white
Q60. Which answer best describes a function component?(Not sure answer)
A function component is the same as a class component.
[β ]
A function component accepts a single props object and returns a React element.
A function component is the only way to create a component.
A function component is required to create a React component.
Q61.Which library does the fetch() function come from?
FetchJS
ReactDOM
[β ]
No library. fetch() is supported by most browsers.
React
Q62.What is the difference between the click behaviors of these two buttons(assuming that this.handleClick is bound correctly)
Button A will not have access to the event object on click of the button
[β ]
Button A will not fire the handler this.handleClick successfully
There is no difference
Button B will not fire the handler this.handleClick successfully
Q63.What will happen when this useEffect Hook is executed, assuming name is not already equal to John?
It will cause an error immediately.
It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.
[β ]
It will update the value of name once and not run again until name is changed from the outside.
It will cause an infinite loop.
Q64. How would you add to this code, from React Router, to display a component called About?
[β ] A
B
C
D
Q65. Which class-based component is equivalent to this function component?
A
B
[β ] C
D
Q66. Give the code below, what does the second argument that is sent to the render function describe?
[β ] where the React element should be added to the DOM
where to call the function
where the root component is
where to create a new JavaScript file
Q67. Why should you use React Routerβs Link component instead of a basic <a>
tag in React?
The link component allows the user to use the browserβs
Back
button.There is no differenceβthe
Link
component is just another name for the<a>
tag.The
<a>
tag will cause an error when used in React.[β ] The
<a>
tag triggers a full page reload, while theLink
component does not.
Q68. What is the first argument, x
, that is sent to the createElement
function?
[β ] the element that should be created
the order in which this element should be placed on the page
the properties of the element
data that should be displayed in the element
Q69. Which class-based lifecycle method would be called at the same time as this effect Hook?
componentWillUnmount
[β ] componentDidMount
render
componentDidUpdate
Q70. Given the code below, what does the second argument that is sent to the render function describe?
[β ] where the React element should be added to the DOM
where to call the function
where the root component is
where to create a new JavaScript file
Q71. What is the first argument, x, that is sent to the createElement
function?
React.createElement(x,y,z);
[β ] the element that should be created
the order in which this element should be placed on the page
the properties of the element
data that should be displayed in the element.
Q72. What is the name of this component?
[β ] Comp
h1
React.Component
Component
This question might be an updated version of Q37.
Q73. When using a portal, what is the first argument?
the current state
[β ] the element to render
the App component
the page
Explanation: From official docs: Portals
Q74. What is setCount
?
the initial state value
a variable
a state object
[β ] a function to update the state
Reference: From official docs: Hooks-State
Q75. What is the use of map function below?
gives a map of all the entries in database
[β ] returns a heading tag for every entry in the database containing itβs data
returns one heading tag for all the entries in database
checks which entry in the database is suitable for heading tag
Q76. Describe what is happening in this code?
It is creating a new object that contains the same name property as the person object.
It is assigning the value of the person objectβs firstName property to a constant called name.
It is retrieving the value of person.name.firstName.
[β ] It is assigning the value of the person objectβs name property to a constant called firstName.
Q77. What is wrong with this code?
React components cannot be defined using functions.
[β ] React does not allow components to return more than one element.
The component needs to use the return keyword.
String literals must be surrounded by quotes.
Q78. When using a portal, what is the second argument?
the App component
the page
the current state
[β ] the DOM element that exists outside of the parent component
#### Q79. Given this code, what will be printed in the
Q80. What is this pattern called?
object destructuring
[β ] array destructuring
spread operating
code pushing
Last updated