LinkedIn React Assessment

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

Babel

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

Because you want to allow a component to update in response to changes in the props.

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

There is no difference

Consider the following code from React Router. What do you call :id in the path prop? <Route path="/:id" />

This is a route parameter

What do you call the message wrapped in curly braces below? let message = 'Hi there'; const element = <p>{message}</p>;

It is a JS expression.

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

To load external data.

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

Use the defaultValue property. <input defaultValue="Bob" type="text" ref={this.input} />

When do you use useLayoutEffect?

When you need the browser to paint before the effect runs.

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

When you need to manage more complex state in an app.

When might you use React.PureComponent?

When you want a default implementation of shouldComponentUpdate().

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. It memoizes the result, telling React to skip the render and reuse the last rendered result. const Component = React.memo(function Component(props) {};

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", "Wolson"))

Wrap the object in parenthesis.

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

by nesting components.

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

dangerouslySetInnerHTML

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

error boundaries.

What does this React element look like given the following function? React.createElement('h1', null, "What's happening?");

<h1> What's happening? </h1>

What is [e.target.id] called in the following code snippet? handleChange(e) { this.setState({[e.target.id]: e.target.value }) }

A dynamic key.

What is the children prop?

A property that lets you pass components as data to other components.

Which of these terms commonly describe React applications?

Declarative

Which props from the props object is available to the component with the following syntax? <Message {...props} />

All of them

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

Capitalize clock to Clock.

What should the console read when the following code is run? const [, , animal] = ['Horse', 'Mouse', 'Cat']; console.log(animal);

Cat

You have written the following code but nothing is rendering. How do you fix this problem? const Heading = () => { <h1>Hello!</h1>; };

Change the curly braces to parenthesis, or add a return statement before the h1 tag.

What is the testing library most often associated with React?

Jest

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

Pure functions.

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.

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

React context

What can you use to handle code splitting?

React.lazy

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

React.lazy

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

ReactDOM

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

componentDidMount() This is where requests for data for a component is made.

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

const

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

Virtual DOM.

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'];

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

a callback function that is called once for each element in the array. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2);

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

fallback. no explanation. stupid question.

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({name, cookingTime}) { return ( <h1> {name} {cookingTime} </h1> ); }

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

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

import { Component } from 'react'; Using curly braces indicates you are doing a member import. Member imports are exported with export (as opposed to export default, which is a default import).

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); }, [setDone]);

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

setState is asynchronous and might result in out of sync values.

Why might you use a ref?

to directly access the DOM node.

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

useEffect(function updateTitle() { document.title = name + ' ' + lastname; }); This is the only option that works since it modifies document.title, not just title.

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