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;

}

}

CodeNinja96x/UI-Interview-Questions

UI Interview Questions

React

JavaScript

CSS

HTML

Code Snippets