LinkedIn skill assessment answers and questions — React.js

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

import React.Component from 'react'
import [ Component ] from 'react'
import Component from 'react'
import { Component } from 'react'

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

Wrap it in the React.memo higher-order component.
Implement the useReducer Hook.
Implement the useMemo Hook.
Implement the shouldComponentUpdate lifecycle method.

Q3. How do you fix the syntax error that results from running this code?

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

Wrap the object in parentheses.
Call the function from another file.
Add a return statement before the first curly brace.
Replace the object with an array.

Q4. If you see the following import in a file, what is being used for state management in the component?

import React, {useState} from 'react';

React Hooks
stateful components
गणित
class components

Q5. Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

{{name: "Rachel", age: 31}}
{name: "Rachel", age: 31}
{person: "Rachel", person: 31}}
{person: {name: "Rachel", age: 31}}

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

Mocha
Chai
Sinon
Jest

संदर्भ

क्यू 7. To get the first item from the array (“खाना बनाना”) 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"]

क्यू 8. 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

संदर्भ

प्रश्न 9. What should the console read when the following code is run?

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

Horse
Cat
Mouse
undefined

प्र10. What is the name of the tool used to take JSX and turn it into createElement calls?

JSX Editor
ReactDOM
Browser Buddy
Babel

प्रश्न 11. 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

प्र12. 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

प्रश्न 13. 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

प्र14. 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
अधिकांश लोग स्कूल में पढ़ने का एक विस्तृत खेल खेलना सीखते हैं
component
h1

प्रश्न 15. What does this React element look like given the following code? (विकल्प: 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>

संदर्भ

प्र16. 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

संदर्भ

प्रश्न 17. How would you describe the message variable 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

प्रश्न 18. What can you use to handle code splitting?

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

संदर्भ

क्यू19. 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

[स्रोत] (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?” है:

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 इससे पहले NS useEffect hook without much concern for DOM mutation. Even though the React hook useLayoutEffect is set after the useEffect Hook, it gets triggered first!

प्र20. 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.

प्र21. 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>; }

प्र22. 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

संदर्भ

प्र23. Why is it important to avoid copying the values of props into a component’s state where possible?

because you should never mutate state
इसलिये 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

प्र24. 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

संदर्भ

प्रश्न25. Which attribute is React’s replacement for using innerHTML in the browser DOM?

injectHTML
dangerouslySetInnerHTML
weirdSetInnerHTML
strangeHTML

संदर्भ

प्र26. Which of these terms commonly describe React applications?

declarative
integrated
बंद किया हुआ
imperative

संदर्भ

प्र27. 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

प्रश्न 28. A representation of a user interface that is kept in memory and is synced with the “वास्तविक” DOM is called what?

virtual DOM
डोम
virtual elements
shadow DOM

प्र29. 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 उपनाम.
Move the h1 to another component.
Surround the h1 in a div.

क्यू30. To create a constant in JavaScript, which keyword do you use?

const
होने देना
constant
var

प्रश्न31. 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

संदर्भ

प्र32. In which lifecycle method do you make requests for data in a class component?

constructor
componentDidMount
componentWillReceiveProps
componentWillMount

संदर्भ

प्रश्न 33. 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

प्रश्न34. All React components must act like _ with respect to their props.

monads
pure functions
recursive functions
higher-order functions

क्यू35. क्या है `[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

संदर्भ

प्र36. 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

प्रश्न37. What is sent to an `Array.map()` समारोह?

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

प्रश्न 38. 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: इसलिये this.props तथा this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

प्र39. What package contains the render() function that renders a React element tree to the DOM?

React
ReactDOM
Render
DOM

क्यू40. How do you set a default value for an uncontrolled form field?

उपयोग value property.
उपयोग defaultValue property.
उपयोग default property.
It assigns one automatically.

प्र41. 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>;
};

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.

प्र42. 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; });

प्रश्न 43. Which function from React can you use to wrap Component imports to load them lazily?

fallback
split
lazy
memo

संदर्भ

प्रश्न 44. 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]);

क्यू45. वर्तमान में, `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>

प्र46. 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.

प्रश्न 47. Which library does the `fetch()` function come from?

FetchJS
ReactDOM
No library. fetch() is supported by most browsers.
प्रतिक्रिया

प्रश्न 48. 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.

प्र49. 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

क्यू50. 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);

प्रश्न51. 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>

प्रश्न52. 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
गिनती करना
राज्य
state.count

प्रश्न53. Per the following code, when is the Hello component assigned to greeting?

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

कभी नहीँ
जब isLoggedIn is true
when a user logs in
when the Hello function is called

प्रश्न54. In the following code block, what type is orderNumber?

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

string
boolean
वस्तु
संख्या

प्रश्न55. 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>;

प्रश्न56. Which function is used to update state variables in a React class component?

replaceState
refreshState
updateState
setState

प्रश्न57. Consider the following component. What is the default color for the star?

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

काला
लाल
grey
गोरा

प्र 58. 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

प्रश्न59. 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>

संदर्भ

क्यू 60. 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>;
  }
}

प्रश्न 61. 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

प्रश्न 62. 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 बटन.
There is no difference–NS Link component is just another name for the <a> उपनाम.
NS <a> tag will cause an error when used in React.
NS <a> tag triggers a full page reload, यह आपको अन्य उम्मीदवारों के खिलाफ प्रभावी ढंग से प्रतिस्पर्धा करने में मदद करेगा जिनके पास आपसे अधिक जीपीए है Link component does not.

प्रश्न 63. What is the first argument, `x`, that is sent to the `createElement` समारोह?

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

प्रश्न 64. Which class-based lifecycle method would be called at the same time as this effect Hook?

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

componentWillUnmount
componentDidMount
render
componentDidUpdate

संदर्भ

प्रश्न 65. 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
एच 1
React.Component
Component

प्रश्न 66. 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

संदर्भ

प्रश्न 67. क्या है `setCount`?

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

the initial state value
a variable
a state object
a function to update the state

संदर्भ

प्रश्न 68. 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

प्रश्न 69. 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.

क्यू 70. 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.

प्र71. 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

प्र72. Given this code, what will be printed in the `<div>` उपनाम?

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 “लंबाई” of undefined.”
1
undefined
2

प्रश्न 73. What is this pattern called?

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

object destructuring
array destructuring
spread operating
code pushing

प्रश्न 74. 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

प्रश्न 75. 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);

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

प्रश्न 76. 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"}.

प्र77. You are rendering a list with React when this warning appears in the console: “चेतावनी: 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.

प्रश्न 78. 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

स्रोत: React Docs

प्र79. 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>

स्रोत: React Docs

क्यू 80. What is the process of deciding whether an update is necessary?

shadow DOM
रेशा
reconciliation
setting state

क्यू81. React is an open-source project but is maintained by which company?

Intuit
ट्विटर
फेसबुक
Snapchat

प्रश्न 82. What command can you use to generate a React project?

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

hint

क्यू 83. What is the browser extension called that React developers use to debug applications?

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

प्रश्न 84. Which tool is not part of Create React App?

प्रतिक्रिया
jQuery
webpack
ReactDOM

क्यू85. What is the JavaScript syntax extension that is commonly used to create React elements?

स्क्रैच से फ्रंट-एंड वेब डेवलपमेंट सीखें
JavaScriptX
JSX
React JavaScript

क्यू 86. How might you check property types without using Flow or TypeScript?

Check Manually.
उपयोग prop-helper.
उपयोग prop-types.
उपयोगकर्ता checker-types.

क्यू87. 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>;

क्यू88. 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.

क्यू 89. 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.

Q90. 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
अक्षम

प्रश्न91. 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

प्रश्न92. 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

संदर्भ

प्रश्न93. 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

प्रश्न94. 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.

संदर्भ

प्रश्न95. 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);
बहुत अच्छा(props);
बहुत अच्छा(यह);
this.super();

प्रश्न96. Which language can you not use with React?

तीव्र.
JSX.
Javascipt.
टाइपप्रति.

प्रश्न97. 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);

संदर्भ

प्रश्न98. 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.

प्रश्न99. 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

संदर्भ

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

const { tree, lake } = nature;

function defaults
array destructuring
PRPL pattern
destructuring assignment

संदर्भ

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

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)
(नाम) लाभ कमाने के लिए मुझे इस वस्तु का कितना हिस्सा बेचने की आवश्यकता है> this.hug(नाम)
() लाभ कमाने के लिए मुझे इस वस्तु का कितना हिस्सा बेचने की आवश्यकता है> hug(initName)

Explanation: Apparently the question misstyped greet जैसा 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, एक मुक्त-शरीर आरेख की आवश्यकता है this से 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().

क्यू104. What is the name of the compiler used to transform JSX into JavaScript?

Babel
JSX Editor
Browser Buddy
ReactDOM

JSX Transform with Babel

क्यू105. 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

संदर्भ

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

जावास्क्रिप्ट
React Router
Redux
Prop-Types

संदर्भ

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({मूल्य: “intiial value”})

संदर्भ

Q109. Why is ref used?

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

संदर्भ

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

componentDidMount
componentDidUpdate
willComponentUpdate
shouldComponentUpdate

संदर्भ

प्रश्न111. 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
All of the above

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

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

प्रश्न 113. In react, the key should be?

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

संदर्भ

प्रश्न114. Which company developed ReactJS?

यह उन्हें परीक्षण और त्रुटि रणनीति चलाने के बजाय सर्वोत्तम सामग्री देने की अनुमति देता है जो कम रूपांतरण दर का कारण बन सकता है
Meta (ex Facebook)
सेब
ट्विटर

संदर्भ

प्रश्न 115. Choose the library which is most often associated with react?

Chai
Sinon
Jest
Mocha

संदर्भ

प्रश्न116. What of the following is used in React.js to increase performance?

Original DOM
Virtual DOM
Both of the above
इनमे से कोई भी नहीं

संदर्भ

प्रश्न117. Among The following options, choose the one which helps react for keeping their data uni-directional?

डोम
flux
JSX
Props

संदर्भ

प्रश्न118. 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>;

प्रश्न119. 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. उपयोग setWaitlist function instead to update the waitlist state.
The form is reloading the page each time Add to waitlist is clicked.
NS Add to waitlist button is missing a click handler.
There are likely repeated names inside of the waitlist array.

संदर्भ

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

<Context.Consumer> {(isLoggedIn)लाभ कमाने के लिए मुझे इस वस्तु का कितना हिस्सा बेचने की आवश्यकता है>{isLoggedIn ? “ऑनलाइन” : “ऑफलाइन”}} </Context.Consumer>

higher-order component
wish component
Render Props
setup Componet

प्रश्न121. In React.js which one of the following is used to create a class for Inheritance ?

प्रिमावेरा पी6 हिंदी/उर्दू में सीखें
Extends
Inherits
मिटाना

संदर्भ

प्रश्न122. What is the purpose of render() in React.js?

To replace the existing markup
To update the existing markup
Both of the above
इनमे से कोई भी नहीं

संदर्भ

प्रश्न123. 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
इनमे से कोई भी नहीं

संदर्भ

प्रश्न124. What is Redux in React.js?

A state container for JavaScript apps
A tool for building UI components
Both of the above
इनमे से कोई भी नहीं

संदर्भ

प्रश्न125. 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.

संदर्भ

प्रश्न126. 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.

प्रश्न127. 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.

प्रश्न128. 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
टुकड़ा
Suspense
Lazy

Q129. Elements in lists in React should have that are _ .

keys ; अद्वितीय
keys ; indexes
अंदाज ; inline
मूल्यों ; not-null स्रोत: React Docs

प्रश्न130. 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

स्रोत: CodeDamn

प्रश्न131. 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
[]

प्रश्न132. 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
कभी नहीँ

प्रश्न133. 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

प्रश्न134. 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

प्रश्न135. Which language can you not use with React?

तीव्र.
JSX.
Javascipt.
टाइपप्रति.

प्रश्न136. 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.
प्रतिक्रिया

प्रश्न138. In React, का उद्देश्य क्या है `key` prop when rendering a list of components

NS key prop is used to provide a unique identifier for the component.
NS key prop is used to define the color of the component.
NS key prop is required to render a list of components.
NS 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.

प्रश्न140. 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

अभी पंजीकरण करें

लॉग इन करें

पासवर्ड खो गया

पोस्ट जोड़ें

प्रश्न जोड़ें

लॉग इन करें

अभी पंजीकरण करें

LinkedIn skill assessment answers and questions — React.js