React - ENG - Linkedin

Question 1

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’

Answer 1

import { Component } from ‘react’

Question 2

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.

Answer 2

Wrap it in the React.memo higher-order component.

Question 3

Q3. 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"))

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.

Answer 3

Wrap the object in parentheses.

Question 4

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

Answer 4

React Hooks

Question 5

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

Answer 5

{name: “Rachel”, age: 31}

Question 6

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

Mocha
Chai
Sinon
Jest

Answer 6

Jest

Question 7

Q7. 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"]

Answer 7

const [first] = [“cooking”, “art”, “history”]

Question 8

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

Answer 8

React Context

Question 9

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

const [, , animal] = [‘Horse’, ‘Mouse’, ‘Cat’];
console.log(animal);

Horse
Cat
Mouse
undefined

Answer 9

Cat

Question 10

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

JSX Editor
ReactDOM
Browser Buddy
Babel

Answer 10

Babel

Question 11

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

Answer 11

when you need to manage more complex state in an app

Question 12

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

Message {…props}

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

Answer 12

all of them

Question 13

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

тег Route path=”/:id” тег

This is a route modal
This is a route parameter
This is a route splitter
This is a route link

Answer 13

This is a route parameter

Question 14

Q14. 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'));

div
section
component
h1

Answer 14

h1

Question 15

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

Answer 15

h1 What’s happening? h1

Question 16

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

function MyComponent() {
  return (
    Suspense
      div
        Message 
      div
    Suspense
  );
}

lazy
loading
fallback
spinner

Answer 16

fallback

const ProfilePage = React.lazy(() => import(‘./ProfilePage’)); // Ленивая загрузка

// Показать спиннер, во время загрузки профиля
Suspense fallback={Spinner}
ProfilePage
Suspense

https://ru.reactjs.org/docs/concurrent-mode-suspense.html

Question 17

Q17. 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 element
a JS expression
a JSX wrapper

Answer 17

a JS expression

Question 18

Q18. What can you use to handle code splitting?

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

Answer 18

React.lazy

Question 19

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

Answer 19

when you need the browser to paint before the effect runs

Question 20

Q20. 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.
Button B will not fire the handler this.handleClick successfully.
Button A will not fire the handler this.handleClick successfully.
There is no difference.

Answer 20

There is no difference.