linkedin-skill-assessments-quizzes

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

Q96. Which language can you not use with React?

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

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

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

Reference

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

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

add();

• null
• 3
• 0
• undefined

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?

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

Reference

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

const { tree, lake } = nature;

• function defaults
• array destructuring
• PRPL pattern
• destructuring assignment

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

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

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

• props.pokeDex
• this.props.pokeDex
• setPokeDex()
• pokeDex

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

• 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().

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

• Babel
• JSX Editor
• Browser Buddy
• ReactDOM

JSX Transform with Babel

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

• useCallback
• useMemo
• useRef
• useTransition

React Hooks useCallback docuementation

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

Reference

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

• JavaScript
• React Router
• Redux
• Prop-Types

Reference

Q108. 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”})

Reference

Q109. Why is ref used?

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

Reference

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

• componentDidMount
• componentDidUpdate
• willComponentUpdate
• shouldComponentUpdate

Reference

Q111. 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 to All

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

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

Q113. In react, the key should be?

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

Reference

Q114. Which company developed ReactJS?

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

Reference

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

• Chai
• Sinon
• Jest
• Mocha

Reference

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

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

Reference

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

• DOM
• flux
• JSX
• Props

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

• const Greeting = (name) => <h1>{name}</h1>
• function Greeting(name){return <h1>{name}</h1>;}
• const Greeting = props => { <h1>{props.name}</h1> }
• const Greeting = ({ name }) => <h1>Hello {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>
  );
};

• waitlist is being mutated directly. Use the setWaitlist function instead to update the waitlist state.
• The form is reloading the page each time Add to waitlist is clicked.
• The Add to waitlist button is missing a click handler.
• There are likely repeated names inside of the waitlist array.

Reference

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

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

• higher-order component
• wish component
• Render Props
• setup Componet

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

• Create
• Extends
• Inherits
• Delete

Reference

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

• To replace the existing markup
• To update the existing markup
• Both of the above
• None of the above

Reference

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

• To call the constructor of the parent class
• To initialize this.props in the constructor
• Both of the above
• None of the above

Reference

Q124. What is Redux in React.js?

• A state container for JavaScript apps
• A tool for building UI components
• Both of the above
• None of the above

Reference

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

• The virtual DOM is used to store user authentication data securely.
• The virtual DOM is a backup copy of the actual DOM, created for debugging purposes.
• The virtual DOM is a lightweight representation of the actual DOM, and it helps improve performance by minimizing direct manipulation of the real DOM.
• The virtual DOM is a database used to store component states.

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

• The useState call needs to be called inside of the PokeButton component.
• The react package is likely not installed correctly.
• useState is not imported correctly. Import useState directly instead of importing react.
• PokeButton is a pure function and therefore cannot have any local state.

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

• onClick prop should be onclick.
• The click handler passed to the onClick prop is inlined. Move this handler into a variable outside of JSX.
• They use object destructructing instead of array destructructing. Wrap the poked and setPoked values in an array.
• poked and setPoked are not destructured in the correct order.

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

• Component
• Fragment
• Suspense
• Lazy

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

• keys ; unique
• keys ; indexes
• style ; inline
• values ; not-null Source: React Docs

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?

• useRef
• useMemo
• memo
• useCallback

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

• [userInput]
• userInput
• undefined
• []

Q132. When is the Hello component displayed?

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

• when isLoggedIn is false
• when isLoggedIn is true
• when isLoggedIn is false and the Hello function is invoked
• never

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

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

• Props are set by the parent component, state is set by the child component
• Props are passed to a component, state is managed within the component
• Props can be updated, state cannot be updated
• There is no difference - props and state are the same

Q135. Which language can you not use with React?

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

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

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

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

Q138. In React, what is the purpose of the key prop when rendering a list of components

• The key prop is used to provide a unique identifier for the component.
• The key prop is used to define the color of the component.
• The key prop is required to render a list of components.
• The key prop is used by React to optimize updates and identify which items have changed or been added/removed in the list.

Q139. What is the primary function of React Router?

• React Router is used for fetching data from APIs.
• React Router is used to create animations in React applications.
• React Router is used for managing state in React components.
• React Router is used for adding navigation and routing to React applications, allowing users to navigate between different views or pages.

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

• Redux is always required in React applications.
• Redux should be used when you need to fetch data from APIs.
• Redux is used for creating user interfaces but not for state management.
• Redux is typically used when you have complex state management needs, such as sharing state between multiple components or handling deeply nested state.

Q141. What is the use of React hooks?

• To optimize React apps for mobile devices
• To add visual effects to React components.
• To allow using state and lifecycle methods in function components
• To integrate with external UI libraries like Bootstrap

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

• By using React context
• By using redux
• By using react router
• By using react lifecycle methods

Q143. What is React?

• A server-side programming language
• A JavaScript library for building user interfaces
• A database management system
• A CSS framework

Reference React Overview

Q144. Which method is used to create a React component?

• React.createComponent()
• function Component() or class Component extends React.Component
• new React.Component()
• React.makeComponent()

Reference Components and Props

Q145. What is JSX?

• A new programming language
• A syntax extension for JavaScript that allows writing HTML-like code
• A CSS preprocessor
• A database query language

Reference Introducing JSX

Q146. What is the purpose of the useEffect hook?

• To manage component state
• To perform side effects in functional components
• To create context
• To optimize performance

Reference Using the Effect Hook

Q148. Which prop is used to pass data from parent to child components?

• state
• props
• context
• ref

<ChildComponent name="John" age={25} />

Reference Components and Props

Q149. What is the correct way to handle events in React?

function Button() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

• The above code is correct
• Use onclick instead of onClick
• Events cannot be handled in functional components
• Use addEventListener method

Reference Handling Events

Q150. Which lifecycle method is called after a component is mounted?

• componentWillMount
• componentDidMount
• componentWillUpdate
• componentDidUpdate

Reference Component Lifecycle

Q152. What is the correct way to update state in a class component?

• this.state.count = 1;
• this.setState({ count: 1 });
• this.updateState({ count: 1 });
• this.state = { count: 1 };

Reference State and Lifecycle

Q153. What is the purpose of React.Fragment?

• To create new components
• To group multiple elements without adding extra DOM nodes
• To handle errors
• To manage state

return (
  <React.Fragment>
    <h1>Title</h1>
    <p>Description</p>
  </React.Fragment>
);

Reference Fragments

Q155. Which method is used to prevent default behavior in React events?

• event.stop()
• event.preventDefault()
• event.cancel()
• event.halt()

Reference SyntheticEvent

Q156. What is the correct way to conditionally render elements in React?

function Greeting({ isLoggedIn }) {
  return <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>;
}

• The above code is correct
• Use if-else statements inside JSX
• Use switch statements inside JSX
• Conditional rendering is not possible in React

Reference Conditional Rendering

Q157. Which hook is used for performance optimization by memoizing expensive calculations?

• useCallback
• useMemo
• useEffect
• useState

Reference useMemo Hook

Q158. What is the purpose of the useCallback hook?

• To manage state
• To memoize callback functions
• To perform side effects
• To access context

Reference useCallback Hook

Q159. What is the correct way to pass a function as a prop?

function Parent() {
  const handleClick = () => console.log('Clicked');
  return <Child onClick={handleClick} />;
}

• The above code is correct
• Functions cannot be passed as props
• Use onClick="handleClick"
• Use onClick={handleClick()}

Reference Passing Functions to Components

Q161. Which statement about React components is correct?

• Component names must start with lowercase letters
• Component names must start with uppercase letters
• Component names can start with numbers
• Component names are case-insensitive

Reference Components and Props

Q162. Which hook is used to reduce state management complexity?

• useState
• useReducer
• useEffect
• useContext

Reference useReducer Hook

Q164. What is the correct way to handle forms in React?

function Form() {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

• The above code demonstrates controlled components
• Use uncontrolled components only
• Forms cannot be handled in React
• Use jQuery for form handling

Reference Forms

Q165. Which method is used to update state based on previous state?

setCount((prevCount) => prevCount + 1);

• Pass a function to the state setter
• Use this.setState with previous state
• Access state directly
• Use global variables

Reference Functional Updates

Q166. What is the purpose of React.memo?

• To manage component state
• To prevent unnecessary re-renders of functional components
• To create memoized values
• To handle side effects

Reference React.memo

Q167. Which hook is used to imperatively access DOM elements?

• useState
• useRef
• useEffect
• useContext

Reference Refs and the DOM

Q168. What is the correct way to handle asynchronous operations in useEffect?

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

• Create an async function inside useEffect
• Make useEffect async directly
• Use promises only
• Async operations are not allowed in useEffect

Reference Effect Hook with Async

Q169. Which statement about React Hooks is correct?

• Hooks can be called conditionally
• Hooks must be called at the top level of React functions
• Hooks can be called in loops
• Hooks can be called in nested functions

Reference Rules of Hooks

Q170. What is the purpose of the dependency array in useEffect?

• To pass data to the effect
• To control when the effect runs
• To define effect priority
• To handle errors

Reference Effect Dependencies

Q171. Which method is used to create a custom hook?

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

• Create a function that starts with “use” and uses other hooks
• Use the createHook method
• Extend the Hook class
• Custom hooks are not possible

Reference Building Your Own Hooks

Q172. What is the correct way to handle errors in React components?

• Use try-catch blocks in render methods
• Use Error Boundaries with componentDidCatch
• Use global error handlers
• Errors cannot be handled in React

Reference Error Boundaries

Q173. Which statement about React Context is correct?

• Context should be used for all state management
• Context is designed to share data across the component tree
• Context cannot be used with hooks
• Context is only for class components

Reference Context

Q174. What is the purpose of the useLayoutEffect hook?

• To manage component layout
• To perform DOM mutations synchronously after all DOM mutations
• To create responsive layouts
• To handle CSS animations

Reference useLayoutEffect Hook

Q175. Which method is used to optimize performance by preventing unnecessary renders?

• shouldComponentUpdate only
• React.memo, useMemo, useCallback, and shouldComponentUpdate
• componentDidUpdate only
• Performance optimization is automatic

Reference Optimizing Performance

Q176. What is the correct way to pass multiple props to a component?

const props = { name: 'John', age: 25, city: 'New York' };
return <UserCard {...props} />;

• Use the spread operator
• Pass props individually only
• Use arrays for multiple props
• Multiple props are not allowed

Reference JSX Spread Attributes

Q177. Which hook is used to debug custom hooks?

• useEffect
• useDebugValue
• useState
• useRef

Reference useDebugValue Hook

Q178. What is the purpose of React.StrictMode?

• To enforce strict typing
• To highlight potential problems in an application during development
• To improve performance
• To enable strict mode in JavaScript

Reference Strict Mode

Q179. Which statement about React portals is correct?

• Portals are used for routing
• Portals provide a way to render children into a DOM node outside the parent component
• Portals are used for state management
• Portals are deprecated

Reference Portals

Q180. What is the correct way to handle component cleanup?

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Timer tick');
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

• Return a cleanup function from useEffect
• Use componentWillUnmount only
• Cleanup is automatic
• Use try-finally blocks

Reference Effect Cleanup

Q181. Which method is used to forward refs in React?

• React.createRef
• React.forwardRef
• React.passRef
• React.sendRef

Reference Forwarding Refs

Q182. What is the purpose of the useImperativeHandle hook?

• To manage component state
• To customize the instance value exposed to parent components when using ref
• To handle imperative animations
• To create imperative APIs

Reference useImperativeHandle Hook

This site is open source. Improve this page.