Sign Up

Sign In

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

What is Redux?

Redux is an expected state container for JavaScript apps based on the Flux design pattern. Redux can be used mutually with React, or with any other view library. It is a little size (about 2kB) and has no dependency.


What are the popular packages for animation?

React Motion and React Transition Group are popular animation packages in React ecosystem.


Why is a component constructor called only once?

React’s appeasement algorithm assumes that without any information to the contrary, if a custom component appears in the same place on consequent renders, it’s the same component as before, so reuses the previous instance moderately than making a new one.


What will happen if you use set State() in constructor?

When you use set State(), then apart from assigning to the object state React also re renders the component and all its children. We would get error like this: Can only update a mounted or mounting component. Hence we need to use this. stateto initialize variables inside constructor.


What is React DOM Server?

The React DOM Server object enables us to render components to static markup . This object is mostly used for server-side rendering (SSR). The below methods can be used in both the server and browser environments:
renderToString()
renderToStaticMarkup()


What are fragments?

Its mutual pattern in React which is used for a component to return multiple elements. Fragments let group a list of children without adding extra nodes to the DOM.


What is reconciliation?

When a components props or state change, React decides whether an real DOM update is necessary by comparing the newly returned element with the before rendered one. When they not equal, React will inform the DOM. This process is called reconciliation.


What are the methods of React component lifecycle?

In the entire lifecycle of a React component, the following methods are used to accomplish the functions:

  • componentWillMount() – On client and server side this function gets executed just before the rendering

  • componentDidMount() – After first render it gets executed on the client side

  • componentWillReceiveProps() – This function is invoked when the props are received from the parent class and another render is not being called.

  • shouldComponentUpdate() – This Boolean function returns true or false as per situation like if the component needs to be updated then true is returned else false is returned

  • thecomponentWillUpdate() – It is called when rendering is not being called

  • componentDidUpdate() – It is called just after when render function is called

  • componentwillUnmount() – When a component gets un-mounted from DOM then this function is called




What are controlled and uncontrolled components in React?

This relates to stateful DOM components (form elements) and the difference:




  • A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.

  • A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.


In most (or all) cases we should use controlled components.




How Virtual-DOM is more efficient than Dirty checking?

In React, each of our components have a state. This state is like an observable. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because we must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.

The virtual DOM is used for efficient re-rendering of the DOM. This isn’t really related to dirty checking your data. We could re-render using a virtual DOM with or without dirty checking. In fact, the diff algorithm is a dirty checker itself.

We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.


What is react Context?

React context is used to pass data through a tree of react components. Using context, we can share data globally between react components.


What is Lifting state up in React?

If several states need to share common data, we can lift the state up to its closest common ancestor. That means the child components will not hold any local state, instead, the parent component will hold the common state. This same state will be used by all parent and child components.


Is it required the keys to be unique globally in a react application?

The keys should be unique among the sibling lists. But we can use the same keys if we have two different arrays.


Is it a good practice to use item index as ‘key’ of list elements?

It is not a good practice to use the index of an item as the ‘key’ of the list elements. For example, if the order of the items changes, it will impact negatively and may cause issues with the react component state.


What is the use of ‘key’ in react list?

Keys are used to provide each list element with a stable identity. The keys should be unique. The best practice is to use ‘id’ of the data as the key.


Can we create one list without using ‘key’ in react?

We can create one list without ‘key’ for each element but it will cause issues with the react component rendering the list. Even on the browser console, it will throw one error.


What are createElement and cloneElement?

React.createElement is used to create one react element which will be used as a UI component. React.cloneElement is used to clone an element.


What is a stateful component?

‘stateful’ components are class components. They have one ‘state’ that is used for UI re-rendering.


What is a stateless component?

A stateless component has no ‘state’. It may take one props as an argument and returns a react element based on the values of the ‘props’. These components also don’t have a lifecycle.


How does ‘setState’ function work?

‘setState’ function is used to update the state of a react component. If the UI of the component is dependent on the value we are updating, it will re-render the UI. For example :

setState({message : 'Hello'})


What are React props?

props are used to pass data to a component. They can hold single or multiple sets of values to pass to a component. They are mainly used to pass data to a component and to trigger any state changes.


What is React State?

React ‘state’ is an object that determines how a component renders and how it behaves. The state holds information that may change over the lifetime of a react component. The state is a private property of a component. Based on the value of a state, the react component updates its UI.


When to use a class component in React?

A class component is used if we have to deal with state or lifecycle methods. Function components are preferred otherwise.


What are the types of React component?

React components can be categorized into two types :

Function component
Class component


What is a React component?

React components are the basic building block of a react application. These are like functions that take inputs and returns one react element based on the inputs. Using the components, we can split an application into reusable, independent pieces.


Can browser read JSX files?

The browser can’t read JSX code. JSX is not the actual JavaScript. Browsers are designed to read only JavaScript. So, a transformer like babel is used to convert JSX code to JavaScript objects.


What is virtual DOM in React?

Manipulating the real DOM makes one web application slow. React creates one virtual DOM for each real DOM object. The virtual DOM has the same properties as the real DOM and we can manipulate it faster than a real DOM. In react, all operations are performed on the virtual DOM object.


What is JSX?

JSX or JavaScript XML is used in React to include XML/HTML code in JavaScript code. Later, transpilers like babel can transform these code into proper javaScript code. We can use React without JSX but JSX makes it more elegant.


What is Server side rendering? Does react support it?

React supports server-side rendering. Server-side rendering is the process of rendering a web page on the server side than in the browser. It makes the page load time faster. SSR improves the performance, SEO and user experience.


Mention five benefits of ReactJS :

Easy learning curve :

React is easy to learn. Anyone with a good understanding of HTML, CSS and Javascript can learn to react easily.

Readability :

React uses JSX that improves the readability of the code.

Performance :

React uses virtual DOM to update the UI that doesn’t require to update the whole webpage for every single change. That makes the application faster.

Reusable components :

We can use one component in many places without rewriting the code.

SSR :

React supports server-side rendering that improves the page load time.


What is Reactjs :

ReactJS is a frontend Open source Javascript library initially developed by Facebook. React was used on facebook.com in 2011 and one year later it was used on instagram.com. In 2015, Facebook has announced react-native, another library that uses the same architecture to create native Android and iOS applications.


Why immutability in important in React?

There are generally two approaches to changing data. The first approach is to mutate the data by directly changing the data’s values. The second approach is to replace the data with a new copy which has the desired changes.


What are primary reasons to use Reactjs

In spite of all front-end frameworks, React JS is gaining massive popularity with SEO friendly applications and easily understandable methodologies. It was the perfect fit for our needs. The primary reasons for its popularity are as follows:

 

  • Fast Learning Curve

  • Reusable Components

  • Quick render with Virtual DOM

  • Clean Abstraction

  • Flux and Redux

  • Great Developer Tool

  • React Native


 

 


What is difference between Shadow Dom and real DOM?

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.


What is redux and which are list of components involved in Redux

Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.


What is state and props and its difference?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function