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

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

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

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

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

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

Reference

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

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

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

Reference

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

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

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

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

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

<Message {...props} />

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

<Route path="/:id" />

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

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

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

Reference

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

Reference

Q17. How would you describe the message variable wrapped in curly braces below?

const message = 'Hi there';
const element = <p>{message}</p>;

Q18. What can you use to handle code splitting?

Reference

Q19. When do you use useLayoutEffect?

[Source] (https://react.dev/reference/react/useLayoutEffect) "useLayoutEffect is a version of useEffect that fires before the browser repaints the screen."

[Explanation]The correct answer to the question "When do you use useLayoutEffect?" is:

When you need to change the layout of the screen.

useLayoutEffect is used when you need to perform DOM mutations that rely on the updated layout of the elements. It allows you to make changes to the DOM synchronously before the browser performs its painting step. This can be useful when you need to measure or manipulate the layout, such as accessing element dimensions or positions, calculating scroll offsets, or performing other operations that require up-to-date layout information.

The other option provided as answer is not accurate:

"When you need the browser to paint before the effect runs" is not correct. The purpose of useLayoutEffect is to run the effect synchronously after the DOM updates but before the browser paints, allowing you to make layout-related changes before the visual rendering occurs.

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!

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>

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

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

Q22. When might you use React.PureComponent?

Reference

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

Q24. What is the children prop?

Reference

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

Reference

Q26. Which of these terms commonly describe React applications?

Reference

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

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

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

const Heading = () => {
  <h1>Hello!</h1>;
};

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

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

Reference

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

Reference

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

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

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

const handleChange = (e) => {
  setState((prevState) => ({ ...prevState, [e.target.id]: e.target.value }));
};

Reference

Q36. What is the name of this component?

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

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

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

Reference

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

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

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

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

const clock = (props) => {
  return <h1>Look at the time: {props.time}</h1>;
};

Reference

Explanation: In JSX, lower-case tag names are considered to be HTML tags.

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

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

Reference

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

function MyComponent(props) {
  const [done, setDone] = useState(false);

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

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

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

Q46. Which answer best describes a function component?

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

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

useEffect(() => {
  setName('John');
}, [name]);

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

Q50. 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() {...}
}

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

<...>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</...>

<//>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
<///>

<>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</>

<Frag>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</Frag>

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

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

const greeting = isLoggedIn ? <Hello /> : null;

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

ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));

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

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

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

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

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

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

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

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

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

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

Reference

Q60. 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() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

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

Q61. 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')
)

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

React.createElement(x, y, z);

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

useEffect(() => {
  // do things
}, []);

Reference

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

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

ReactDOM.createPortal(x, y);

Reference

Q67. What is setCount?

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

Reference

Q68. What is the use of map function below?

const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);

Q69. Describe what is happening in this code?

const { name: firstName } = props;

Q70. What is wrong with this code?

const MyComponent = ({ names }) => (
  <h1>Hello</h1>
  <p>Hello again</p>
);

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

ReactDOM.createPortal(x, y);

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

Q73. What is this pattern called?

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

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

Q75. The code below is rendering nothing and generates 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);

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

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

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

Source: React Docs

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

Source: React Docs

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

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

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

hint

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

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

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

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

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

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

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

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

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

Reference

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.

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

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

function Dish() {
  return (
    <>
      <Ingredient />
      <Ingredient />
    </>
  );
}

Q92. When does the componentDidMount function fire?

Reference

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

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

Reference

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

Q96. Which language can you not use with React?

Q97. 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: []
    };
}

Reference

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

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

add();

image

Explanation: function that called without parameter will use its param default value, thus x will always be default to 1 and y will always be default to 2.

Q99. Why might you use a React.ref?

Reference

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

const { tree, lake } = nature;

Reference

Q101. 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")
);

<Message sent={false} />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

<Message sent="false" />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

Passing Props to a Component

Q102. 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([]);
  /// ...
};

Explanation: useState always return an array with two values, the state itself (on first value) and the set function that lets you update the state (on second value) useState Reference

Q103. What would you pass to the onClick prop that will allow you to pass the initName prop into the greet handler?

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

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

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

JSX Transform with Babel

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

React Hooks useCallback docuementation

Q106. Why might you use the useRef hook?

Reference

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

Reference

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

Reference

Q109. Why is ref used?

Reference

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

Reference

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

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

Q113. In react, the key should be?

Reference

Q114. Which company developed ReactJS?

Reference

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

Reference

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

Reference

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

Reference

Q118. Which choice is a correct refactor of the Greeting class component into a function component?

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

Q119. Why is the waitlist not updating correctly?

const Waitlist = () => {
  const [name, setName] = useState('');
  const [waitlist, setWaitlist] = useState([]);
  const onSubmit = (e) => {
    e.preventDefault();
    waitlist.push(name);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <label>
          Name: <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
        <button type="submit">Add to waitlist</button>
      </form>

      <ol>
        {waitlist.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ol>
    </div>
  );
};

Reference

Q120. What is the pattern that is used in the Context.Consumer below?

{(isLoggedIn)=>{isLoggedIn ? "Online" : "Offline"}}

Q121. In React.js which one of the following is used to create a class for Inheritance ?

Reference

Q122. What is the purpose of render() in React.js?

Reference

Q123. What is the use of super(props) in React.js?

Reference

Q124. What is Redux in React.js?

Reference

Q125. What is the purpose of the virtual DOM in React.js, and how does it improve performance in web applications??

Reference

Q126. You run the following code and get this error message: "invalid hook call." what is wrong with the code?

import React from 'react';

const [poked, setPoked] = React.useState(false);

function PokeButton() {
  return <button onClick={() => setPoked(true)}>{poked ? 'You have left a poke.' : 'Poke'}</button>;
}

Q127. A colleague comes to you for help on a react component. They say that the poke button renders correctly, however when the button is clicked, this error is shown: "setPoked is not defined". What is wrong with their code?

function PokeButton() {
  const { poked, setPoked } = useState(false);
  return <button onclick={() => setPoked(true)}>{poked ? 'You have left a poke.' : 'Poke'}</button>;
}

Q128. This component is loaded dynamically. What should you replace XXXX with to complete the code?

const OtherComponent = React.lazy(() => import('./OtherComponent.js'));

function MyComponent() {
  return (
    <XXXX fallback={<spinner />}>
      <OtherComponent />
    </XXXX>
  );
}

Q129. Elements in lists in React should have __ that are ___ .

Q130. You want to memorize a callback function so you ensure that React does not recreate the function at each render. Which hook would you use to accomplish this?

Source: CodeDamn

Q131. You want to perform a network operation as the result of a change to a component's state named userInput. what would you replace XXXX with?

useEffect(callNetworkFunc, XXXX);

Q132. When is the Hello component displayed?

<div>{isLoggedIn ? <Hello /> : null}</div>

Q133. When do you use useLayoutEffect?

Q134. What is the difference between state and props in React?

Q135. Which language can you not use with React?

Q136. Which answer best describes a function component?

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

Q139. What is the primary function of React Router?

Q140. When should you use Redux in a React application?

Q141. What is the use of React hooks?

Q142. How can you pass data through a React component tree without having to pass props down manually at every level?