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;

}

}