React Js Interview Questions And Answers

React Js Interview Questions list for experienced

  1. What are the features of React js?
  2. Can web browser read JSX directly?
  3. How we create an event in React.js?
  4. How to install react?.
  5. How I can use useState() in React?.
  6. What are role of keys in React?
  7. What is the JSX?.
  8. How jsx works?.
  9. What are difference between functional component and class components?
  10. What are the advantages of using React?
  11. What are limitation of React?.
  12. What are the role of control components in react?.
  13. What are forms in react.js?
  14. How many ways are there for writing comments in react.js?
  15. What are the components in react.js?
  16. What is the use of render() in react.js?
  17. What are props in react js?
  18. What is 'create-react-app'?
  19. What are the methods of react-dom packages?
  20. Define the term 'redux' in react.
  21. What are the life cycle steps of reactjs?
  22. What is the Redux?
  23. Difference between flux and redux?.
  24. What is the use of redux in react?.
  25. What is React Nesting Components in reactjs?
  26. Explain setState() Method in reactjs?
  27. What is 'store' feature in redux in react.js?
  28. What is error boundaries in reactjs?
  29. What are the issues of using MVC architecture in reactjs?
  30. Explain about the woking styles of nodejs?.
  31. Difference between node.js and angular?.
  32. Why is Node.js single-thread?.
  33. What is Reduction and synthetic events?
  34. What is Mounting and Demounting in Reactjs?
  35. What is react hooks and fragments?
  36. What is controlled components and need to use props.children?
  37. What is ref() and ComponentWillMount()?
  38. What is the virtual DOM? How does react use the virtual DOM to render UI?.
  39. Programmatically navigate using React router?
  40. Loop inside React JSX?
  41. How do I conditionally add attributes to React components?
  42. What is react native?
  43. What kind of documentation react native uses?
  44. How function interact within the component system in react?
  45. What is the difference between React Native and React?
  46. How can I insert a line break into a component in React Native?
  47. Is using Redux with Next.js an anti-pattern?
  48. Major difference between Real DOM and Virtual DOM?
  49. Name the important features of react?
  50. What is strict mode,reacted portal, context in React js?
  51. Material UI and Grid system?
  52. how to import the material ui icons?
  53. How can we change reactjs project(folder) name?
  54. Difference between Java and Python.
  55. Why hooks are best things in reactjs?
  56. What is ReactDOM in Reactjs?
  57. How to make forms in reactjs?
  58. When to use react context in reactjs?
  59. How to remove duplicate value from option in react js?
  60. What is ReactJS Pure Components?
  61. What is node package manager in reactjs?
  62. What are forms in React?
  63. What are the rules that must be followed while using React Hooks?
  64. What are Custom Hooks?
  65. What are the most common approaches for styling a React application?
  66. What is a higher-order component in React?
  67. Difference between createReadStream and readFile in Node.js?
  68. Differentiate between process.nextTick() and setImmediate()
  69. What are exit codes in Node.js.?
  70. Explain Event loop in Node.js?
  71. What is Event-driven programming?
  72. What is the purpose of render() in React.
  73. What is a state in React and how is it used?
  74. How are Actions defined in React.js?
  75. Explain the purpose of render() in React.
  76. What are the limitation of react.js?
  77. What are Higher-Order Components in react.js?
  78. Why React uses className over class attribute?
  79. What will happen if you use props in initial state in reactjs?
  80. What is strict mode in React.js?
  81. Inject nestjs service from another module?
  82. nestjs vs plain express performance?
  83. What are portals in React?
  84. How we can implement Server Side Rendering or SSR in react.js easily?
  85. Can you force a component to re-render without calling setState?
  86. How do we access props in attribute quotes?
  87. What are the limitations of React?
  88. How to use nestjs Logging service?
  89. What is the nestjs error handling approach (business logic error vs. http error)?
  90. What are controlled components in react.js?
  91. What are uncontrolled components in react.js?
  92. Define children prop in react.js?
  93. What are fragments in react.js?
  94. Why fragments are better than container div in react.js?
  95. How to use innerHTML in React.js ?
  96. How to use styles in React.js?
  97. What is the impact of indexes as keys in react.js?
  98. How you use decorators in React.js?
  99. What is the purpose of getDerivedStateFromProps() lifecycle method in react.js?
  100. What are render props in React.js?
  101. What is the purpose of push() and replace() methods of history of react.js?
  102. How to listen to state changes in react.js?
  103. How to re-render the view when the browser is resized in react.js?
  104. When should I use curly braces for ES6 import in react.js?
  105. What's the difference between tsc (TypeScript compiler) and ts-node?
  106. How to call function in parent component in React.js?
  107. How to bind methods or event handlers in JSX callbacks in react.js?
  108. What are inline conditional expressions in react.js?
  109. Is it possible to add Authentication to access to NestJS' Swagger Explorer?
  110. How to implement pagination in NestJS with TypeORM?
  111. In Nest.js, how to get a service instance inside a decorator?
  112. Access the raw body of Stripe webhook in Nest.js?
  113. How to create nested routes with parameters using NestJS?
  114. How to copy non-ts files to dist when building typescript?
  115. Explain Redux and Flux in brief?
  116. What are the advantages of using Redux?
  117. What are some of the major features of Redux DevTools?
  118. What are constants in Redux?
  119. Describe what is meant by a "store" in Redux.
  120. What are the Benefits of Redux?
  121. What Are React Hooks?
  122. What Are The Three Principles That Redux Follows?
  123. What Is The Significance Of Store In Redux?
  124. How Is Redux Different From Flux?
  125. Handling errors with redux-toolkit?
  126. How to use redux-toolkit createSlice with React class components?
  127. Redux saga & redux toolkit?
  128. Redux Toolkit - Reseting state?
  129. When should I add Redux to a React app?
  130. Push is not a function in redux?
  131. Explain State Hook with an example?
  132. Explain Effect Hook with an example?
  133. Do Hooks work with static typing?
  134. What are the differences between a Class component and Functional component?
  135. How to use google analytics with next.js app?
  136. Next.js: ComponentWillMount vs. getInitialProps?
  137. Define a procedure and process to ensure solution delivery.

React Js interview questions and answers on advance and basic React Js with example so this page for both freshers and experienced condidate. Fill the form below we will send the all interview questions on React Js also add your Questions if any you have to ask and for apply in React Js Tutorials and Training course just send a mail on info@pcds.co.in in detail about your self.

Top React Js interview questions and answers for freshers and experienced

What is React Js ?

Answer : React.js is a JavaScript library that helps build user interfaces for websites and web applications. It provides a set of tools and components that make it easier to create interactive and dynamic user interfaces.

Questions : 1 :: What are the features of React js?

Here are some key features of React: Component-Based Architecture: React follows a component-based approach, where the user interface is divided into reusable, self-contained components....View answers

Questions : 2 :: Can web browser read JSX directly?

No, web browsers cannot read JSX directly. JSX is a syntax extension for JavaScript used with React, and it is not understood by web browsers natively. Web browsers can only interpret and execute...View answers

Questions : 3 :: How we create an event in React.js?


In React.js, you can create an event by attaching event handlers to JSX elements. Event handlers are functions that get triggered when a specific event occurs, such as a user clicking a button,...View answers

Questions : 4 :: How to install react?.

To install React, you can use Create React App, a popular command-line tool provided by Facebook to quickly set up a new React project with all the necessary dependencies and configurations. Here's...View answers

Questions : 5 :: How I can use useState() in React?.

You can use the useState() hook in React to add state to functional components. The useState() hook is a built-in React hook that allows you to add state variables and update them within functional...View answers

Questions : 6 :: What are role of keys in React?


In React, keys are special attributes used when rendering arrays of elements, such as when mapping over a list of items to generate a list of React components. The key prop serves as a unique...View answers

Questions : 7 :: What is the JSX?.

JSX stands for JavaScript XML. When i m using the jsx It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).

Questions : 8 :: How jsx works?.

using jsx below code has been alalyzed.const container = (<div> <p>This is a text</p></div>);ReactDOM.render(container,rootElement);

Questions : 9 :: What are difference between functional component and class components?


The functional component and class component has more role at react. , functional components were called stateless components and were behind class components on a feature basis. After the...View answers

Questions : 10 :: What are the advantages of using React?

1. Use of data object model for more efficiency. 2. React is also a seo friendly. 3. React uses component-based architecture for developing applications. Components are independent and reusable...View answers

Questions : 11 :: What are limitation of React?.

React is not a full volume framework as its only a library. The components of React are numerous and will take time to fully grasp the benefits of all. Coding might become complex as it will make...View answers

Questions : 12 :: What are the role of control components in react?.

In a controlled component, the value of the input element is controlled by React. We store the state of the input element inside the code, and by using event-based callbacks, If we want to change...View answers

Questions : 13 :: What are forms in react.js?

The forms enabled users to interact with web applications.Users can easily interact with application and put necessary infromation whenever required.Forms contain certain element like button,text...View answers

Questions : 14 :: How many ways are there for writing comments in react.js?

There are basically two ways for writing comments in code:1)Single line comments- In single line comments,we only apply comments in one line only. eg- //retrun sum of two variable 2)Multi line...View answers

Questions : 15 :: What are the components in react.js?

Components are usually a piece of UI(User Interface).Components are also called as building block of react app.There are two major components in react.js: 1)Functional Components- They don't have no...View answers

Questions : 16 :: What is the use of render() in react.js?

render() function is required for each components. render() returns in html and displayed in components.if we want to render more than one elements,all must be inside one parents tag like...View answers

Questions : 17 :: What are props in react js?

Props means properties in react js ,which is used for passing data from parents to child.Props is just a communication channel between componets in react js. It is always moving from parents to child...View answers

Questions : 18 :: What is 'create-react-app'?

'Create-react-app' is one of the command line tool which allow to create basic react app for the first.Before working with react js , we have to install nodejs in our system. And after that we have...View answers

Questions : 19 :: What are the methods of react-dom packages?

Important methods of react-dom packages are:1)render()2)hydrate()3)createPortal()4)unmountComponentAtNode()5)findDOMNode()

Questions : 20 :: Define the term 'redux' in react.

'redux' is a library for front end development.It is a container for javascript application and is used for maintaining application state management.we can test and run application developed with...View answers

Questions : 21 :: What are the life cycle steps of reactjs?

There are 3 major lifecycle steps in react js:1)Initialization 2)State/Property updates3)Destruction these three are the lifecycle steps.

Questions : 22 :: What is the Redux?

Redux is an open-source library made using the scripting language JavaScript. Redux's primary use lies in managing and centralizing application state and it is usually used along with JavaScript...View answers

Questions : 23 :: Difference between flux and redux?.

There have variious difference between flux and tredux is 1. Redux includes a single Store per application. Rather than placing state information in multiple Stores across the app, Redux keeps...View answers

Questions : 24 :: What is the use of redux in react?.

Redux uses in React is the official React binding for Redux which allows to the components in React to read the data from a Redux Stores, and dispatch Actions to the Store for updating the data. The...View answers

Questions : 25 :: What is React Nesting Components in reactjs?

In react.js ,we can also nest component inside within one another.It helps in creating more complex user interfaces.any components that are nested inside parents components are callled child...View answers

Questions : 26 :: Explain setState() Method in reactjs?

setState() method is used for changing state objects, components will be updated and call the render() method.setState() method enqueues all of the updates made to the components and instruct react...View answers

Questions : 27 :: What is 'store' feature in redux in react.js?

Redux has a feature called 'store' that allow us to save the application entire state at one place.All the components State are stored in the store so that we will get regular updates directly from...View answers

Questions : 28 :: What is error boundaries in reactjs?

It helps us to catch javascript error in the child components.It is most used for log the error and show a fallback UI.Empty tags are used in react for declaring fragments. child props are used to...View answers

Questions : 29 :: What are the issues of using MVC architecture in reactjs?

Major challenges we are facing :1)DOM handling is quiet expensive.2)Most of the time application are slow and inefficient.3)Because of the circular function,complex model has been created arounds...View answers

Questions : 30 :: Explain about the woking styles of nodejs?.

Node.js is used in a variety of domains. But, it is very well regarded in the design of the following concepts: 1. Network application2. Distributed computing3. Responsive web apps4....View answers

Questions : 31 :: Difference between node.js and angular?.

There have various difference between node.js and angular are:- 1 Used in situations where scalability is a requirement but in angular, Best fit for the development of real-time applications. 2....View answers

Questions : 32 :: Why is Node.js single-thread?.

Node.js works on the single-threaded model to ensure that there is support for asynchronous processing. With this, it makes it scalable and efficient for applications to provide high performance and...View answers

Questions : 33 :: What is Reduction and synthetic events?

Reduction is a application method of handling state. Synthetic events is actually a cross browser wrapper around the browser native event. these event has interfacestopPropogation() and...View answers

Questions : 34 :: What is Mounting and Demounting in Reactjs?

1) The process of attaching the element to the DCOM is called Mounting.2)The process of detaching the element from the DCOM is called Demounting. 'Pros-type' library allows us to perform runtime...View answers

Questions : 35 :: What is react hooks and fragments?

React hook allows us to use state,and other react features without writing a class.Fragments keyword is used to group a list of children component without using any extra nodes to the...View answers

Questions : 36 :: What is controlled components and need to use props.children?

Controlled components are used for controlling input elements.props.children allows us to pass a component as data to other components.we can use reaction serve to do the server-side...View answers

Questions : 37 :: What is ref() and ComponentWillMount()?

Ref is an attribute to the DOM elements.The primary purpose of the ref is to find DOM elements easily.The function is called after the DOM element removes from DOM, and it will automatically swipe...View answers

Questions : 38 :: What is the virtual DOM? How does react use the virtual DOM to render UI?.

As stated by the react team, virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as the...View answers

Questions : 39 :: Programmatically navigate using React router?

With react-router I can use the Link element to create links which are natively handled by react router. I see internally it calls this.context.transitionTo(...). I want to do a navigation. Not...View answers

Questions : 40 :: Loop inside React JSX?

how the function tbody is being passed a for loop as an argument – leading to a syntax error. So you can make an array, and then pass that in as an argument: var rows = [];for (var i = 0; i...View answers

Questions : 41 :: How do I conditionally add attributes to React components?

Apparently, for certain attributes, React is intelligent enough to omit the attribute if the value you pass to it is not truthy. For example: const InputComponent = function() { const required =...View answers

Questions : 42 :: What is react native?

React native is a framework that combines the native development with react to build UI(User Interface).React native is totally written in javascript using react. This is an advantage of react...View answers

Questions : 43 :: What kind of documentation react native uses?

React native offer general documentations.The framewrok depends upon external dev kits.The doucmentation is not as straightforward. React native is widely adopted and much popular app development...View answers

Questions : 44 :: How function interact within the component system in react?

Example-ComponentA imports App.js and attempts to assign App.functionA to functionB and then call it in the JSX. This results in a failure basically saying that the function is not defined. import...View answers

Questions : 45 :: What is the difference between React Native and React?

React is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. It follows the concept of reusable components. React Native...View answers

Questions : 46 :: How can I insert a line break into a component in React Native?

React won't like you putting HTML <br /> in where it's expecting text, and ns aren't always rendered unless in a <pre> tag. Perhaps wrap each line-breaked string (paragraph) in a...View answers

Questions : 47 :: Is using Redux with Next.js an anti-pattern?

Yes, We can create a Redux Provider as a wrapper and wrap the component we need, the redux context will be automatically initialized and provided within that component. Example By code shown...View answers

Questions : 48 :: Major difference between Real DOM and Virtual DOM?

Real DOM- It is updated slowly. It allows a direct upload from HTML.It waste too much memory.Virtaul DOM- It update faster. It cannot be used to update HTML directly.Memory consumption is...View answers

Questions : 49 :: Name the important features of react?

1) It allows us to use 3rd party library very easily.2)consumes minimum time.3) Fast developmet.4)Simplicity and Composable.5) Fully supported by facebook.6)React...View answers

Questions : 50 :: What is strict mode,reacted portal, context in React js?

strict mode- It allows us to run checks and warning for react component. It run only on development build.                    It highlight the issue...View answers

Questions : 51 :: Material UI and Grid system?

It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into...View answers

Questions : 52 :: how to import the material ui icons?

Icons are not part of the material-ui/core so it must be install using two commands. If you are using npm npm install @material-ui/corenpm install @material-ui/icons If you are using yarn yarn...View answers

Questions : 53 :: How can we change reactjs project(folder) name?

while creating a reactjs app.. just followed the following command:npm create-react-app routerHere router is my folder name.Now I want to change that name to react-router-example

Questions : 54 :: Difference between Java and Python.

Java                                               Python Compiled ...View answers

Questions : 55 :: Why hooks are best things in reactjs?

React is a most popular front-end language, and is famous for its ease and readability and it also allow company to adopt its environment very easily.React mainly used class components, with react...View answers

Questions : 56 :: What is ReactDOM in Reactjs?

ReactDOM is a package that provides specific DOM methods at the top level of web app to enable efficient way of managinig web pages.ReactDOM provides the developers with an API and it contain the...View answers

Questions : 57 :: How to make forms in reactjs?

Forms are really important for any website for login, signup. It is easy to make a form but forms in React work a little differently as compared to others. Code:import React from 'react';import...View answers

Questions : 58 :: When to use react context in reactjs?

Whenever we want to store to keep your states or variables and we have to use them elsewhere in our program ,we use context.When we have two or more levels(height) in our component tree, it is viable...View answers

Questions : 59 :: How to remove duplicate value from option in react js?

We need to remove redundant value from the second array before looping. <select id="lang" value={comment.ChannelName} autoFocus className="btn_primary" onChange={e => setPlayer(e.target.value,...View answers

Questions : 60 :: What is ReactJS Pure Components?

ReactJS has provided us a Pure Component. If we extend a class with Pure Component, there is no need for shouldComponentUpdate() Lifecycle Method. ReactJS Pure Component Class compares current state...View answers

Questions : 61 :: What is node package manager in reactjs?

node package manager perfrom very important role in reactjs.without npm, we can't start the terminal and give commands.npm is an abbreviation used for the node package manager. It is a package...View answers

Questions : 62 :: What are forms in React?

React employs forms to enable users to interact with web applications. Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain...View answers

Questions : 63 :: What are the rules that must be followed while using React Hooks?

There are 2 rules which must be followed while you code with Hooks: 1) React Hooks must be called only at the top level. It is not allowed to call them inside the nested functions, loops, or...View answers

Questions : 64 :: What are Custom Hooks?

A Custom Hook is a function in Javascript whose name begins with ‘use’ and which calls other hooks. It is a part of React v16.8 hook update and permits you for reusing the stateful logic...View answers

Questions : 65 :: What are the most common approaches for styling a React application?

CSS Classes-React allows class names to be specified for a component, like class names are specified for a DOM element in HTML. When developers first start using React after developing traditional...View answers

Questions : 66 :: What is a higher-order component in React?

A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common...View answers

Questions : 67 :: Difference between createReadStream and readFile in Node.js?

readFile refers to a fully buffered process in which a response is only returned when the complete file is pushed into the buffer and read. In contrast, createReadStream refers to a process only...View answers

Questions : 68 :: Differentiate between process.nextTick() and setImmediate()

process.nextTick() and setImmediate() are two functions of the Timers module that allow the control of in executing the code in the event loop but both differ in their execution and are executed at...View answers

Questions : 69 :: What are exit codes in Node.js.?

Exit codes in Node.js are specific codes used to finish off a process. Examples of the exit codes in Node.js are: 1) Internal Exception handler Run-time failure2) Internal JavaScript Evaluation...View answers

Questions : 70 :: Explain Event loop in Node.js?

The Event loop in Node.js handles all asynchronous callbacks in an application. It is an essential part of Node.js as Node.js (or JavaScript) is a single-threaded, event-driven language. A listener...View answers

Questions : 71 :: What is Event-driven programming?

This is a form of programming that is based on events. Events can be a mouse click, a keypress, etc. When an event happens the information required is retrieved by issuing callbacks that are already...View answers

Questions : 72 :: What is the purpose of render() in React.

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered,...View answers

Questions : 73 :: What is a state in React and how is it used?

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior....View answers

Questions : 74 :: How are Actions defined in React.js?

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux,...View answers

Questions : 75 :: Explain the purpose of render() in React.

It is mandatory for each React component to have a render() function. Render function is used to return the HTML which you want to display in a component. If you need to rendered more than one HTML...View answers

Questions : 76 :: What are the limitation of react.js?

Limitations of React are listed below: 1) React is just a library, not a full-blown framework2) Its library is very large and takes time to understand3) It can be little difficult for the novice...View answers

Questions : 77 :: What are Higher-Order Components in react.js?

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React's compositional nature.const EnhancedComponent =...View answers

Questions : 78 :: Why React uses className over class attribute?

class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principal reason why React uses className instead of class. Pass a string as the className prop. render() { return...View answers

Questions : 79 :: What will happen if you use props in initial state in reactjs?

If the props on the component are changed without the component being refreshed, the new prop value will never be displayed because the constructor function will never update the current state of the...View answers

Questions : 80 :: What is strict mode in React.js?

React.StrictMode is a useful component for highlighting potential problems in an application. Just like <Fragment>, <StrictMode> does not render any extra DOM elements. It activates...View answers

Questions : 81 :: Inject nestjs service from another module?

You have to export the ItemsService in the module that provides it: @Module({ controllers: [ItemsController], providers: [ItemsService], exports: [ItemsService] ^^^^^^^^^^^^^^^^^^^^^^^})export class...View answers

Questions : 82 :: nestjs vs plain express performance?

I've just tested performance on a simple nest's controller, that returns text on a get request (no database). And the same simple GET controller (middleware) with express. I used WRK tool to test...View answers

Questions : 83 :: What are portals in React?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Eg- ReactDOM.createPortal(child, container)The first argument is any...View answers

Questions : 84 :: How we can implement Server Side Rendering or SSR in react.js easily?

React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available, which follows the same pattern as on the client side. import ReactDOMServer from...View answers

Questions : 85 :: Can you force a component to re-render without calling setState?

By default, when component's state or props change, component will re-render. If your render() method depends on some other data, we can tell React that the component needs re-rendering by calling...View answers

Questions : 86 :: How do we access props in attribute quotes?

React (or JSX) doesn't support variable interpolation inside an attribute value. <img className='image' src='images/{this.props.image}' />But we can put any JS expression inside curly braces as...View answers

Questions : 87 :: What are the limitations of React?

Limitation of reactjs are listed below: 1) React is just a view library, not a full framework.2) There is a learning curve for beginners who are new to web development.3) Integrating React into a...View answers

Questions : 88 :: How to use nestjs Logging service?

Better than accessing the Logger statically is to create an instance for your class: @Controller()export class AppController { private readonly logger = new Logger(AppController.name); @Get() async...View answers

Questions : 89 :: What is the nestjs error handling approach (business logic error vs. http error)?

Let's assume your business logic throws an EntityNotFoundError and you want to map it to a NotFoundException. For that, you can create an Interceptor that transforms your...View answers

Questions : 90 :: What are controlled components in react.js?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component. Like every state mutation will have an associated handler function. For...View answers

Questions : 91 :: What are uncontrolled components in react.js?

The Uncontrolled Components are the ones that store their own state internally, and query the DOM using a ref to find its current value when we need it. This is a bit more like traditional...View answers

Questions : 92 :: Define children prop in react.js?

Children is a prop (this.props.children) that allows us to pass components as data to other components, just like any other prop we use. Component tree put between component's opening and closing tag...View answers

Questions : 93 :: What are fragments in react.js?

It's a common pattern in React which is used for a component to return multiple elements. Fragments make group a list of children without adding extra nodes to the DOM. render() { return (...View answers

Questions : 94 :: Why fragments are better than container div in react.js?

There are many reasons why Fragments are better: 1) Fragments are a bit faster and use less memory by not creating an extra DOM node. 2) This only has a real benefit on very large and deep trees.3)...View answers

Questions : 95 :: How to use innerHTML in React.js ?

The SetInnerHTML attribute is React's replacement for using innerHTML in the browser DOM. Just like innerHTML, it is risky to use this attribute considering cross-site scripting (XSS) attacks. You...View answers

Questions : 96 :: How to use styles in React.js?

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS...View answers

Questions : 97 :: What is the impact of indexes as keys in react.js?

Keys should be stable, predictable, and unique so that React can keep track of elements.This limits the optimizations that React can do. {todos.map((todo, index) => <Todo {...todo} key={index}...View answers

Questions : 98 :: How you use decorators in React.js?

We can decorate our class components, which is the same as passing the component into a function. Decorators are flexible and readable way of modifying component...View answers

Questions : 99 :: What is the purpose of getDerivedStateFromProps() lifecycle method in react.js?

The new static getDerivedStateFromProps() lifecycle method is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to...View answers

Questions : 100 :: What are render props in React.js?

Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses render prop which returns a React element. <DataProvider...View answers

Questions : 101 :: What is the purpose of push() and replace() methods of history of react.js?

A history instance has two methods for navigation purpose. push()replace() If we think of the history as an array of visited locations, push() will add a new location to the array and replace()...View answers

Questions : 102 :: How to listen to state changes in react.js?

The componentDidUpdate lifecycle method will be called when state changes. we can compare provided state and props values with current state and props to determine if something meaningful...View answers

Questions : 103 :: How to re-render the view when the browser is resized in react.js?

We can listen to the resize event in componentDidMount() and then update the dimensions (width and height). We should remove the listener in componentWillUnmount() method. class WindowDimensions...View answers

Questions : 104 :: When should I use curly braces for ES6 import in react.js?

var initialState = { todo: { todos: [ {id: 1, task: 'Finish Coding', completed: false}, {id: 2, task: 'Do Laundry', completed: false}, {id: 2, task: 'Shopping Groceries', completed: false}, ]...View answers

Questions : 105 :: What's the difference between tsc (TypeScript compiler) and ts-node?

The main difference is that tsc transpile all the file according to your tsconfig. Instead, ts-node will start from the entry file and transpile the file step by step through the tree based on the...View answers

Questions : 106 :: How to call function in parent component in React.js?

<parent> <child/> <button onClick={myFunc}>call func</button></parent><child> const myFunc = () => { ... } return{...View answers

Questions : 107 :: How to bind methods or event handlers in JSX callbacks in react.js?

1) Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for React event handlers defined as class methods. Normally we bind them in...View answers

Questions : 108 :: What are inline conditional expressions in react.js?

We can embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator &&.<h1>Hello!</h1>{ messages.length > 0 && !isLogin?...View answers

Questions : 109 :: Is it possible to add Authentication to access to NestJS' Swagger Explorer?

Securing access to your Swagger with HTTP Basic Auth using NestJS with Express First run npm i express-basic-auth then add the following to your main.{ts,js}: // add importimport * as basicAuth...View answers

Questions : 110 :: How to implement pagination in NestJS with TypeORM?

You can find some nice example in this project. In short typeorm has a really nice method specific to this usecase findAndCount. async findAll(query): Promise<Paginate> { const take =...View answers

Questions : 111 :: In Nest.js, how to get a service instance inside a decorator?

Late to the party, but since I had a similar problem (Use global nest module in decorator) and stumbled upon this question. import { Inject } from '@nestjs/common';export function yourDecorator() {...View answers

Questions : 112 :: Access the raw body of Stripe webhook in Nest.js?

I need to access the raw body of the webhook request from Stripe in my Nest.js application. Following this example, I added the below to the module which has a controller method that is needing the...View answers

Questions : 113 :: How to create nested routes with parameters using NestJS?

This is what I'm currently using, but what if I have many children routes? I don't want to have a single, fat Controller class. Ideally I would be able to create different child routes inside...View answers

Questions : 114 :: How to copy non-ts files to dist when building typescript?

For your case, you can try something like this: "assets":["**/Mail/templates/*"]Or if your templates all have a specific filetype (I am assuming its called .template), this should also...View answers

Questions : 115 :: Explain Redux and Flux in brief?

Redux is an open-source library made using the scripting language JavaScript. Redux's primary use lies in managing and centralizing application state and it is usually used along with JavaScript...View answers

Questions : 116 :: What are the advantages of using Redux?

Redux provides extremely easy state transfer between the components.The states are always predictable in Redux and its maintenance is relatively easy.Debugging and testing code in Redux is simple...View answers

Questions : 117 :: What are some of the major features of Redux DevTools?

Redux DevTools is nothing but a time travel environment that makes it possible for us to live edit in Redux with a variety of functionalities like action replay, hot reloading, and customizable...View answers

Questions : 118 :: What are constants in Redux?

Constants in Redux help us in easily finding all the usages of a particular functionality across our entire project when we are using an Integrated Development Environment (IDE). Using constants, we...View answers

Questions : 119 :: Describe what is meant by a "store" in Redux.

“Store” in Redux is used to carry together all the states, reducers, and actions which create the app. Some of the responsibilities of the store are as follows: The state of the current...View answers

Questions : 120 :: What are the Benefits of Redux?

Maintainability: The maintenance of Redux becomes easier due to strict code structure and organization.Organization: code organization is very strict; hence the stability of the code is high, which...View answers

Questions : 121 :: What Are React Hooks?

Hooks Are A New Addition In React 16.8. They Let You Use State And Other React Features Without Writing A Class. With Hooks, You Can Extract Stateful Logic From A Component So It Can Be Tested...View answers

Questions : 122 :: What Are The Three Principles That Redux Follows?

-Single Source Of Truth: The State Of Your Entire Application Is Stored In An Object/State Tree Inside A Single Store. The Single State Tree Makes It Easier To Keep Changes Over Time. It Also Makes...View answers

Questions : 123 :: What Is The Significance Of Store In Redux?

A Store Is An Object Which Holds The Application's State And Provides Methods To Access The State, Dispatch Actions And Register Listeners Via Subscribe. The Entire State Tree Of An Application Is...View answers

Questions : 124 :: How Is Redux Different From Flux?

Redux-- Redux Is An Open-Source JavaScript Library Used To Manage Application State- Store’s State Is Immutable- Can Only Have A Single-Store- Uses The Concept Of ReducerFlux- Flux Is An...View answers

Questions : 125 :: Handling errors with redux-toolkit?

Per the docs, RTK's createAsyncThunk has default handling for errors - it dispatches a serialized version of the Error instance as action.error. If you need to customize what goes into the rejected...View answers

Questions : 126 :: How to use redux-toolkit createSlice with React class components?

Class vs. function components and redux-toolkit vs "vanilla" redux are two independent decisions that don't have any impact on each other. (Though you should be aware that function components and...View answers

Questions : 127 :: Redux saga & redux toolkit?

If you're interested in creating sagas that can resolve/reject async thunk actions then have a look at the saga-toolkit package - I created and use. slice.js import { createSlice } from...View answers

Questions : 128 :: Redux Toolkit - Reseting state?

You need to write a reducer for that by hand - you can still use RTK everywhere else. const reducer = combineReducers({ user, post,}) const resetAction = createAction('reset') const...View answers

Questions : 129 :: When should I add Redux to a React app?

React is a UI framework that takes care of updating the UI in response to the “source of truth” that is usually described as a state “owned” by some component. Thinking in...View answers

Questions : 130 :: Push is not a function in redux?

The main problem here is that you are setting the value of state.products to the value returned by push(). The push() method does not return an array. It mutates the array, which you should not do in...View answers

Questions : 131 :: Explain State Hook with an example?

State Hooks are primarily used to refer to the states of the components in React and can be used to change them on the runtime as per the functionality of your web application. An example below...View answers

Questions : 132 :: Explain Effect Hook with an example?

If an action is performed on a webpage, an Effect Hook may be used to transfer a side effect to another part of the DOM. The example below updates the document title of the webpage when a button is...View answers

Questions : 133 :: Do Hooks work with static typing?

Static typing is a process of checking code during compile time to ensure that all variables are statically typed. Hooks are primarily functions and have been designed in a way to ensure that all...View answers

Questions : 134 :: What are the differences between a Class component and Functional component?

Class Components Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.Class components extend from React.Component.In here you have to use this keyword to access...View answers

Questions : 135 :: How to use google analytics with next.js app?

To correctly initialize gtag, do the following in _document.js or wherever you defined Head: import { Head } from 'next/document'; export default class MyDocument extends Document { render() {...View answers

Questions : 136 :: Next.js: ComponentWillMount vs. getInitialProps?

GetInitialProps GetInitialProps is a usually an async function which is good for asynchronous operations at the server and passes data to the page as props. 1. In Next.js it always runs at the...View answers

Questions : 137 :: Define a procedure and process to ensure solution delivery.

To ensure successful solution delivery, it's essential to follow a well-defined procedure and process. Here's a general outline of the steps involved: Requirement Gathering: Engage with...View answers
More Question

Ask your interview questions on React Js

Write Your comment or Questions if you want the answers on React Js from React Js Experts
Name* :
Email Id* :
Mob no* :
Question
Or
Comment* :
 





Disclimer: PCDS.CO.IN not responsible for any content, information, data or any feature of website. If you are using this website then its your own responsibility to understand the content of the website

--------- Tutorials ---