Skip to content

Files

Latest commit

 

History

History
2261 lines (1679 loc) · 55.1 KB

react-mcq.md

File metadata and controls

2261 lines (1679 loc) · 55.1 KB

React Multiple Choice Questions


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

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

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

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

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

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

  • Mocha
  • Chai
  • Sinon
  • Jest

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

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

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

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);
  • Horse
  • Cat
  • Mouse
  • undefined

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

  • JSX Editor
  • ReactDOM
  • Browser Buddy
  • Babel

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

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

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

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

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

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

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

Q. What can you use to handle code splitting?

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

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

Explanation: useLayoutEffect gets executed before the useEffect hook without much concern for DOM mutation. Even though the React hook useLayoutEffect is set after the useEffect Hook, it gets triggered first!

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

Q. 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>; }
  • 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>; }

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

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

Q. What is the children prop?

  • a property that adds child components to state
  • a special property that JSX creates on components that contain both an opening tag and a closing tag, referencing it's contents.
  • a property that lets you set an array as a property
  • a property that lets you pass data to child elements

Q. Which attribute is React's replacement for using innerHTML in the browser DOM?

  • injectHTML
  • dangerouslySetInnerHTML
  • weirdSetInnerHTML
  • strangeHTML

Q. Which of these terms commonly describe React applications?

  • declarative
  • integrated
  • closed
  • imperative

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

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

Q. 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.
  • 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 a div.

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

  • const
  • let
  • constant
  • var

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

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

  • constructor
  • componentDidMount
  • componentWillReceiveProps
  • componentWillMount

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

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

  • monads
  • pure functions
  • recursive functions
  • higher-order functions

Q. What is [e.target.id] called in this code snippet?

const handleChange = (e) => {
  setState((prevState) => ({ ...prevState, [e.target.id]: e.target.value }));
};
  • a computed property name
  • a set value
  • a dynamic key
  • a JSX code string

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

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

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

Explanation: Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

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

  • React
  • ReactDOM
  • Render
  • DOM

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

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

const clock = (props) => {
  return <h1>Look at the time: {props.time}</h1>;
};
  • 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.

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

Q. Which function from React can you use to wrap Component imports to load them lazily?

  • fallback
  • split
  • lazy
  • memo

Q. 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); }, []);
  • useEffect(() => { setDone(true); }, [setDone]);
  • useEffect(() => { setDone(true); }, [done, setDone]);

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

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

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

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

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

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

Q. You have created a new method in a class component called handleClick, but it is not working. Which code is missing?

class Button extends React.Component{

  constructor(props) {
    super(props);
    // Missing line
  }

  handleClick() {...}
}
  • this.handleClick.bind(this);
  • props.bind(handleClick);
  • this.handleClick.bind();
  • this.handleClick = this.handleClick.bind(this);

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

<React.Fragment>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</React.Fragment>
  • A
<...>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</...>
  • B
<//>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
<///>
  • C
<>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</>
  • D
<Frag>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</Frag>

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

class Ticker extends React.component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{}</h1>;
  }
}
  • this.state.count
  • count
  • state
  • state.count

Q. Per the following code, when is the Hello component assigned to greeting?

const greeting = isLoggedIn ? <Hello /> : null;
  • never
  • when isLoggedIn is true
  • when a user logs in
  • when the Hello function is called

Q. In the following code block, what type is orderNumber?

ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));
  • string
  • boolean
  • object
  • number

Q. 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={{backgroundColor: "blue"}}>Hi</h1>;
  • const element = <h1 style={blue}>Hi</h1>;
  • const element = <h1 style="blue">Hi</h1>;

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

  • replaceState
  • refreshState
  • updateState
  • setState

Q. Consider the following component. What is the default color for the star?

const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;
  • black
  • red
  • grey
  • white

Q. What is the difference between the click behaviors of these two buttons(assuming that this.handleClick is not 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 A will not fire the handler this.handleClick successfully
  • There is no difference
  • Button B will not fire the handler this.handleClick successfully

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

<Route path="/:id" />
  • A
<Route path="/:id">
  {' '}
  <About />
</Route>
  • B
<Route path="/tid" about={Component} />
  • C
<Route path="/:id" route={About} />
  • D
<Route>
  <About path="/:id" />
</Route>

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

const Greeting = ({ name }) => <h1>Hello {name}!</h1>;
  • A
class Greeting extends React.Component {
  constructor() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}
  • B
class Greeting extends React.Component {
  <h1>Hello {this.props.name}!</h1>;
}
  • C
class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}
  • D
class Greeting extends React.Component {
  render({ name }) {
    return <h1>Hello {name}!</h1>;
  }
}

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

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

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

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

useEffect(() => {
  // do things
}, []);
  • componentWillUnmount
  • componentDidMount
  • render
  • componentDidUpdate

Q. What is the name of the base component of this component?

class Comp extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}
  • Comp
  • h1
  • React.Component
  • Component

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

Q. What is setCount?

const [count, setCount] = useState(0);
  • the initial state value
  • a variable
  • a state object
  • a function to update the state

Q. What is the use of map function below?

const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);
  • 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

Q. Describe what is happening in this code?

const { name: firstName } = props;
  • It is creating a new object that contains the same name property as the props object.
  • It is assigning the value of the props object's firstName property to a constant called name.
  • It is retrieving the value of props.name.firstName.
  • It is assigning the value of the props object's name property to a constant called firstName.

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

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

Q. Given this code, what will be printed in the <div> tag?

const MyComponent = ({ children }) => (
  <div>{children.length}</div>
);
...
<MyComponent>
<p>
  Hello <span>World!</span>
</p>
<p>Goodbye</p>
</MyComponent>
  • It will produce an error saying "cannot read property "length" of undefined."
  • 1
  • undefined
  • 2

Q. What is this pattern called?

const [count, setCount] = useState(0);
  • object destructuring
  • array destructuring
  • spread operating
  • code pushing

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

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

Q. The code below is rendering nothing and generate this error: "ReactDOM is not defined." How do you fix this issue?

import React from 'react';
import { createRoot } from 'reactjs-dom';

const element = <h1>Hi</h1>;
// Note: error on the line below
const root = ReactDOM.createRoot(document.getElementById('root'));

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

Q. 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"}.

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

  • Add a key prop with the same value to each item in the list
  • Clear the console warnings
  • Use the UseId hook to generate a unique key for each element in the list
  • When iterating over the list items, add a unique property to each list item.

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

Q. 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={firePhotonTorpedoes}>Pew Pew</button>
  • <button onClick={this.firePhotonTorpedoes()}>Pew Pew</button>
  • <button onClick={this.firePhotonTorpedoes}>Pew Pew</button>

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

  • shadow DOM
  • fiber
  • reconciliation
  • setting state

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

  • Intuit
  • Twitter
  • Facebook
  • Snapchat

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

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

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

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

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

  • React
  • jQuery
  • webpack
  • ReactDOM

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

  • HTML
  • JavaScriptX
  • JSX
  • React JavaScript

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

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

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

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

Explanation: This question test knowledge of react class components. You need to use this in order to call methods declared inside class components.

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

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

Explanation: React Components are like functions that return HTML elements. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components.

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

  • onBlur
  • onPress
  • defaultValue
  • disabled

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

function Dish() {
  return (
    <>
      <Ingredient />
      <Ingredient />
    </>
  );
}
  • child component
  • parent component
  • nested component
  • sibling component

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

Q. What might you use webpack for in React development?

  • 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

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

Q. How would you modify the constructor to fix this error: "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(props);
  • super(this);
  • this.super();

Q. Which language can you not use with React?

  • Swift.
  • JSX.
  • Javascipt.
  • TypeScript.

Q. 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(props.pokeDex);
  • console.log(this.props.pokeDex);
  • console.log(pokeDex);
  • console.log(this.state.pokeDex);

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

function add(x = 1, y = 2) {
  return x + y;
}

add();
  • null
  • 3
  • 0
  • undefined

image

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

Q. What pattern is being used in this code block?

const { tree, lake } = nature;
  • function defaults
  • array destructuring
  • PRPL pattern
  • destructuring assignment

Q. How would you correct this code block to make sure that the sent property is set to the Boolean value false?

ReactDom.render(
  <Message sent=false />,
  document.getElementById("root")
);
  • A
<Message sent={false} />,
  • B
ReactDom.render(<Message sent="false" />, document.getElementById('root'));
  • C
<Message sent="false" />,
  • D
ReactDom.render(<Message sent="false" />, document.getElementById('root'));

Q. This code is part of an app that collects Pokemon. The useState hook below is a piece of state holding onto the names of the Pokemon collected so far. How would you access the collected Pokemon in state?

const PokeDex = (props) => {
  const [pokeDex, setPokeDex] = useState([]);
  /// ...
};
  • props.pokeDex
  • this.props.pokeDex
  • setPokeDex()
  • pokeDex

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

ReactDOM.createPortal(x, y);
  • the current state
  • the rendered element
  • the App component
  • the DOM element that exists outside of the parent component

Q. What would you pass to the onClick prop that wil allow you to pass the initName prop into the greeet handler?

const Greeting = ({ initName }) => {
  const greet = (name) => console.log("Hello, " + name + "!");
  return <button onClick={ ... }>Greeting Button </button>
}
  • hug
  • this.hug(initName)
  • (name) => this.hug(name)
  • () => hug(initName)

Explanation: Apparently the question misstyped greet as hug. Putting this aside, we can still learn from this question.

  • In a function, the global object is the default binding for this. In a browser window the global object is [object Window]. This is a functional Component, so this from this.hug actually refers to browser window. Since it is a functional component, we can directly refer to hug without using this.
  • To pass a handler to onClick, we should always pass a function rather than execute a function. So we need to use callback here. initName is available in Greeting's function scope, so we can directly supply as an argument to hug().

Q. What is the name of the compiler used to transform JSX into JavaScript?

  • Babel
  • JSX Editor
  • Browser Buddy
  • ReactDOM

Q. Which hook is used to prevent a function from being recreated on every component render?

  • useCallback
  • useMemo
  • useRef
  • useTransition

Q. Why might you use the useRef hook?

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

Q. Which of the following is required to use React?

  • JavaScript
  • React Router
  • Redux
  • Prop-Types

Q. What is the correct way to get a value from context?

  • const value = useContext(MyContext.Consumer)
  • const value = useContext(MyContext.Provider)
  • const value = useContext(MyContext)
  • const value = useContext({value: "intiial value"})

Q. Why is ref used?

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

Q. Choose the method which should be overridden to stop the component from updating?

  • componentDidMount
  • componentDidUpdate
  • willComponentUpdate
  • shouldComponentUpdate

Q. What is the functionality of a “webpack” command?

  • Runs react local development server
  • Transfers all JS files to down into one file
  • A module builder
  • None of the above

Q. Choose the method which is not a part of ReactDOM?

  • ReactDOM.createPortal()
  • ReactDOM.hydrate()
  • ReactDOM.destroy()
  • ReactDOM.findDOMnode()

Q. In react, the key should be?

  • Unique among his siblings
  • Unique in DOM
  • Does not requires to be unique
  • all of the above

Q. Which company developed ReactJS?

  • Google
  • Meta (ex Facebook)
  • Apple
  • Twitter

Q. Choose the library which is most often associated with react?

  • Chai
  • Sinon
  • Jest
  • Mocha

Q. What of the following is used in React.js to increase performance?

  • Original DOM
  • Virtual DOM
  • Both of the above
  • None of the above

Q. Among The following options, choose the one which helps react for keeping their data uni-directional?

  • DOM
  • flux
  • JSX
  • Props

Q. What is this pattern called?

const [count, setCount] = useState(0);
  • code pushing
  • object destructuring
  • spread operating
  • array destructuring

Q. This code is part of an app that collects Pokemon. The useState hook below is a piece of state holding onto the names of the Pokemon collected so far. How would you access the collected Pokemon in state?

const PokeDex = (props) => {
  const [pokeDex, setPokeDex] = useState([]);
  //...
};
  • pokeDex
  • this.props.pokeDex
  • setPokeDex()
  • props.pokeDex

Q. What company open-sourced React?

  • Amazon
  • Facebook
  • Google
  • Twitter

Q. What is JSX?

  • A testing library for React.
  • An HTML-like language that compiles to JavaScript.
  • An HTML-like language that compiles to CSS.
  • An HTTP API library for React.

Q. What is one way that JSX and HTML differ?

  • JSX uses className instead of class.
  • JSX uses <container> instead of <div>.
  • HTML is for creating a user interface.
  • JSX uses <textinput> instead of <input>.

Q. Why does React typically require a build step?

  • To transpile HTML to JSX
  • To transpile JSX to CSS
  • To transpile JSX to HTML
  • To transpile JSX to Javascript

Q. Why do you have to worry about version conflicts in React, but not need to with native web components?

  • Native web components have an adapter layer.
  • Native web components don't use JavaScript.
  • When a new version of React is released, you can't use old versions.
  • React has a runtime, web components don't.

Q. What pattern does React use for handling data flows?

  • One-way binding
  • Auto-binding
  • Three-way binding
  • Two-way binding

Q. What is a benefit of React's single file approach?

  • Designers have a separate file to work with.
  • It enhances security.
  • It honors the rule of least power.
  • You can read, understand, and work with each autonomous file in isolation.

Q. Why is React inherently more flexible than many popular competitors?

  • React is an library.
  • React's API is HTML-oriented instead of JavaScript-oriented.
  • React is a comprehensive framework.
  • React embeds HTTP calls, testing, and internationalization.

Q. What is the benefit of React's virtual DOM?

  • It transpiles JSX before converting to DOM nodes.
  • It reduces React's bundle size.
  • It fascilitates inter-component communication via JSON.
  • It improves performance by minimizing DOM changes.

Q. What is a benefit of React's library approach mentioned in this module?

  • Clear and comprehensive opinions are built in
  • Enforced consistency
  • It's light-weight and configurable
  • Less setup overhead

Q. When do we store variables on the component itself (vs on a component instance)

  • When the variable is not related on a component instance
  • When the variable is a fixed constant value
  • When the variable holds a function

Q. What can we do if components A and B are siblings and they require access to the same state element?

  • Place the state in either A or B
  • Place the state in the parent component of A and B
  • Place the state in a third component C that is a sibling to A and B
  • Restructure the application to have A and B be related differently

Q. What's the right syntax to assign the function doSomething as the handler of a click event?

  • onClick={() => doSomething}
  • onClick={doSomething}
  • onClick={doSomething()}

Q. When is not a good idea to introduce a new state element?

  • When that element is itself an array or object
  • When a change on that element should drive a change in the UI
  • When other elements needs to compute their value based on this new element
  • When that element can be computed from other elements

Q. We have a boolean X. We want to render component A if X is true, and component B if X is false. Which is correct?

  • <{ X ? A : B } />
  • { X ? : }
  • { if (X) { A } else { B } }
  • { if X then A else B }

Q. What function can be used to change the state of a React component?

  • this.state = {}
  • this.setState
  • this.changeState

Q. What instance property can be used to access the properties of a class component?

  • this.properties
  • this.attrs
  • this.props
  • this.attributes

Q. What is the format of the data returned by the Github API?

  • YAML
  • XML
  • JSON

Q. How do you get a random number in JavaScript?

  • Math.random()
  • Number.random()
  • rand()

Q. When is the class component syntax needed?

  • Only for components that are children of class components
  • Never
  • Always
  • When we need to manage state or use lifecycle methods

Q. How do you render a React component?

  • Pass a React element and a DOM element to the ReactDOM.render function
  • Call the React elements toString() method
  • Implement a render function that returns a JSX expression
  • Provide values for each prop of a React component

Q. Why is JSX used in React applications?

  • Because HTML is xml-like
  • To specify the composition of React components
  • To be able to mix markup and code together

Q. What does a JSX expression compile to?

  • HTML
  • JSX byte code
  • A call to the React.createElement function
  • A call to the ReactDOM.render function

Q. What is the primary technique for passing data out of a React component?

  • Use a JavaScript class component
  • Pass the data to a function passed in as a prop
  • Dispatch an action to a state container
  • Return the data from the render method

Q. What is the name of React's normalized event abstraction?

  • SyntheticEvent
  • on*
  • Event

Q. How can routing be added to a React application?

  • By implementing server-side rendering
  • By using the React.route function
  • By using the component
  • By adding a HTML5 pushState API based router library

Q. The facility that allows a component to have local, mutable data is called?

  • Function components
  • Webpack
  • Props
  • State

Q. React is...

  • an optimizing compiler for JavaScript.
  • a client-side library providing rendering and event handling.
  • a comprehensive client-side application framework.
  • a library that represents asynchronous data streams with observables.

Q. A Redux 'action' is...

  • the same thing as a model-view-intent 'intent'.
  • the same thing as a model-view-intent 'model'.
  • the same thing as a model-view-intent 'view'.

Q. Which of the following is NOT provided by React?

  • Cross-browser support
  • An event handing system
  • Server-side rendering
  • A router

Q. When working with the useState hook, what is the first parameter passed to useState?

  • useState does not take any parameters
  • The timeout value for how long the state will be set
  • A lambda function whose purpose is to set the value of state
  • The initial value of the state

Q. If the dependency array that is passed into the useEffect React Hook is an empty array, what is the expected result?

  • The function passed into the useEffect hook will never be executed.
  • The function passed into the useEffect hook will be executed one time only.
  • The function passed into the useEffect hook will not be affected.
  • The function passed into the useEffect hook will be executed on every render.

Q. When building a React tree of components, what does "prop drilling" refer to in the React app itself?

  • Referencing a property by reference instead of by value
  • Deleting a property so deep it can never be recovered
  • Passing properties through one or more layers of a component hierarchy

Q. In a reducer function, what is the reason for spreading state (...state) as part of the return of that function?

  • So you can visualize the state in the debugger making it easier to find bugs
  • To guarantee that all existing properties of state are copied into the new returned state
  • To make sure that no previously passed in state values return to the caller of the reducer

Q. What is the second parameter of the useReducer React hooks best described as?

  • The reducer function
  • The initial state
  • A call the parent reducer
  • The cancellation token passed to the reducer

Q. What is the default return value for a typical reducer function that you would associate with useReducer?

  • A state array
  • null
  • state
  • An empty string

Q. In a class component, what call would you use if you want to reference a DOM element?

  • React.initRef()
  • React.newRef()
  • React.createRef()
  • React.useRef()

Q. You have an empty array as the second parameter to your useEffect hook. Which statement is true?

  • in a class component lifecycle, componentDidMount will be called on every component render.
  • in a class component lifeycle, componentDidUpdate will never be called more than once.
  • In a class component lifecycle, componentDidMount will get called once.

Q. When you build new React Hooks that contain other combined React Hooks, which statement is true?

  • Combined React Hooks cannot contain useEffect, but they can contain all other React Hooks.
  • Combined React Hooks cannot be nested with other combined React Hooks.
  • Combined React Hooks can contain their own useEffect as well as other React Hooks.

Q. When you create new React Custom Hooks, what is true about passing in parameters to these new Custom Hooks?

  • Only parameters from React Hooks that are being combined can be passed into the custom React Hook.
  • Only const objects can be passed into a custom React Hook.
  • Any JavaScript object can be passed to a custom React Hook.