Linkedin ReactJS Test Questions Answers Updated 2022

April 25, 2022

0

Linkedin ReactJS Test Questions Answers Updated 2022

1. What property do you need to add to the Suspense component in order to display a spinner or loading state?

function MyComponent() {

return (

<div>

</div>

</Suspense>

);

}

fallback
lazy
loading
spinner

2. What do you call the message wrapped in curly braces below?

const message = 'Hi there';

const element = <p>{message}</p>;

a JS function
a JS expression
a JS element
a JSX wrapper

3. What can you use to handle code splitting?

React.memo
React.split
React.fallback
React.lazy

4. When do you use useLayoutEffect?

to optimize for all devices
when you need the browser to paint before the effect runs
to complete the update
to change the layout of the screen

5. What is the children prop?

a property that lets you set an array as a property
a property that lets you pass components as data to other components
a property that lets you pass data to child elements
a property that adds child components to state

6. How do you destructure the properties that are sent to the Dish component?

function Dish(props) {

return (

<h1>

{props.name} {props.cookingTime}

</h1>

);

}

function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }

7. 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

8. 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

9. What is the children prop?

a property that adds child components to state
a property that lets you set an array as a property
a property that lets you pass components as data to other components
a property that lets you pass data to child elements

10. . In relation to React js component lifecycle, which statement is true

Only function component can have life cycle
Only class components can have life cycle
Both type of components can have life cycle
None of above

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

let
const
constant
var

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

error bosses
error boundaries
error catchers
error helpers

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

constructor
componentWillReceiveProps
componentDidMount
componentWillMount

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

by putting them in the same file
with webpack
with code splitting
by nesting components

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

the number of times you want to call the function
a callback function that is called once for each element in the array
the name of another array to iterate over
a string describing what the function should do

16. 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.

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

React
ReactDOM
Render
DOM

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

Use the value property.
Use the default property.
Use the defaultValue property.
It assigns one automatically.

19. What do you need to change about this code to get it to run?

class clock extends React.Component {

render() {

return <h1>Look at the time: {this.props.time}</h1>;

}

Add quotes around the return value
Remove this
Capitalize clock
Remove the render method

20. 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; });

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

React.fallback
React.split
React.memo
React.lazy

22.. How do you invoke setDone only when component mounts, using hooks?

function MyComponent(props) {

const [done, setDone] = useState(false);

return <h1>Done: {done}</h1>;

}

useEffect(() => { setDone(true); });
useEffect(() => { setDone(true); }, [setDone]);
useEffect(() => { setDone(true); }, []);
useEffect(() => { setDone(true); }, [done, setDone]);

23. Which of the following click event handlers will allow you to pass the name of the person to be hugged?

class Huggable extends React.Component {

hug(id) {

console.log("hugging " + id);

}

render() {

let name = "kitteh";

let button = // Missing Code

return button;

}

<button onClick={(e) => this.hug(name,e)}>Hug Button</button>
<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>

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

<button onClick={this.handleClick()}>Click this</button>

<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>

25. In which directory react components are saved?

inside js/components/
inside node_modules/components/
inside app/components/
None the above

26. 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'

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

Implement the useReducer Hook.
Wrap it in the React.memo higher-order component.
Implement the useMemo Hook.
Implement the shouldComponentUpdate lifecycle method.

28. How do you fix the syntax error that results from running this code?

const person =(firstName, lastName) =>

{

first: firstName,

last: lastName

}

console.log(person("Jill", "Wilson"))

Add a return statement before the first curly brace.
Replace the object with an array.
Wrap the object in parentheses.
Call the function from another file.

29. If you see the following import in a file, what is being used for state management in the component?

import React, {useState} from 'react';

stateful components
math
React Hooks
class components

30. Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?

const name = 'Rachel';

const age = 31;

const person = { name, age };

console.log(person);

{{name: "Rachel", age: 31}}
{name: "Rachel", age: 31}
{person: "Rachel", person: 31}}
{person: {name: "Rachel", age: 31}}

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

Mocha
Chai
Sinon
Jest

32. To get the first item from the array ("cooking") using array destructuring, how do you adjust this line?

const topics = ['cooking', 'art', 'history'];

const first = ["cooking", "art", "history"]
const [] = ["cooking", "art", "history"]
const [, first]["cooking", "art", "history"]
const [first] = ["cooking", "art", "history"]

33. 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

34. What should the console read when the following code is run?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];

console.log(animal);

Horse
Cat
Mouse
undefined

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

React Router
React Context
React Send
React Pinpoint

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

injectHTML
weirdSetInnerHTML
dangerouslySetInnerHTML
strangeHTML

37. Which of these terms commonly describe React applications?

declarative
integrated
closed
imperative

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

to put together physical file folders
to load external data
to load the website into everyone's phone
to preprocess files

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

DOM
virtual elements
virtual DOM
shadow DOM

40. You have written the following code but nothing is rendering. How do you fix this problem?

const Heading = () => {

<h1>Hello!</h1>;

};

Add a render function.
Move the h1 to another component.
Surround the h1 in a div.
Change the curly braces to parentheses or add a return statement before the h1 tag.

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

monads
pure functions
recursive functions
higher-order functions

42. 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

43. What is [e.target.id] called in the following code snippet?

handleChange(e) {

this.setState({ [e.target.id]: e.target.value })

}

a computed property name
a dynamic key
a set value
a JSX code string

44. What is the name of this component?

class Clock extends React.Component {

render() {

return <h1>Look at the time: {time}</h1>;

}

Clock
It does not have a name prop.
React.Component
Component

45. How can you access the state of a component from inside of a member function?

this.state
this.values
this.getState()
this.prototype.stateValue

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

React
FetchJS
ReactDOM
No library. fetch() is supported by most browsers.

47.What is the difference between the click behaviors of these two buttons(assuming that this.handleClick is bound correctly)

A. <button onClick=this.handleClick>Click Me</button>

B. <button onClick={event => this.handleClick(event)}>Click Me</button>

Button A will not have access to the event object on click of the button
There is no difference
Button A will not fire the handler this.handleClick successfully
Button B will not fire the handler this.handleClick successfully

48.What will happen when this useEffect Hook is executed, assuming name is not already equal to John?

useEffect(() => {

setName('John');

}, [name]);

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 cause an infinite loop.
It will update the value of name once and not run again until name is changed from the outside.

49. How would you add to this code, from React Router, to display a component called About?

<Route path="/tid" about={Component} />

<Route path="/:id" route={About} />

<Route path="/:id">
{' '}
<About />
</Route>

<Route>
<About path="/:id" />
</Route>

50. Which class-based component is equivalent to this function component?

const Greeting ({ name }) > <h1>Hello {name}!</h1>;

class Greeting extends React.Component {
constructor() {
return <h1>Hello {this.props.name}!</h1>;
}
}

class Greeting extends React.Component {
<h1>Hello {this.props.name}!</h1>;
}

class Greeting extends React.Component {
render({ name }) {
return <h1>Hello {name}!</h1>;
}
}

class Greeting extends React.Component {
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}

51. Give the code below, what does the second argument that is sent to the render function describe?

ReactDOM.render(

<h1>Hi<h1>,

document.getElementById('root')

)

where the root component is
where to create a new JavaScript file
where the React element should be added to the DOM
where to call the function

52. 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 the Link component does not.

53. 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

54. Which class-based lifecycle method would be called at the same time as this effect Hook?

useEffect(() => {

// do things

}, []);

componentWillUnmount
componentDidMount
render
componentDidUpdate

55. Given the code below, what does the second argument that is sent to the render function describe?

ReactDOM.render(<h1>Hi</h1>, document.getElementById('root'));

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

56. What is the first argument, x, that is sent to the createElement function?

React.createElement(x,y,z);

the order in which this element should be placed on the page
the element that should be created
the properties of the element
data that should be displayed in the element.

57. What is the name of this component?

class Comp extends React.Component {

render() {

return <h1>Look at the time: {time}</h1>;

}

Comp
h1
React.Component
Component

58. When using a portal, what is the first argument?

ReactDOM.createPortal(x, y);

the current state
the element to render
the App component
the page

59. What is setCount?

const [count, setCount] = useState(0);

the initial state value
a variable
a state object
a function to update the state

60. Which of the following method refers to the parent class in React.js?

self()
super()
this()
None of the above

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

HTML
JavaScriptX
JSX
React JavaScript

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

Check Manually.
Use prop-helper.
user checker-types.
use prop-types.

63. How do you add an id of heading to the following h1 element?

let dish = <h1>Mac and Cheese</h1>;

let dish = <h1 id={heading}>Mac and Cheese</h1>;
let dish = <h1 id:"heading">Mac and Cheese</h1>;
let dish = <h1 id="heading">Mac and Cheese</h1>;
let dish = <h1 class="heading">Mac and Cheese</h1>;

64. What value of button will allow you to pass the name of the person to be hugged?

class Huggable extends React.Component {

hug(id) {

console.log("hugging " + id);

}

render() {

let name = "kitten";

let button = // Missing code

return button;

}

<button onClick={(name) => this.hug(name)}>Hug Button</button>;
<button onClick={(e) => this.hug(name, e)}>Hug Button</button>;
<button onClick={this.hug(e, name)}>Hug Button</button>;
<button onClick={(e) => hug(name, e)}>Hug Button</button>;

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

a generator
a function or a class
a service worker
a tag

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

onBlur
disabled
onPress
defaultValue

67. In this function, which is the best way to describe the Dish component?

function Dish() {

return (

<>

</>

);

}

nested component
sibling component
child component
parent component

68. When does the componentDidMount function fire?

right after the component is added to the DOM
before the component is added to the DOM
right after the component is updated
right after an API call

69. What might you use webpack for?

to fetch remote dependencies used by your app
to split your app into smaller chunks that can be more easily loaded by the browser
to format your code so that it is more readable
to ensure your app is not vulnerable to code injection

70. What can you use to handle code splitting?

React.split
React.lazy
React.memo
React.fallback

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

You are using the development build of React.
You are using the production build of React.
You are using webpack.
You are using Create React App.

72. How would you modify the constructor to fix this erroe: "ReferenceError: Must call super constructor in derived class before accessing 'this'..."?

class TransIsBeautiful extends React.Component {

constructor(props){

// Missing line

console.log(this) ;

}

...

}

render(props);
super(this);
super(props);
this.super();

73. Which language can you not use with React?

Swift.
JSX.
Javascipt.
TypeScript.

74. This code is part of an app that collects Pokemon. How would you print the list of the ones collected so far?

constructor(props) {

super(props);

this.state = {

pokeDex: []

};

}

console.log(this.state.pokeDex);
console.log(props.pokeDex);
console.log(this.props.pokeDex);
console.log(pokeDex);

75. What would be the result of running this code?

function add(x = 1, y = 2) {

return x + y;

}

add();

null
0
3
undefined

76. Which of the following method is not a part of ReactDOM?

ReactDOM.delete()
ReactDOM.destroy()
ReactDOM.unset()
None of the above

77. Why might you use a React.ref?

to refer to another JS file
to bind the function
to call a function
to directly access the DOM node

78. Which of the following API is a MUST for every ReactJS component?

getInitialState
renderComponent
render
None

79. Add the code that will fire the photon torpedoes when the button is clicked.

class StarTrekkin extends React.Component {

firePhotonTorpedoes(e) {

console.log('pew pew');

}

render() {

return; // Missing code

}

<button onClick={firePhotonTorpedoes()}>Pew Pew</button>
<button onClick={this.firePhotonTorpedoes}>Pew Pew</button>
<button onClick={firePhotonTorpedoes}>Pew Pew</button>
<button onClick={this.firePhotonTorpedoes()}>Pew Pew</button>

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

shadow DOM
fiber
reconciliation
setting state

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

Intuit
Twitter
Snapchat
Facebook

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

react-starter
create-react-app
react-gen
react-start

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

React Codewatch
React Debug
React Developer Tools
React Tooling Add-on

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

React
jQuery
webpack
ReactDOM

85. What function allows you to render React content in an HTML page?

React.mount()
ReactDOM.start()
ReactDOM.render()
React.render()

86. What is the use of map function below?

const database = [user1:{},user2:{},user3:{}];

database.map((user)=><h1>user.data</h1>);

gives a map of all the entries in database
returns one heading tag for all the entries in database
checks which entry in the database is suitable for heading tag
returns a heading tag for every entry in the database containing it's data

87. Describe what is happening in this code?

const { name: firstName } = person;

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 name property to a constant called firstName.
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.

88. What is wrong with this code?

const MyComponent = ({ names }) => (

<h1>Hello</h1>

<p>Hello again</p>

);

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.

89. When using a portal, what is the second argument?

ReactDOM.createPortal(x, y);

the App component

the page

the current state

the DOM element that exists outside of the parent component

90. Given this code, what will be printed in the <h1> tag?

const MyComponent = ({ children }) => (

<h1>{children.length}</h1>

);

...

<p>Hello</p>

<p>Goodbye</p>

</MyComponent>

It will produce an error saying "cannot read property "length" of undefined."
1
2
undefined

91. Which of the following is the correct data flow sequence of flux concept?

Action->Dispatcher->View->Store
Action->Store->Dispatcher->View
Action->Dispatcher->Store->View
None of the above

92. What is this pattern called?

const [count, setCount] = useState(0);

object destructuring
array destructuring
spread operating
code pushing

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

src/App.js
public/index.html
src/index.js
public/manifest.json

94. The code below is rendering nothing, and there is an error that says "ReactDOM is not defined." How do you fix this issue?

import React from 'react';

import { render } from 'react-dom';

const element = <h1>Hi</h1>;

ReactDOM.render(element, document.getElementById('root'));

renderDOM(element, document.getElementById("root"));
DOM(element, document.getElementById("root"));
render(element, document.getElementById("root"));
ReactDOM(element, document.getElementById("root"));

95. In this component, how do you display whether the user was logged in or not?

render() {

const isLoggedIn = this.state.isLoggedIn;

return (

<div>

The user is:

</div>

);

}

The user is loggedIn ? logged in : not logged in.
Write a function to check the login status.
The user is {isLoggedIn = "no"}.
The user is {isLoggedIn ? "logged in." : "not logged in"}.

Q83. 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?

Pass the name of each item as its key.
Add a key prop with the same value to each item the list.
Clear the console warnings.
When iterating over the list items, add a unique property to each list item.

96. Which of the following command is used to install create-react-app?

install -g create-react-app
npm install -g create-react-app
npm install create-react-app
npm install -f create-react-app

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

npm create-react-app collect-underpants
npx start-app collect-underpants
react new collect-underpants
npx create-react-app collect-underpants

98. Which is not true about Virtual DOM in React JS?

Can not directly update HTML.
It updates faster.
DOM manipulation is very easy.
Too Much memory wastage

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

JSX Editor
Babel
ReactDOM
Browser Buddy

100. 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

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

any that have not changed
child props
any that have changed
all of them

102. 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

103. If you created a component called Dish and rendered it to the DOM, what type of element would be rendered?

function Dish() {

return <h1>Mac and Cheese</h1>;

}

ReactDOM.render(<Dish />, document.getElementById('root'));

h1
div
section
component

104. How do you access a function getData() from a h1 element in JSX?

{getData()}
{getData}
${getData()}
${getData}

105. What happens when the following render() method executes?

render(){

let langs = ["PHP","ES6","JAVA"]

return (<div>

{langs.map(it => <p>{it}</p>)}

</div>)

}

Error. Cannot use direct JavaScript code in JSX
Displays the list of languages in the array
Error. Should be replaced with a for..loop for correct output
Displays nothing

106. What does this React element look like given the following function? (Alternative: Given the following code, what does this React element look like?)

React.createElement('h1', null, "What's happening?");

<h1 id="component">What's happening?</h1>
<h1 id="element">What's happening?</h1>
<h1 props={null}>What's happening?</h1>
<h1>What's happening?</h1>

107. Which answer best describes a function component?

A function component is the same as a class component.
A function component is the only way to create a component.
A function component is required to create a React component.
A function component accepts a single props object and returns a React element.

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

FetchJS
ReactDOM
React
No library. fetch() is supported by most browsers.

109. What will happen when this useEffect Hook is executed, assuming name is not already equal to John?

useEffect(() => {

setName('John');

}, [name]);

It will cause an error immediately.
It will cause an infinite loop.
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.

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