• New Admissions Open for Career and Placement Courses.

React Interview Questions

React may be a library for serving to developers build user interfaces (UIs) as a tree of little items referred to as parts.

The major features of React are:
o React uses Virtual DOM instead of RealDOM because it considers that RealDOM manipulations are expensive then it.
o It Supports server-side rendering.
o It Follows Unidirectional* data flow or data binding.
o It Uses reusable/composable UI components to develop the view.

JSX is the syntax extention to the javascript,it gives the syntactinc elements to the React.createElement() function andhelpsus to code like HTML type template like syntax.
In the example below text inside

tag return as JavaScript function to the render function.
class App extends React.Component {
render() {
return(

{‘Welcome to Tops Technologies!’}

)
}
}

There are two possible ways to create a component.
i. Function Components: one of the simplest way to create a component is to use javascript functions that accepts props as first parameter and returns React element:
ii. Function Greeting({ message }) {
iii. Return

{`Hello user, ${message}`}

}
iv. Class Components: We can use ES6 class to define the component.The above function component can be written as:
v. Class Greeting extends React.Component {
vi. render() {
vii. return

{`Hello user, ${this.props.message}`}

viii. }
}

When the component needs the lifecycle methods then use class Component otherwise we can use function component.

React.Pure Component and React.Component both are same just shouldComponentUpdate()method is handled by the pure component method.at the time when the props state changed the pure component compares both props and state, while on another hand the auto rendering will occur.

The input given to the components are the props. That are the single values that are given to the components on the creation time using a naming convention similar to HTML tag attributes.
The primary purpose of props in React is to provide the following component functionality:
. Pass custom data to your component.
i. Trigger state changes.
ii. Use via this.props.reactProp inside component’s render() method.
For example, let us create an element with reactProp property:

This reacts,.Prop()method or the name that you give to the method becomes a property attached to React’s native props object and it originally exists on all components created using the React library.

Props and State are both javascript objects holding the information of the output created by rendering, but they are different in functionality with the components.
Props are passed to the components by function type while the state is managed within components similar to variables declared in the function.

We can’t auto-render the content by updating states.
//Wrong
this.state.message = ‘Hello tops!’
We have to use setState instead of this method, this method schedules an update in components’ object when the state changes it sends the response by re-rendering.
//Correct
this.setState({ message: ‘Hello World’ })
Note: You can directly assign to the state object either in the constructor or using the latest javascript’s class field declaration syntax.

When the setState function is invoked the call back function is used after the component is rendered.
Note: It is recommended to use lifecycle method rather than this callback function.
setState({ name: ‘Ramesh’ }, () => console.log(‘The name has updated and component re-rendered’))

We can use arrow function to wrap en event handler into function and pass parameter.

Synthetic Event is for a cross-browser wrapper around the browser’s native event.it has the same API as the browser’s native event.
StopPropagation() and preventDefault() are different except all methods work across all browsers.

A Key is a string that is included while creating the array, it is helpful for keeping track of what is added or what is changed or removed.
Most often we use IDs from our data as keys:
const todoItems = todos.map((todo) =>

  • {todo.text}

)
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
const todoItems = todos.map((todo, index) =>

  • {todo.text}

)

We can use the ref to return a reference to the element. It is much helpful in the case of need for direct access of DOM element or instance of the component.

Virtual DOM means the in-memory representation of the Real DOM. The Real DOM contains the representation of the UI that is kept in the memory.
This process happened in between the render function’s call and the displaying elements on the screen. This method is called reconciliation.

It works in three ways, these are following.
i. When any data in the program changes the entire UI is re-rendered in Virtual DOM representation.
ii. The calculation of the difference between the old DOM and the new one is done after that.
iii. When eh changes are done on the Real DOM it will change only the things that have been changed.

The Shadow DOM is designed to scoping variables and CSS in web components and its a browser technology, while Virtual DOM is the concept is implemented by the browser libraries in javascript on the top of the browser APIs.

In React v16 the react fiber the new reconciliation engine or reimplementation of core ago. mainly the use of React fiber is to increase its suitability for areas like animation layouts, gestures, ability to pause and assign the new work priority to different types of updates.

The Main Goal of the react fiber is to increase the suitability for areas like animation and gestures. The main feature of the React Fiber is to split the rendering work into different parts and spread it over multiple frames and it is called Incremental Rendering.

When a component that can control the input elements within the form on the subsequent user inputs is called controlled inputs. E.g. I each state mutation will have an associated handler function.
For example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}

React.createElement() function will transpile the JSX elements to createReact React elements which are going to be used for object representation of UI, while cloneElement cone an element and pass it to new props.

When the data is changed and it is needed that the changed data is to be transferred then it lifts up the changed state up to the closest ancestor.e.g if two children wants to share same parents data then the state is moved to the parent rather than local elements.

Latest Blog

March 04, 2022

Join a PHP Training Course to Avoid These 7 Common Mistakes!


The recurring problem faced by both beginners and advanced programmers is learning how they can improve their coding practice to make the program error-free and reusable. This article is curated to closely attend to the problems faced by coders and educate them on the benefits of a PHP developer course. […]

February 17, 2022

5 Programming Languages to Learn in 2022


As the world is gradually staggering to normalcy, after spending two long years gripped under the pandemic, the job market is now bouncing back and showcasing several interesting trends. The most evident among these trends is the increasingly growing demand for software professionals who are skilled to cater to the […]

February 17, 2021

Who Should Do a Digital Marketing Course


The digital space is growing in the number of users, which has led to a growing demand for digital marketing. From marketing to the IT industry, digital marketing is a must for any business to thrive. So, practically, people across industries must take up a digital marketing course and add […]

Hi!

Hey!

TOPS JobFest is Happening

50+ IT Cos will hire for 1,000+ Positions

Are you looking for a JOB ?

I`m looking for a job

Thank you, I`m okay

OR

Hey!

Complete the form

We are waiting for your application!