Top 100+ React Redux Interview Questions and Answers 2020 (free)

Why can't browsers read JSX?

Actually, JSX is not considered as a proper JavaScript. Browsers cannot read them simply. There is always a need to compile the files that contain JavaScript Code. This is usually done with the help of JSX compiler which performs its task prior to file entering the browser. Also, compiling is not possible in every case. It depends on a lot of factors such as the source or nature of file or data.

How is Stateless component different from a Stateful component?

The stateless component calculates the internal state of the component but does not have the authority to change state. There is no knowledge about the past, current, or future but receives props from the Stateful component, which are treated as a callback function.

What is the difference between state and props?

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. ie:

Props get passed to the component similar to function parameters
state is managed within the component similar to variables declared within a function.

What can you do if the expression contains more than one line?

In such a situation, enclosing the multi-line JSX expression is an option. If you are a first time user, it may seem awkward but later you can understand everything very easily. Many times it becomes necessary to avoid multi-lines to perform the task reliably and for getting the results as expected.

What kind of information controls a segment in React?

There are mainly two sorts of information that control a segment: State and Props

State: State information that will change, we need to utilize State.
Props: Props are set by the parent and which are settled all through the lifetime of a part.

Explain DOM Diffing in React.

The process of checking the difference between the new VDOM tree and the old VDOM tree is called ""diffing"". Diffing is accomplished by a heuristic O(n) algorithm. During this process, React will deduce the minimum number of steps needed to update the real DOM, eliminating unnecessary costly changes. This process is also referred to as reconciliation.

What do you understand by the term polling?

The server needs to be monitored to for updates with respect to time. The primary aim in most of the cases is to check whether novel comments are there or not. This process is basically considered as pooling. It checks for updates approximately every 5 seconds. It is possible to change this time period easily. Pooling help keeping an eye on the users and always make sure that no negative information is present on the servers. Actually, it can create issues related to several things and thus pooling is considered.

What’s the difference between an Element and a Component in React?

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets compiled to a createElement invocation).

Why should we not call setState in componentWillUnmount?

You should not call setState() in componentWillUnmount() because the component will never be re-rendered.

What is the difference between React Native and React?

React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

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 independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

When would you use a Class Component over a Functional Component?

If your component has state or a lifecycle method(s), use a Class component (or Hooks). Otherwise, use a Functional component.

How to prevent a function from being called multiple times?

If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways,

Throttling: Changes based on a time based frequency. For example, it can be used using _.throttle lodash function
Debouncing: Publish changes after a period of inactivity. For example, it can be used using _.debounce lodash function
RequestAnimationFrame throttling: Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function

Describe how events are handled in React.

The event handlers in React will be passed instances of SyntheticEvent to solve cross-browser compatibility issues. As we mentioned earlier, SyntheticEvent is React’s cross-browser wrapper around the browser’s native event. The synthetic events have the same interface as the native ones but they work identically across all browsers.

However, React doesn’t actually attach events to the child nodes themselves. Instead, it uses a single event listener in order to listen to all events at the top level which. Not only is this great for the performance but it also means that React doesn’t have to keep track of the event listeners when updating the DOM.

How to dispatch the data in-store?

We can dispatch the data to another component which should be based on the action which stores the parent component.

What do you understand by “Single source of truth”?

Single source of truth (SSOT) is the practice of structuring information models and associated data schema such that every data element is mastered (or edited) in only one place. Redux uses Store to store the entire state of the application at one location. So all the state of the component is stored in the store and the store itself receives updates. The single state tree makes tracking modifications simpler over time and debugging or inspecting the request.

Why is switch keyword used in React Router v4?

Within the Switch component, Route and Redirect components are nested inside. Starting from the top Route/Redirect component in the Switch, to bottom Route/Redirect, each component is evaluated to be true or false based on whether or not the current URL in the browser matches the path/from prop on the Route/Redirect component. Switch is that it will only render the first matched child.

How do you tell React to build in Production mode and what will that do?

You set process.env.NODE_ENV to production. When React in production mode, it’ll strip out any extra development features like warnings.

How do you access imperative API of web components?

Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

What is the benefit of strict mode?

It activates additional checks and warnings for its descendants. Note: Strict mode checks are run in development mode only; they do not impact the production build.

It is helpful in the following cases:

Identifying components with unsafe lifecycle methods.
Warning about legacy string ref API usage.
Detecting unexpected side effects.
Detecting legacy context API.
Warning about deprecated findDOMNode usage

What is the difference between createElement and cloneElement?

createElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI). cloneElement is utilized as a part of request to clone a component and pass it new props. They nailed the naming on these two.

What are the rules one needs to follow regarding hooks?

You need to follow two rules in order to use hooks:

Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.

What are the conditions to safely use the index as a key?

There are three conditions to make sure, it is safe use the index as a key.

The list and items are static– they are not computed and do not change.
The items in the list have no ids.
The list is never reordered or filtered.

Explain Presentational segment

A presentational part is a segment which allows you to renders HTML. The segment’s capacity is presentational in markup.

What is Relay?

Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

Can we make changes inside child components?

Yes, we can make changes inside the child component in Props but not in the case of States.

What is route based code splitting?

A good place to start code splitting is with app routes. Break down an application into chunks per route, and then load that chunk when user navigate that route. Under the hood, webpack takes care of creating chunks and serve chunks to the user on demand.

We have to just create asyncComponent and import the desired component by using dynamic import() function.

Explain 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, then they must be grouped together inside one enclosing tag such as

What is render hijacking?

The concept of render hijacking is the ability to control what a component will output from another component. It actually means that you decorate your component by wrapping it into a Higher-Order component. By wrapping you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually ""ENABLES"" hijacking, but by using HOC you make your component behave in different way.

What are React Events?

Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.

What do you know about Flux?

Basically, Flux is a basic illustration that is helpful in maintaining the unidirectional data stream. It is meant to control construed data unique fragments to make them interface with that data without creating issues. Flux configuration is insipid; it's not specific to React applications, nor is it required to collect a React application. Flux is basically a straightforward idea, however in you have to exhibit a profound comprehension of its usage.

What is ReactDOMServer?

The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:

renderToString()
renderToStaticMarkup()

How do the parent and child components exchange information?

This task is generally performed with the help of functions. Actually, there are several functions which are provided to both parent and child components. They simply make use of them through props. Their communication should be accurate and reliable. The need of same can be there anytime and therefore functions are considered for this task. They always make sure that information can be exchanged easily and in an efficient manner among the parent and child components.

What are controlled components?

In HTML, form elements such as , , and <select> typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it's state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. An input form element whose value is controlled by React in this way is called a controlled component.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Where would you put AJAX calls in your React code?</h5><div class='ac-a'><p>It is possible to use any AJAX library with React, such as Axios, jQuery AJAX, as well as the inbuilt browser window.fetch. Data with AJAX calls need to be added to the componentDidMount() lifecycle method. By doing this, it is possible to use the setState() method for updating component as soon as the data is retrieved.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the use of Webpack?</h5><div class='ac-a'><p>Webpack in general is a module bundler, thanks to many plugins it provides although a lot more and it can be used to run tasks, clean build directories, check linting, handle typescript support, increase performance, provide chunking and a lot more.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the difference between DOM and virtual DOM in React.js?</h5><div class='ac-a'><p>DOM aka Document Object Model is an abstraction of structured code (HTML). Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a structure where users modify the content present in the structure in any way they want (create, edit, alter, modify etc.). Basically, HTML is a text, DOM is an in-memory representation of this text. </p><p>Virtual DOM is a representation of DOM objects like a lightweight copy. It is used and provided for free by React.js</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why do we need a Router to React?</h5><div class='ac-a'><p>We need a Router to React so that we could define the multiple routes whenever the user types a particular URL. This way, the application of a particular router can be made when the URL matches the path defined inside the router.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why did you choose to work with react?</h5><div class='ac-a'><p>This kind of question is less about rattling off facts related to JSX, Virtual DOMs, props, or state, and more about explaining to an employer why you have a professional interest in working with React JS. One of the main reasons this question (and your answer) is of interest to an interviewer is because it gives a sense of how you might explain the importance of using React to a non-technical client or stakeholder.</p><p>To answer, simply think of what drew you to React JS. It can be something as basic as the fact that React is easy to learn and start with, but allows plenty of room for growth over time (showing your willingness to learn new things and expand your knowledge as you go), or something as practical as the fact that there are so many job opportunities for React developers (showing you keep on top of the industry and are able to adapt as needed).</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>List down the advantages of React Router.</h5><div class='ac-a'><ul><li>Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component (<BrowserRouter>) in which we enclose the specific child routes (<route>).</li><li>No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the <BrowserRouter> component.</li><li>The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is create-react-app?</h5><div class='ac-a'><p>create-react-app is the official CLI (Command Line Interface) for React to create React apps with no build configuration. We don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that we can focus on the code. We can install easily just like any other node modules.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are some of the major advantages to using react when building UIs?</h5><div class='ac-a'><p>Some of the major advantages of using React include:</p><ul><li>Increased application performance via the Virtual DOM model</li><li>Improved coding efficiency with JSX</li><li>The ability to reuse components across multiple projects</li><li>Flexibility and extensibility through add-on tools provided by React’s open source community</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why are you not required to use inheritance?</h5><div class='ac-a'><p>In React, it is recommend using composition instead of inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Whereas, If you want to reuse non-UI functionality between components, it is suggested to extracting it into a separate JavaScript module. Later components import it and use that function, object, or a class, without extending it.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How is React different from Angular and VUE?</h5><div class='ac-a'><p>The core difference between React and Vue is that React lacks any form of “abstraction”. It’s very much just straight JavaScript. This brings some of the drawbacks of of JS. If you’re a JS expert, React will give you more power. But if you are lacking the expertise, Vue will smooth some of the rough patches for you. It’s also worth noting that Vue doesn’t work with Arrow functions in the same way React does. </p><p>VUE.js was launched in 2014 and since then, it has been the most rapidly growing js framework. It is particularly useful for building intuitive interfaces while also being extremely adaptable. VUE is a web application framework that helps in making advanced single page applications. </p><p>Angular is a typescript based JavaScript application framework developed by Google, not a collection of libraries and it relies more on HTML than on JS. Despite the slowdown in recent years it’s actually used very widely for government and enterprise projects, which depend on a stable, well-established, and consistent ecosystem. It is also known as Super-heroic JavaScript MVW Framework. Its initial purpose was to encounter the challenges of creating single page apps. AngularJS is the oldest version of the Angular framework. </p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the second argument that can optionally be passed to setState and what is its purpose?</h5><div class='ac-a'><p>A callback function which will be invoked when setState has finished and the component is re-rendered.</p><p>Since the setState is asynchronous, which is why it takes in a second callback function. With this function, we can do what we want immediately after state has been updated.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are Higher Order Components(HOC)?</h5><div class='ac-a'><p>Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is suspense component?</h5><div class='ac-a'><p>Suspense is a component that wraps your own custom components. It lets your components communicate to React that they're waiting for some data to load before the component is rendered. It is important to note that Suspense is not a data fetching library like react-async, nor is it a way to manage state like Redux.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is it possible to display props on a parent component?</h5><div class='ac-a'><p>Yes, it is possible. The best way to perform this task is by using the spread operator. It can also be done with listing the properties but this is a complex process.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Name 3 ways to create a component in React and its differences.</h5><div class='ac-a'><p>There are 3 main ways of creating a component. Extending from the Component class, extending from the PureComponent class or using a stateless function as component. The main difference is that we don’t have access to lifecycle methods in a stateless function nor to the state. PureComponent also implements componentShouldUpdate by default and provides a shallow compare for its props and state preventing unnecessary re-renders.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is setState() async? Why?</h5><div class='ac-a'><p>setState() actions are indeed asynchronous. setState() doesn’t immediately mutate this.state. Instead, it creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains. </p><p>The reason behind is the way setState alters the state and causes rerendering. Making it synchronous might leave the browser unresponsive. That being said, the setState calls are asynchronous as well as batched for better UI experience and performance. </p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the point of renderToNodeStream method?</h5><div class='ac-a'><p>It is used to render a React element to its initial HTML. Returns a Readable stream that outputs an HTML string. The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is prop drilling and how can you avoid it?</h5><div class='ac-a'><p>When building a React application, there is often the need for a deeply nested component to use data provided by another component that is much higher in the hierarchy. The simplest approach is to simply pass a prop from each component to the next in the hierarchy from the source component to the deeply nested component. This is called prop drilling. The primary disadvantage of prop drilling is that components that should not otherwise be aware of the data become unnecessarily complicated and are harder to maintain. To avoid prop drilling, a common approach is to use React context. This allows a Provider component that supplies data to be defined, and allows nested components to consume context data via either a Consumer component or a useContext hook.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What do you understand by “In React, everything is a component.”</h5><div class='ac-a'><p>Building blocks of the UI of a React application are components. These parts divide the entire UI into tiny parts that are autonomous and reusable. Then it becomes independent of each of these parts without affecting the remainder of the UI.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How do you say that state updates are merged?</h5><div class='ac-a'><p>State update are merged means that when you update only one key in the object state it will not affect the other keys. and key2 would not exist anymore in your state as it was not defined in your update. The merging affects key/value pair which are not included in your update.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the behavior of uncaught errors in react 16?</h5><div class='ac-a'><p>In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How does JSX prevent Injection Attacks?</h5><div class='ac-a'><p>By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What do you understand by mixin or higher order components in ReactJS?</h5><div class='ac-a'><p>Higher order components (HOC) is a function that takes component as well as returns a component. It is a modern technique in React that reuses the component logic. However, Higher order components are not a part of React API, per se. These are patterns that emerge from React’s compositional nature. In other words, HOC’s are functions that loop over and applies a function to every element in an array.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What do you understand by Props in React?</h5><div class='ac-a'><p>Prop is a contraction for Properties in React. These read-only components need to be kept immutable i.e. pure. Throughout the application, props are passed down from the parent components to the child components. In order to maintain the unidirectional data flow, a child component is restricted from sending a prop back to its parent component. This also helps in rendering the dynamically generated data.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How is Virtual-DOM more efficient than Dirty checking?</h5><div class='ac-a'><p>First thing to understand here is that in React, each component has a state which is observable. React knows when to re-render the scene because it is able to observe when this data changes. The observables are significantly faster than the Dirty checking because we don’t have to 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. In a situation like that, React can simply listen for change events on the state and queue up re-rendering. Long story short, the virtual DOM is more efficient than the Dirty checking simply because it prevents all the unnecessary re-renders. Re-rendering only occurs when the state changes.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is it mandatory to define constructor for React component?</h5><div class='ac-a'><p>No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the difference between a controlled component and an uncontrolled component?</h5><div class='ac-a'><p>A large part of React is this idea of having components control and manage their own state. What happens when we throw native HTML form elements (input, select, textarea, etc) into the mix? Should we have React be the “single source of truth” like we’re used to doing with React or should we allow that form data to live in the DOM like we’re used to typically doing with HTML form elements? These two questions are at the heart of controlled vs. uncontrolled components.</p><p>A controlled component is a component where React is in control and is the single source of truth for the form data. As you can see below, username doesn’t live in the DOM but instead lives in our component state. Whenever we want to update username, we call setState as we’re used to.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the rules needs to follow for hooks?</h5><div class='ac-a'><p>You need to follow two rules inorder to use hooks:</p><ul><li>Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.</li><li>Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>React has something called a state. What is it and how it is used?</h5><div class='ac-a'><p>States are the source of data for React components. In other words, they are objects responsible for determining components behavior and rendering. As such, they must be kept as simple as possible. Accessible by means of this.state(), state is mutable and creates dynamic and interactive components.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is JSX?</h5><div class='ac-a'><p>JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Eventhough React does not require JSX, it is the recommended way of describing our UI in React app.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Explain the use of Redux thunk?</h5><div class='ac-a'><p>Redux thunk acts as middleware which allows an individual to write action creators that return functions instead of actions. This is also used as a delay function in order to delay dispatch of an action if a certain condition is met. The two store methods getState() and dispatch() are provided as parameters to the inner function.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is setState() is async? Why is setState() in React Async instead of Sync?</h5><div class='ac-a'><p>setState() actions are asynchronous and are batched for performance gains. </p><p>setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.</p><p>This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the difference between async mode and concurrent mode?</h5><div class='ac-a'><p>Both refer to the same thing. Previously concurrent Mode being referred to as ""Async Mode"" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What does shouldComponentUpdate do and why is it important?</h5><div class='ac-a'><p>What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state”. If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Explain React Decorators</h5><div class='ac-a'><p>Decorators in React help you take an existing Class component, or function of a Class component, and modify it, thereby allowing you to add extra capabilities, without having to mess with the existing codebase. Modification can be overriding the existing function completely, or just adding extra logic to it. In essence, decorators take one function, and return another function after spicing it up. React and decorators can go hand-in-hand due to presence of Higher Order Components , and Higher Order Functions.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the different phases of React component’s lifecycle?</h5><div class='ac-a'><p>There are three different phases of React component’s lifecycle: Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase. Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the purpose of eslint plugin for hooks?</h5><div class='ac-a'><p>The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,</p><ul><li>Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).</li><li>Hooks are called in the same order on every render.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How would you debug an issue in react code? What debugging tools have you used?</h5><div class='ac-a'><p>Debugging as a crucial part of the development process. Before you start your next React JS job interview, make sure you have experience with the following industry standard debugging tools (and can explain how you’d use them):</p><ul><li>Linters (eslint, jslint)</li><li>Debuggers (React Developer Tools)</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the lifecycle methods of ReactJS?</h5><div class='ac-a'><ul><li>componentWillMount: Executed before rendering and is used for App level configuration in your root component.</li><li>componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up eventListeners should occur.</li><li>componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.</li><li>shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a rerender if component receives new prop.</li><li>componentWillUpdate: Executed before re-rendering the component when there are pros & state changes confirmed by shouldComponentUpdate which returns true.</li><li>componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.</li><li>componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How is ReactJs different from AngularJS?</h5><div class='ac-a'><p>The first difference between both of them is their code dependency. ReactJS depends less on the code whereas AngularJS needs a lot of coding to be done. The packaging on React is quite strong as compared to the AngularJS. Another difference is React is equipped with Virtual Dom while the Angular has a Regular DOM. ReactJS is all about the components whereas AngularJS focus mainly on the Models, View as well as on Controllers. AngularJS was developed by Google while the ReactJS is the outcome of facebook. These are some of the common differences between the two.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What would be two of the most significant drawbacks of React?</h5><div class='ac-a'><ul><li>Integrating React with the MVC framework like Rails requires complex configuration.</li><li>React requires the users to have knowledge about the integration of user interface into MVC framework.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are synthetic events in React?</h5><div class='ac-a'><p>Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Can you force a React component to rerender without calling setState?</h5><div class='ac-a'><p>In your component, you can call this.forceUpdate() to force a rerender.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is arrow function in React? How is it used?</h5><div class='ac-a'><p>Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Mention the key benefits of Flux?</h5><div class='ac-a'><p>Applications that are built on Flux have components that can simply be tested. By simply updating the store, developers are able to manage and test any react component. It cut down the overall risk of data affection. All the applications are highly scalable and suffer no compatibility issues.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why are fragments better than container divs?</h5><div class='ac-a'><ul><li>It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.</li><li>Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.</li><li>The DOM inspector is less cluttered.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are refs in React?</h5><div class='ac-a'><p>Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is it ref argument available for all functions or class components?</h5><div class='ac-a'><p>Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>In ReactJS, why there is a need to capitalize on the components?</h5><div class='ac-a'><p>It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements. At the same time, the problem of integration of some elements and commands can be there.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the benefits of using typescript with reactjs?</h5><div class='ac-a'><p>Below are some of the benefits of using typescript with ReactJS:</p><ul><li>It is possible to use latest JavaScript features</li><li>Use of interfaces for complex type definitions</li><li>IDEs such as VS Code was made for TypeScript</li><li>Avoid bugs with the ease of readability and Validation</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How would you structure a React application?</h5><div class='ac-a'><p>This is an open question with many possible answers. The basic structure is usually module or feature based. We usually differentiate between UI and logic. There are many approaches to structure UI components with the most popular being atomic design. Data and business heavy applications use a more domain driven approach. The ideal combination for larger applications is having the domain logic separate and having the UI logic in an atomic structure. All this can be combined in features which are rendered on pages.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the use of a super keyword in React?</h5><div class='ac-a'><p>The super keyword helps you to access and call functions on an object’s parent.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why are String Refs considered legacy?</h5><div class='ac-a'><p>If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like ref={'textInput'}, and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.</p><ul><li>They force React to keep track of currently executing component. This is problematic because it makes react module stateful, and thus causes weird errors when react module is duplicated in the bundle.</li><li>They are not composable — if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.</li><li>They don't work with static analysis like Flow. Flow can't guess the magic that framework does to make the string ref appear on this.refs, as well as its type (which could be different). Callback refs are friendlier to static analysis.</li><li>It doesn't work as most people would expect with the ""render callback"" pattern</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>When should you use the top-class elements for the function element?</h5><div class='ac-a'><p>If your element does a stage or lifetime cycle, we should use top-class elements.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the methods order when component is re-rendered?</h5><div class='ac-a'><p>An update can be caused by changes to props or state. The below methods are called in the following order when a component is being re-rendered.</p><ul><li>static getDerivedStateFromProps()</li><li>shouldComponentUpdate()</li><li>render()</li><li>getSnapshotBeforeUpdate()</li><li>componentDidUpdate()</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Explain the Virtual DOM and its working.</h5><div class='ac-a'><p>A virtual DOM is a lightweight JS object. It is simply a copy of the real DOM. A virtual DOM is a node tree that lists various elements, their attributes, and content as objects and their properties.</p><p>The render() function in React is responsible for creating a node tree from the React components. This tree is then updated in response to the mutations resulting in the data model due to various actions made by the user or the system.</p><p>Virtual DOM operates in three simple steps:</p><ul><li>Step 1 – The entire UI is re-rendered in Virtual DOM representation as soon as there are some underlying data changes.</li><li>Step 2 – Now, the difference between the previous DOM representation and the new one (resulted from underlying data changes) is calculated.</li><li>Step 3 – After the calculations are successfully carried out, the real DOM is updated in line with only the things that actually underwent changes.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Is it possible to nest JSX elements into other JSX elements?</h5><div class='ac-a'><p>It is possible. The process is quite similar to that of nesting the HTML elements. However, there are certain things that are different in this. You must be familiar with the source and destination elements to perform this task simply.</p></div></div> </div> <div class='my-shade my-shade-box' id='Advanced'> <div class='ac'><h5 class='ac-q' tabindex='0'>How does React know when to re-render App component if we handle window resizing in useWindowSize?</h5><div class='ac-a'><p>When you call setSize inside the custom hooks, React knows that this hook is used in App component and will re-render it.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Explain Flexbox and its benefits</h5><div class='ac-a'><p>Flexbox is a layout-ing method which solves many previous problems with handling layouts in CSS. It eliminates the need for different GRID libraries and using floats to position blocks on the site. It has a very intuitive api and gives a lot more control and flexibility.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why do we need a key property? Give an example when a bad key causes an error.</h5><div class='ac-a'><p>There are classic diffing algorithms with O(n³) time complexity, which might be used for creating a tree of React elements. But it means for displaying 1000 elements would require one billion comparisons.</p><p>Instead, React implements a heuristic O(n) algorithm with an assumption that the developer can hint at which child elements may be stable across different renders with a keyprop.</p><p>What about a bad key? Well, an index might be a very bad key if you decide to make your children removable. Check out this demo. Try to type something in the second input and then remove the first one. But you still can see the value in the second one, why so?</p><p>Because your keys are unstable. After removal, your third child with a key equals to 3, now has a key equals to 2. It’s not the same element for React now. And it will match it to the wrong DOM element, which previously had a key equals to 2 (which keeps the value we typed in a second input).</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>React unit tests vs integration tests for components.</h5><div class='ac-a'><p>It’s worth mentioning both Enzyme and react-testing-library.</p><p>React testing library provides a clean and simple API which focuses on testing applications “as a user would”. This means an API returns HTML Elements rather than React Components with shallow rendering in Enzyme. It’s is a nice tool for writing integrational tests.</p><p>Enzyme is still a valid tool, it provides a more sophisticated API which gives you access to component’s props and internal state. It makes sense to create unit tests for components.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is windowing technique?</h5><div class='ac-a'><p>Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Explain the positives and negatives of shallow rendering components in tests.</h5><div class='ac-a'><p>Positives:</p><ul><li>It is faster to shallow render a component than to fully render it. When a React project contains a large number of components, this performance difference can have a significant impact on the total time taken for unit tests to execute.</li><li>Shallow rendering prevents testing outside the boundaries of the component being tested—a best practice of unit testing.</li></ul><p>Negatives:</p><ul><li>Shallow rendering is less similar to real-world usage of a component as part of an application, so it may not catch certain problems. Take the example of a <House /> component that renders a <LivingRoom /> component. Within a real application, if the <LivingRoom /> component is broken and throws an error, then <House /> would fail to render. However, if the unit tests of <House /> only use shallow rendering, then this issue will not be identified unless <LivingRoom /> is also covered with unit tests.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the problems of using render props with pure components?</h5><div class='ac-a'><p>If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Do you know what the reconciliation algorithm is?</h5><div class='ac-a'><p>It is the algorithm responsible for figuring out what changed between re-renders and how to update the actual DOM. It is basically a diffing algorithm. The latest addition of improvements on the core algorithm is called React Fiber.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How to prevent components from re-rendering?</h5><div class='ac-a'><ul><li>shouldComponentUpdate() — returns ‘true’ by default. You can override if you know which props have to trigger an update.</li><li>PureComponents — The difference between them is that React.Component doesn’t implement shouldComponentUpdate method but React.PureComponentimplements it with a shallow prop and state comparison.</li><li>React.memo — The same as the previous one but it works with functional components.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How would you optimise the performance of a React application?</h5><div class='ac-a'><p>The most expensive task in a React app is the update of the DOM. The basic optimisation is to reduce how many times a component re-renders. This can be achieved by using componentShouldUpdate, using PureComponent or memoization libraries like reselect. Reducing the size of the final JS file also helps improving performance and we can use dynamic imports and chunks for this.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the drawbacks of MVW pattern?</h5><div class='ac-a'><ul><li>DOM manipulation is very expensive which causes applications to behave slow and inefficient.</li><li>Due to circular dependencies, a complicated model was created around models and views.</li><li>Lot of data changes happens for collaborative applications(like Google Docs).</li><li>No way to do undo (travel back in time) easily without adding so much extra code.</li></ul></div></div> </div> <div class='my-shade my-shade-box' id='Redux'> <div class='ac'><h5 class='ac-q' tabindex='0'>What are the advantages of formik over redux form library?</h5><div class='ac-a'><p>Below are the main reasons to recommend formik over redux form library:</p><ul><li>The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary.</li><li>Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps.</li><li>Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Can Redux only be used with React?</h5><div class='ac-a'><p>Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>How Relay is different from Redux?</h5><div class='ac-a'><p>Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are selectors? Why would you use reselect or a memoization library?</h5><div class='ac-a'><p>Selectors are functions which accept the state and return a portion of it while applying calculations, transformations, mappings, filtering etc. This way the logic of how to retrieve data for a specific view is encapsulated in a selector. Since many of the mentioned operations are expensive, when calling the selector again without state change, you want to skip the expensive operations as they will return the same results and hence the usage of reselect. Reselect will return the results from the Cashe in case arguments didn’t change.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is the mental model of redux-saga?</h5><div class='ac-a'><p>Saga is like a separate thread in your application, that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What is an action in Redux?</h5><div class='ac-a'><p>It is a function which returns an action object. The action-type and the action data are always stored in the action object. Actions can send data between the Store and the software application. All information retrieved by the Store is produced by the actions.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>Why are Redux state functions called reducers?</h5><div class='ac-a'><p>Reducers always return the accumulation of the state (based on all previous and current actions). Therefore, they act as a reducer of state. Each time a Redux reducer is called, the state and action are passed as parameters. This state is then reduced (or accumulated) based on the action, and then the next state is returned. You could reduce a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.</p></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the core principles of Redux?</h5><div class='ac-a'><p>Redux follows three fundamental principles:</p><ul><li>Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.</li><li>State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.</li><li>Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.</li></ul></div></div><div class='ac'><h5 class='ac-q' tabindex='0'>What are the downsides of Redux compared to Flux?</h5><div class='ac-a'><ul><li>You will need to learn to avoid mutations: Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to - - Redux assumes you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or instructing your team to write non-mutating code.</li><li>You're going to have to carefully pick your packages: While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a rich ecosystem.</li><li>There is no nice Flow integration yet: Flux currently lets you do very impressive static type checks which Redux doesn't support yet.</li></ul></div></div> </div> <script> //locate all the navigation links var quickLinks = document.querySelectorAll(".sticky-menu-list a"); for (var i=0; i<quickLinks.length; i++){ quickLinks[i].addEventListener('click', function(event){ //disable scroll listener after clicking on nav link document.removeEventListener('scroll', scrollHandler, true); //check if a link is currently selected, remove is-active class if yes isActive = document.querySelector(".sticky-menu-list").getElementsByClassName('is-active')[0]; if (isActive != undefined){ isActive.classList.remove('is-active'); } //then add is-active class to the most recent selected link this.classList.add('is-active'); setTimeout(function(){ document.addEventListener("scroll", scrollHandler, true); }, 1000); }); } function absolutePosition(el) { var found, left = 0, top = 0, width = 0, height = 0, offsetBase = absolutePosition.offsetBase; if (!offsetBase && document.body) { offsetBase = absolutePosition.offsetBase = document.createElement('div'); offsetBase.style.cssText = 'position:absolute;left:0;top:0'; document.body.appendChild(offsetBase); } if (el && el.ownerDocument === document && 'getBoundingClientRect' in el && offsetBase) { var boundingRect = el.getBoundingClientRect(); var baseRect = offsetBase.getBoundingClientRect(); found = true; left = boundingRect.left - baseRect.left; top = boundingRect.top - baseRect.top; width = boundingRect.right - boundingRect.left; height = boundingRect.bottom - boundingRect.top; } return { found: found, left: left, top: top, width: width, height: height, right: left + width, bottom: top + height }; } var hashArray = []; for (var i=0; i<quickLinks.length; i++){ //This creates an array of ids, expected output is ["basic", "keyword", "onpage", "content", "technical", "link"] hashArray.push(quickLinks[i].href.substring(quickLinks[i].href.indexOf('#')+1)); } var positionArray = []; //This creates an array of position for each of the IDs identified above for (var i=0; i<hashArray.length; i++){ positionArray.push(absolutePosition(document.getElementById(hashArray[i])).top); } document.addEventListener("scroll", scrollHandler, true); function scrollHandler() { currentScrollPosition = document.documentElement.scrollTop; for (var i=1; i<=positionArray.length; i++){ if ((currentScrollPosition>=positionArray[i-1]) && (currentScrollPosition < positionArray[i])) { var currentActive = document.querySelector(".sticky-menu-list").getElementsByClassName('is-active')[0]; if (currentActive != undefined){ currentActive.classList.remove('is-active'); } quickLinks[i-1].classList.add('is-active'); break; } if (currentScrollPosition>positionArray[positionArray.length-1]){ var currentActive = document.querySelector(".sticky-menu-list").getElementsByClassName('is-active'); var currentActive = document.querySelector(".sticky-menu-list").getElementsByClassName('is-active')[0]; if (currentActive != undefined){ currentActive.classList.remove('is-active'); } quickLinks[quickLinks.length-1].classList.add('is-active'); break; } }; </script> <script> new Accordion('#General'); new Accordion('#Advanced'); new Accordion('#Redux'); </script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> <script> var refreshFun = function(){ //console.log("b"); var input = $("#searchInput").val().toLowerCase(); //console.log("c", input); $(".ac").map(function(){ var elem = $(this); var text = elem.text(); //console.log("e", text.toLowerCase().indexOf(input)); if (text.toLowerCase().indexOf(input) == -1) { //elem.addClass("is-hidden"); elem.hide(); } else { //elem.removeClass("is-hidden"); elem.show(); } }); }; $("#searchButton").click(function(){ //console.log("a"); refreshFun() }); $( "#searchInput").on( "keydown", function(event) { if(event.which == 13) refreshFun(); }); </script>  </div> </section> <div> <hr/> <h2>Related Stories</h2> <div style="padding: 10px 30px"> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/full-stack-developer-salary/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Full Stack Developer Salary in 2020</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/android-developer-salary/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Android Developer Salary in 2020</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/python-developer-salary/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Python Developer Salary in 2020</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/how-to-setup-effective-coding-tests/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">How to setup an effective coding test (a guide for hiring managers)</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/skills-to-assess-when-hiring-excel-expert/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Skills to look for when hiring an Excel expert</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/react-interview-questions/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Top 100+ React Redux Interview Questions and Answers 2020 (free)</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/sap-mm-interview-questions-and-answers/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Best 200+ topic-wise SAP MM Interview Questions and Answers for 2020</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/sas-interview-questions-and-answers/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Top 120+ SAS Interview Questions and Answers for 2020</h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View Post</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> <a class="" style="padding: 10px; width: 100%; cursor: pointer; display: block;" href=https://www.adaface.com/blog/> <h3 class="" style="font-size: 25px; font-weight: 900; letter-spacing: -0.75px; line-height: 20px; margin: 0;">Checkout All 22 Blog Posts </h3> <div class="show-right-tick button is-white has-text-info" style="cursor: pointer; padding-left:0"><span>View</span><span class="icon"><i class="fas fa-chevron-right" style="vertical-align: middle;"></i></span></div> </a> </div> </div> </article> </div> </div> <style> .banner-book-container { width:100%; display: flex; justify-content: center; align-items: center; background-color: #f7f7f7; border-radius: 15px; padding: 30px; cursor: pointer !important; color: #000; } .banner-book-desc { padding-left: 20px; } .banner-book { width: 135px; height: 210px; position:relative; text-align: center; margin:2.5%; flex-shrink: 0; flex-grow: 0; left: 0; top: 0; } .banner-book-cover { position: absolute; z-index:1; width: 100%; height: 100%; transform-origin: 0 50%; -webkit-transform-origin: 0 50%; background: #111; background-size:cover; border-radius: 3px; box-shadow: inset 4px 1px 3px #ffffff60, inset 0 -1px 2px #00000080; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; background-size: contain !important; } .banner-book .banner-book-cover { background-size: 100% 100%; } .effect { width: 20px; height: 100%; margin-left: 10px; border-left: 2px solid #00000010; background-image: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); transition: all .5s ease; } .light { width: 90%; height: 100%; position: absolute; border-radius: 3px; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%); top: 0; right:0; opacity: .1; transition: all .5s ease; -webkit-transition: all .5s ease; } .banner-book-container:hover .banner-book-cover { transform: perspective(2000px) rotateY(-30deg); -webkit-transform: perspective(2000px) rotateY(-30deg); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; box-shadow: inset 4px 1px 3px #ffffff60, inset 0 -1px 2px #00000080, 10px 0px 10px -5px #00000030 } .banner-book-container:hover .effect { width: 40px; /** margin-left:13px; opacity: 0.5; **/ } .banner-book-container:hover .light { opacity: 1; width: 70%; } .banner-book-inside{ width: calc(100% - 2px); height:96%; position:relative; top: 2%; border: 1px solid grey; border-radius:3px; background: white; box-shadow: 10px 40px 40px -10px #00000030, inset -2px 0 0 grey, inset -3px 0 0 #dbdbdb, inset -4px 0 0 white, inset -5px 0 0 #dbdbdb, inset -6px 0 0 white, inset -7px 0 0 #dbdbdb, inset -8px 0 0 white, inset -9px 0 0 #dbdbdb; } .banner-book-container:hover .btn, .banner-book-container:hover .title { opacity: 1; } </style> <div class="columns is-marginless" style="width: 100%"> <div class="column" style="position: relative;"> <div class="banner-book-parent" style="padding: 10px;"> <a alt="ultimate pre-employment testing guide book" target="_blank" href=https://www.adaface.com/books/coding-tests-for-hiring class="banner-book-container"> <div class="banner-book"> <div class="banner-book-cover" style="background: url('https://res.cloudinary.com/dxxri2trj/image/upload/w_400,f_auto,q_auto/book_cover_coding_tests_r5conz.png')"> <div class="effect"></div> <div class="light"></div> </div> <div class="banner-book-inside"> </div> </div> <div class="banner-book-desc"> <h2 style="font-weight: 900; letter-spacing: -0.75px; line-height: 20px; font-size: 20px; padding-bottom: 10px;">All about coding tests</h2> <p style="font-weight: 400; font-size: 16px; padding-bottom: 10px;">Everything you need to know to implement a coding test in your hiring process.</p> <div style="color: white; font-weight: 900; letter-spacing: 0.75px; margin: 0;" class="buttons-of-book button is-black">GET IT NOW</div> </div> </a> </div> </div> </div> <div style="width: 100%; padding: 30px;"> <div style="text-align: center"><span class="is-size-3" style="font-size:30px; font-weight: 900; letter-spacing: -0.75px;">Popular Guides</span></div> <div class="columns is-marginless" style="margin: auto !important; padding: 5px; position: relative;max-width:800px;"> <a target="_blank" href=https://www.adaface.com/books/pre-employment-testing class="column content box card has-text-info" style="margin: 10px;padding: 25px;letter-spacing: -0.75px;line-height: 38px; cursor: pointer;"> <h1 class="has-text-info is-marginless" style="cursor: pointer; font-weight:900; cursor: pointer;">Ultimate guide to pre-employment tests</h1> </a> <a target="_blank" href=https://www.adaface.com/books/aptitude-test class="column content box card has-text-info" style="margin: 10px;padding: 25px;letter-spacing: -0.75px;line-height: 38px; cursor: pointer;"> <h1 class="has-text-info is-marginless" style="cursor: pointer; font-weight:900; cursor: pointer;">Ultimate guide to aptitude tests for candidate first hiring</h1> </a> </div> </div> <div style="margin-top: 90px;"> <div class="content" style="margin: 0"> <div style="font-weight: 700; color: rgb(4, 4, 4); line-height: 1.3; margin: 0 20px auto; text-align: center;" class="content" > <h2 style="font-size: 50px; margin-bottom: 0;letter-spacing: -0.75px; font-weight: 900;" class="notranslate"> Shortlist the best talent today </h2> </div> </div> <div class="columns is-mobile is-marginless" style="padding-top: 0px; max-width: 500px; margin:auto !important;" > <div class="column" style="padding-right: 5px; padding-bottom: 0; padding-left: 0;" > <div> <input aria-label="email input" id="emailIdFromInputCTA" class="input" type="text" placeholder="Enter your work email" /> </div> </div> <div onclick="openSignUpPageFromCTA()" class="column is-narrow" style="padding-left: 0; padding-bottom: 0;" > <div class="button is-info" class="notranslate"> Get started for free </div> </div> </div> <div class=""> <p class="has-text-grey is-size-6 notranslate" style="text-align: center; margin-top: 10px;" > (100% free to get started, no credit card required) </p> </div> </div> <script> function openSignUpPageFromCTA() { var id = "emailIdFromInputCTA"; var emailId = document.getElementById(id).value; var url; if (emailId) { if ((/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(String(emailId).toLowerCase())) { url = "https://www.adaface.com/app/dashboard/signup?email=" + emailId; } else { iziToast.warning({ title: "", message: "Please enter a valid work email id", position: "topLeft", color: "#fcdc59", }); } } else { iziToast.warning({ title: "", message: "Please enter a valid work email id", position: "topLeft", color: "#fcdc59", }); } if (url) { window.location = url; } } </script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e731ae83400339a"></script> <div class="mainfooter" style="width: 100%; border-top: 1px solid rgb(245, 239, 228); margin-top: 4em; padding: 3em 3em; font-size: 0.9em;"> <style> .footer-heading { font-weight: 900; text-transform: uppercase; margin-bottom: 8px; margin-top: 30px; } .footer-link { cursor: pointer !important; margin-bottom: 10px; display: block; } .footer-link-horizontal { cursor: pointer !important; margin-bottom: 10px; margin-left: 25px; margin-right: 25px; display: inline-block; } </style> <div class="columns"> <div class="column"> <img class="lazy footer-heading" style="height: 35px;" data-src="https://res.cloudinary.com/adaface/image/upload/f_auto,q_auto/adaface_logo.png"/> <h2 style="font-weight: 900; font-size: 20px;">The most candidate friendly assessment tool on the market</h2> <li class="footer-link" style="margin-top: 10px;"><a class=" notranslate" href=https://www.adaface.com/love target="_blank"> Wall of Love ❤️ </a></li> <p class="footer-link" style="margin-top: 10px; margin-bottom: 20px;"><a href="mailto:deepti@adaface.com" target="_blank">deepti@adaface.com</a></p> </div> <div class="column"> <div class="footer-heading notranslate"> Products </div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/online-assessment-platform target="_blank"> Adaface Assessments </a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pair-pro target="_blank">Adaface PairPro</a></li> </ul> <div class="footer-heading notranslate">Pricing</div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/pricing/ target="_blank"> Assessments Pricing </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/pair-pro-pricing/ target="_blank"> PairPro Pricing </a></li> </ul> <div class="footer-heading notranslate">Usecases</div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/aptitude-tests target="_blank"> Aptitude Tests </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/coding-tests target="_blank"> Coding Tests </a></li> </ul> <div class="footer-heading "> BOOKS </div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/books/pre-employment-testing target="_blank"> Definitive Guide to pre-employment assessments (2020) </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/books/aptitude-test target="_blank"> Ultimate Guide To Cognitive Tests (2020) </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/books target="_blank"> Check out all books </a></li> </ul> <div class="footer-heading notranslate"> Helpful Content </div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/conversational-assessments/ target="_blank"> Conversational assessments </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/guides/52-best-pre-employment-assessment-tools-compared-feb-2020/ target="_blank"> 52 pre-employment tools compared (2020) </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/compare-pre-employment-testing-software/hackerrank-vs-adaface/hackerrank-alternative target="_blank"> Compare Hackerrank vs Adaface </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/ikm-vs-adaface/ target="_blank"> Compare IKM vs Adaface </a></li> <li class="footer-link"><a class=" " href=https://adaface.com/mettl-vs-adaface/ target="_blank"> Compare Mettl vs Adaface </a></li> <li class="footer-link"><a class=" " href=https://adaface.com/software-engineer-quiz target="_blank"> Software Engineer Quiz </a></li> </ul> </div> <div class="column"> <div class="footer-heading notranslate">Popular assessments</div> <ul class="notranslate"> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/java-online-test target="_blank">Java</a>, <a href="" target="_blank">Spring</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/javascript-online-test target="_blank">JavaScript</a>, <a href=https://www.adaface.com/assessment-test/node-js-test target="_blank">Node</a>, <a href=https://www.adaface.com/assessment-test/html5-online-test target="_blank">HTML</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/python-online-test target="_blank">Python</a>, <a href=https://www.adaface.com/assessment-test/django-test-assessment-online target="_blank">Django</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/c-online-test target="_blank">C</a>, <a href=https://www.adaface.com/assessment-test/cpp-online-test target="_blank">C++</a>, <a href=https://www.adaface.com/assessment-test/c-sharp-online-test target="_blank">C#</a>, <a href=https://www.adaface.com/assessment-test/php-online-test target="_blank">PHP</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/reactjs-test-online-assessment target="_blank">React</a>, <a href=https://www.adaface.com/assessment-test/AngularJS-test target="_blank">Angular</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/excel-test target="_blank">Excel</a>, <a href=https://www.adaface.com/assessment-test/data-interpretation-test target="_blank">Data Interpretation</a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/assessment-test/logical-reasoning-test target="_blank">Logical Reasoning</a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/assessment-test/quantitative-aptitude-assessment-test target="_blank">Quantitative Aptitude</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/android-online-test target="_blank">Android</a>, <a href=https://www.adaface.com/assessment-test/ios-online-test target="_blank">iOS</a></li> <li class="footer-link"><a href=https://www.adaface.com/assessment-test/sql-online-test target="_blank">SQL</a>, <a href=https://www.adaface.com/assessment-test/mysql-online-test target="_blank">MySQL</a>, <a href=https://www.adaface.com/assessment-test/postgresql-test target="_blank">PostgreSQL</a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/all-tests target="_blank">Check out 700+ skills</a></li> </ul> <div class="footer-heading notranslate">Popular test categories</div> <ul> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/programming-language-tests target="_blank"> Programming languages </a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/framework-specific-tests target="_blank"> Software frameworks </a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/all-aptitude-tests target="_blank"> Aptitude tests </a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/all-database-skills target="_blank"> Database tests </a></li> <li class="footer-link"><a class="" href=https://www.adaface.com/pre-built-assessment-tests/all-tests target="_blank"> Check out all categories </a></li> </ul> </div> <div class="column"> <div class="footer-heading notranslate"> Company </div> <ul> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/about-us/ target="_blank"> About Us </a></li> <li class="footer-link"><a class=" notranslate" href="mailto:deepti@adaface.com" target="_blank"> Email Us </a></li> <li class="footer-link"><a class=" notranslate" href="https://angel.co/company/adaface" target="_blank"> Join Us </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/blog/ target="_blank"> Blog </a></li> <li class="footer-link"><a class=" notranslate" href=https://www.adaface.com/guides/ target="_blank"> Guides </a></li> </ul> <div class="footer-heading"> Partners </div> <ul> <li class="footer-link"><a class="" href="https://sap.io/" target="_blank"><img class="lazy loaded" alt="sap.io" style="max-width: 70px;" data-src="https://res.cloudinary.com/adaface/image/upload/f_auto,q_auto/io-logo-128.png"></a></li> </ul> <div class="footer-heading notranslate"> Locations </div> <ul> <li class="footer-link"> <p style="font-weight: 500">Singapore (HQ)</p><p>32 Carpenter Street, Singapore 059911</p> <p>Contact: +65 9447 0488</p></li> <li class="footer-link"> <p style="font-weight: 500">India</p><p>Innov8 Coworking, 20th Main Rd, 7th Block, Koramangala, Bangalore, Karnataka, India 560095</p><p>Contact: +91 6305713227 </p></li> </ul> </div> </div> <div style="width: 100%; border-top: 1px solid rgb(245, 239, 228); margin-top: 1em; padding-top: 1em; text-align: center;"> <div class="footer-link-horizontal">© 2020 Adaface Pte. Ltd.</div> <a class="footer-link-horizontal notranslate" target="_blank" href=https://www.adaface.com/terms-of-use/> Terms </a> <a class="footer-link-horizontal notranslate" href=https://www.adaface.com/privacy-policy/ target="_blank"> Privacy </a> <a class="footer-link-horizontal" target="_blank" href=https://www.adaface.com/product/gdpr/>GDPR</a> </div> </div> </main> </div> </div>  <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="6ade4c20-0790-4ed6-a1a3-cb8615f1911f";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>   <script> function bindClick(id) { var input = document.getElementById(id); if (input) { input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { url = getSignUpURL(id); window.location = url; } }); } } function attachHeaderListeners() { var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); if ($navbarBurgers.length > 0) { $navbarBurgers.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; var $target = document.getElementById(target); $el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); } } document.addEventListener('DOMContentLoaded', function () { bindClick("emailIdBase"); attachHeaderListeners(); }); </script> <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <noscript> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </noscript> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script> <script> var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy" }); </script> <script> var __timon_config = { firstVisit: true, subsequentVisit: true, inactivity: true, location: true, traffic: true, slackUrl: 'https://hooks.slack.com/services/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', locationApikey: '527ea0857da4776211206b463cbaaa0f4d2a50b6bec1307f6f35843d', device: true, developmentOff: true }; </script> <script defer src='https://timontrack.herokuapp.com/javascripts/timon.0.1.js' ></script>  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css"/> </noscript> <script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "edgeless", "position": "bottom-left", "content": { "message": "This site uses cookies.\n\nBy continuing to use this site, you are agreeing to our use of cookies.", "dismiss": "Ok.", "href": "https://www.adaface.com/privacy-policy" } })}); </script> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}); } </script> <style> .goog-tooltip { display: none !important; } .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background-color: transparent !important; border: none !important; box-shadow: none !important; } body{ top: 0 !important;} .skiptranslate { display:none !important; } .goog-te-banner-frame { display: none !important; } .goog-te-balloon-frame { display: none !important; } </style> <script> function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); } function deleteCookie(name) { setCookie(name, '', -1); } var lang = "/en/en"; if (window.location.href.indexOf("adaface.com") !== -1) { deleteCookie("googtrans"); document.cookie = "googtrans=" + lang + ";domain=.adaface.com;path=/"; document.cookie = "googtrans=" + lang + ";domain=adaface.com;path=/"; document.cookie = "googtrans=" + lang + ";domain=www.adaface.com;path=/"; setCookie("googtrans", lang, 30); } else { document.cookie = "googtrans=" + lang + ";domain=localhost;path=/"; } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </body> </html>