UI Interview Questions

React

• Code Splitting
  
• New features of React
  
• Will component did mount be called on every rerender
  
• Alternative for redux
  
• -> Mobex
  
• Drawback of redux
  
• What is react uni-directional data flow?
  
• It is possible to make bi-directional flow in react ?
  
• Explain context overview along with its proper use
  
• Actions are synchronous
  
• Why do we need to return a new state from the reducer instead of changing the existing one.
  
• What are Error Boundaries
  
• -> Error Boundaries to handle error at global level and to handle errors at component level we have error handling lifecycle methods
  
  
• And what is component did catch?
  
• Difference between useContext & redux.
  
• Make redux actions async without using Thunk and Saga.
  
• Life cycle methods.
  
• Name some of the patterns you react usages?
  
• Can we update state without using setstate?
  
• How can we ensure that the state updated in setstate is previous state only?
  
• Does setstate ensures synchronous update of state?
  
• How to use a call back inside setstate?
  
• What are react hooks useEffect(),useState(),useRef(),useContext(), useSelectors?
  
• How to implement inversion of control in react?
  
• What are controlled inputs and what are uncontrolled inputs?
  
• What is reconciliation in react?
  
• How to share data across the components using context api and also using render props?
  
• What are prop types in react?
  
• How can you pass props from child to parent component?
  
• How to use createRef() in react?
  
• What is a pure function?
  
• What is an HOC (higer order component)? Give an example of any HOC you have implemented in your project?
  
• What is lazy loading in react?
  
• What all can be done inside the render() method?
  
• Why there is a different package called as react dom?
  
• What is a middleware?
  
• Tell me what is redux thunk and why there is a need to use thunk or any middleware?
  -implement debouncing and throttling
  Ans Sand Box link:https://codesandbox.io/s/denounce-and-throttle-code-2m2mj?file=/src/App.js
  
• Please write polyfill for forEach(), map() , reduce(), filter() Ans sand Box link :https://codesandbox.io/s/polly-fill-of-foreach-map-find-filter-reduce-zmmm0
  

JavaScript

• What are Interceptors (VIMP Question)
  
• Explain various Design Patterns and which patterns are you using in your project and why
  
• Controlled vs uncontrolled components
  
• Promise vs async await
  
• -> async await uses generators internally
  
• Ways to force update the state
  
• -> setState uses observables internally to re-render the data
  
• Event Loop explanation in case of executing async function and what happens when it encounters the await keyword
  
• Drawback of arrow functions
  
• Different ways to create objects
  
• Explain prototypical inheritance in deep with example
  
• ES6 Features
  
• Copying of Objects
  
• Currying Functions
  
• Throttling and Debouncing
  
• link for debouncing and Throttling Implementation https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript
  
• Promise.race() and all functions related to Promise
  
• How to run ‘use strict’ code in chrome console
  
• -> Use IFFY
  
• JIT compiler concept
  
• CORS
  
• CSRF
  
• What are closures and give an example of any inbuilt function in JS which uses closures concept.
  
• Achieving spread operator functionality without using spread operator.
  
• Axios vs fetch
  

CSS

• Different types of positions and display
  
• -> Sticky: Fixed + Relative
  
• Difference between inline, inline-block display
  
• Ways to place a box at the center of the screen
  
• Explain Box Modal in detail
  
• What new things are introduced in the css3 version also which is the latest css version and why are we not using the latest css version.
  
• Explain all specificity rules in css in detail with example
  
• Difference between justify content and align content in terms of axis
  
• Explain shadow dom
  
• Explain box sizing
  
• Line height property
  
• Example of different types of libraries equivalent to css
  
• -> LESS and SCSS (Css preprocessors)
  
• Explain use and features of CSS preprocessors
  
• Pseudo elements vs Pseudo Classes
  
• Use of Pseudo elements vs Pseudo Classes also give examples of it
  
• Types of css selectors
  
• Difference between grid and flex and which is better to use
  
• What are media queries and may ask you to write one of them
  
• Visibility hidden and display none difference
  
• Give examples of css combinators
  

HTML

• New tags introduced in html5
  
• What will get rendered if I place footer and then header tag
  
• (header and then footer or vice versa)
  
• What do you mean by semantic tags
  
• Name some of the semantic tags
  
• Different types of storages in html5
  
• Difference between session storage, local storage and cookies
  
• Which is the recommended way to store api key or any authentication key
  
• Figure sourceset Tag
  
• Meta tag in html and its use
  
• Inline vs block tag (conceptual difference)
  
• Examples of Inline and block tag
  
• Explain different HTTP methods
  
• Difference between PUT vs POST
  
• Give examples of idempotent http methods and what does this idempotent mean
  
• What is accessibility and how will you achieve it
  

Code Snippets

let name ="Helllo"
function myFunc(){
    let name ="Test"
    console.log(this.name) // undefined 
}
myFunc()

var obj = {
    name: "Google",
    getName: ()=>{
            console.log(this.name) // undefined
    }
}
obj.getName()

var obj = {
    name: "Google",
    getName: function(){
            console.log(this.name) // Google
    }
}
obj.getName()

var obj = {}
obj[{key:"name"}] = "Adarsh"
obj[{key:"surname"}] = "Patil"
console.log(obj[{key:"name"}]) // Patil

var arr = [10, 2, 30, 23, 32];
console.log(typeof arr); // Object

console.log(1<2<3);
console.log(3>2>1);

var a = 10;
(function(){
    console.log(a);
    var a = 20;
})();

console.log(true + true);
console.log(true + false);

var a = {name: 'React', age:8}
var b = {name: 'React', age:8}
console.log(a==b)
console.log(a===b)

var a = {label: 'a'};
var b = {label: 'b'};
m[a] ='x';
m[b] = 'y';

var obj1 = {a: 10};
var obj2 = obj1;
obj2.a = 90;
console.log(obj1.a)

var x = 10;
(function(){
delete x;
return x;
})();

var arr = [1, 2, 3, 4, 6, 7];
arr[10] = 99;
delete arr[10];
console.log(arr.length)

(function(){
var a = b = 3;
})
console.log(a);

var name = "Adarsh"
function outer(){
    function inner(){
        console.log(this.name) // Adarsh
    }
  inner();
}
outer();

['1', '7', '11'].map(parseInt) // [1,NaN,3]

arr = [1,5,6,1,0,1];
console.log(arr+99) // 1,5,6,1,0,199

let obj ={}
obj[[]] = 12
obj[[[]]] = 80

console.log(obj[[]],obj[[[]]])  // 80 80

var b=1;
function outer(){
  var b=2
     function inner(){
        b++;
        var b=3;
        console.log(b)  // 3
    }inner();
}outer();

It's all about two queues in JS
- MacroTask (Default One)
- Microtask (Callbacks/async calls)

Note: setTimeout() lies in the macrotask

const promise1 = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
});
promise1.then(() => {
  console.log(3);
});
console.log(4);

// 1 4 3

const promise1 = new Promise((resolve, reject) => {
  console.log(1);
});
promise1.then(() => {
  console.log(3);
});
console.log(4);

// 1 4

const promise1 = new Promise((resolve, reject) => {
    console.log(1)
    resolve('resolve1')
})
const promise2 = promise1.then(res => {
    console.log(res)
})
console.log('promise1:', promise1);
console.log('promise2:', promise2);

//  Try it out 😜

const fn = () => (new Promise((resolve, reject) => {
    console.log(1)
    resolve('success')
}));

fn().then(res => {
    console.log(res)
});

console.log(2)

// 1 2 success

console.log('start')
setTimeout(() => {
    console.log('setTimeout')
})
Promise.resolve().then(() => {
    console.log('resolve')
})
console.log('end')

// start end setTimeout resolve

const promise = new Promise((resolve, reject) => {
    console.log(1);
    setTimeout(() => {
        console.log("timerStart");
        resolve("success");
        console.log("timerEnd");
    }, 0);
  console.log(2);
});

promise.then((res) => {
  console.log(res);
});

console.log(4);

// 1 2 4 timerStart timerEnd success

const timer1 = setTimeout(() => {
    console.log('timer1');

const timer3 = setTimeout(() => { 
    console.log('timer3')
  }, 0)
}, 0)

const timer2 = setTimeout(() => {
  console.log('timer2')
}, 0)

console.log('start')

// start timer1 timer2 timer3

prafful entries
 return the character which has maximum number of appearance
 this is the string passed -> maxChar("abaacaacd")
//below is my in-complete attempt 
function maxChar(charList) {
var list = charList;
var counterObj = {a:0}
var result;
for(let i=0;i<list.length;i++){
	if(!list[i] in counterObj){
  	counterObj.list[i] = 0;
  }
  counterObj.lis[i]=counterObj.lis[i]+1;

}

}