Request a Call back


captcha

React Interview Questions

Frequently Asked Interview Questions And Answers For React Freshers

What is React?

React is an opensource

What are the major features of React?

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.

What is JSX?

JSZ 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!’}

)
}
}

How to create components in React?

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 to use a Class Component over a Function Component?

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

What are Pure Components?

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.

What are props in React?

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.

What is the difference between state and props?

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.

Why should we not update the state directly?

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.

What is the purpose of callback function as an argument of setState()?

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

How to pass a parameter to an event handler or callback?

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

What are synthetic events in React?

SyntheticEvent is for 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.

What are "key" props and what is the benefit of using them in arrays of elements?

Akey is the 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}
  • )

    What is the use of refs?

    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.

    What is Virtual DOM?

    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.

    How Virtual DOM works?

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

    What is the difference between Shadow DOM and Virtual DOM?

    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.

    What is React Fiber?

    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.

    What is the main goal of React Fiber?

    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.

    What are controlled components?

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

    What is the difference between create Element and clone Element?

    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.

    What is Lifting State Up in React?

    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 News

    Add to your IT skills with short term and Professional courses from TOPS with Live Projects in Basic and Advance technologies.

    Which country is better for Indian Students for Study Abroad?

    April 18, 2019

    Canada is one amongst the most effective places to pursue your higher studies

    Study Abroad with Minimum finance

    March 31, 2019

    Canada is one amongst the most effective places to pursue your higher studies

    Which country is better for Indian Students for Study Abroad?

    January 15, 2019

    Aenean aculis massa. Etiam urna dolor venenat vitae urna quis imperdiet egs