Join Telegram group - t.me/Reactjs_Interview instagram.com/dev.roshan_ Please don't judge and comments on my answers. This is just the interview experience and If you know the right answers please comment below which can also help others.
Timestamps: 0:56 What is Hoisting in JS? 1:16 How it works? 1:44 What is difference between let and var? 2:17 What is Event Loop? 2:47 What is precedence in Event Loop? 3:29 What is difference between setTimeout and setInterval? 4:27 Where do you use Rest Operator? 5:36 Have you heard of array.reverse? 6:03 What is meant by Shallow copy and Deep copy? 7:11 What are Closure? 8:08 Have you used reduce function in JS? 8:19 What is the difference between map and reduce? 9:24 What are the parameters map function accepts? 9:49 What is difference between a Promise and a Callback? 10:23 What position attributes in CSS have you used? 10:35 What is the difference between them? 12: 32 What is Flexbox? 13:13 What is difference between display=none and visibility=hidden? 13:48 What are the Hooks you have used? 14:34 What is the purpose of useCallback? 14:48 What are Class based Lifecycle methods? 16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component? 17:58 What are Pure Components and its purpose? 19:27 What are Higher Order components? 20:07 What HOCs have you used? 20:29 Have you used Context API? 20:46 Already have state management in React, so why go for Redux? 21:06 How Redux works? 22:27 Have you used any Middlewares? 22:42 What is the purpose of using middlewares?
0:56 What is Hoisting in JS? - Mechanism of JavaScript Engine where it makes variables available to the program even before code execution starts. 1:16 How it works? - Whenever JavaScript code runs, It creates a special data structure called Execution Context where it stores meta data related of the code, as well as takes care of mechanism like defining the variable then assinging value to variables. Direct effect of this on code is whenever you've variable used before it's assingment or you've used a function expression. Value will be accessible to the code when it actually starts running. 1:44 What is difference between let and var? let and var: - let is not hoisted but not accessible in execution phase means trying to access variable will end up with A TDZ error. for var it works. - let has a block scope and var has a lexical scope. - let can't be redeclared but var can. let and const: - Not much of distinction apart from the fact that u can assign value to const only once but in case of let it can be re-assigned. Thier variable cycle is same. 2:17 What is Event Loop? - A mechanism to control execution order of a piece of code which is not JavaScript but something like web-API. 2:47 What is precedence in Event Loop? - Majority of WebAPIs are higher order functions and they accept callbacks or based on promise. They are majorly divided into two parts: Macro and Mico. Macro includes things like Timer Functions, RequestAnimationFrame , Micro includes things like Fetch API etc. 3:29 What is difference between setTimeout and setInterval? - Both are higher order function and part of WEB API interface. The main goal of them to control time aspect of the program aka defer the execution. 4:27 Where do you use Rest Operator? - I know how to use it but don't remember line by line definition. Dont remember dont care. 5:36 Have you heard of array.reverse? - Yes, a method available on Array.prototype and It's a destructive or in-line method with no return value. 6:03 What is meant by Shallow copy and Deep copy? - For any complex data structure it includes layers of data to it. Shallow copy basically means you've fist layer copy of the data structure but internal layers still have reference for non-primitive data. Deepcopy means you've a new copy of data and if any internal layer data is reference type of data for them the pointers are also new. 7:11 What are Closure? - Closure is special effect where an higher order function sets data to it's returning function during execution. The returning function has access to those data even the exectuion has finished because variables are saved in permanent memory.
8:08 Have you used reduce function in JS? - A higher order function thats based on pattern on Reduction aka it'll work through given data resulting into a single value. 8:19 What is the difference between map and reduce? - Both are higher order Array methods available via Array.prototype. Map returns an array but Reduce can return any data types based on it's callback function operation. 9:24 What are the parameters map function accepts? - Map takes a callback and this callback can have first item, index and array itself. 9:49 What is difference between a Promise and a Callback? - Promise a special data structure or object primarily build for values that takes some time to come by. The main implementation for this to use in any situation where data takes some time to load. Eg. Loading an image? Calling an API? Loading a JavaScript? A Callback is a function whose mechanism is also grab the data that takes some time. It always consumed by a higher order function who's job is to invoke it whenever data comes back. 10:23 What position attributes in CSS have you used? - static, fixed, sticky, relative, unset ? 10:35 What is the difference between them? - static is general position set by your brower when it parses and fixes position of an element during rendering. - fixed position basically means that dom element is taken out from normal position and posioned based on nearest dom element which has a position of relative. - sticky: I forgot but it's on the same line as fixed but in context of a contaier. - unset: reseting it back to default position value (I may be wrong) 12: 32 What is Flexbox? - One of the layout technique whose main job is to set internal display properly of a container. It means you can easily manipulate how children elements of container are laid out. It's well fit of 2-d layouting. You can lay out elements on X-axis , Y-axis , any order etc 13:13 What is difference between display=none and visibility=hidden? - display none means browser does not create a dom node for the given html element means it does not have box with padding, margin, width and size. - visibility hidden means browser do render the element and adds all the attributes/values to the given html don.
13:48 What are the Hooks you have used? - useEffect, useRef, useSet, etc 14:34 What is the purpose of useCallback? - Ive used it but I don't remember and don't care. 14:48 What are Class based Lifecycle methods? - Basically Mount, UnMount, Change In Dom leaf etc 16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component? - useEffect bhai. 17:58 What are Pure Components and its purpose? - Basically purpose is to save extra rendering dom nodes which has the change and not the whole leaf of nodes. 19:27 What are Higher Order components? - A wrapper with specific property abstracted that can be passed down to any other components for use. Basically we would like to use it whenever we've situation to share a piece of code again and again. 20:07 What HOCs have you used? - What do you mean? HOCs can be custom or builtin. 20:29 Have you used Context API? - Yes, for a pet project but not for production Project. 20:46 Already have state management in React, so why go for Redux? - Because your app will be bloated when your app scales,shared data relationsip manipulation will increase leading various mutation all over the place. It'll make your code hard to debug or add a new feature to and you'll be running around like a chicken with it's head chopped off. Please use Redux. 21:06 How Redux works? - It's like a client side DB. The basic premise is based on Higher order function which have access to store/client-db data and can pass it using to other function again using HOC. Redux DB --> Access/Read the DB: A component that needs DB (wrap it using Redux Higher order function) , Access via props. Manipulate/Change the DB: Send a signal (run Action function which takes an Action object) with some data to Redux DB The Action object then goes to reducer which is an utility function to check type of operation and then manipulates your global state. Redux can also handle side effects like an API call, DOM based manipulation etc but on it's core it does not have it and you need to use a library like redux-thunk, redux-saga. 22:27 Have you used any Middlewares? - Yes, in context of Redux. Middlewares are nothing but plugin to provide features that Redux itself does not have. Main purpose is to enhance Redux capabilities. eg. Redux Saga. 22:42 What is the purpose of using middlewares? - Answered your question in prev question.
Wow , I have never given an interview and nor prepare myself for interview ever, I just study little bit JavaScript in some phases like study for 4 days again i leave it and again i start after a month like this and i'm surprise that i know the answer of those question around 65 %TO 70%
1. What is hoisting in US? 2. How does it work? 3. What is the difference between let and var? 4. What is the Event Loop? 5. What is precedence in the Event Loop? 6. What is the difference between setTimeout and setInterval? 7. Where do you use the Rest Operator? 8. Have you heard of array.reverse? 9. What is meant by Shallow copy and Deep copy? 10. What are Closures? 11. Have you used the reduce function in JS? 12. What is the difference between map and reduce? 13. What parameters does the map function accept? 14. What is the difference between a Promise and a Callback? 15. What position attributes in CSS have you used? 16. What is the difference between them? 17. What is Flexbox? 18. What is the difference between display=none and visibility=hidden? 19. What Hooks have you used? 20. What is the purpose of useCallback? 21. What are Class-based Lifecycle methods? 22. How can you achieve componentDidMount, componentDidUpdate & componentDidUnMount in a functional-based component? 23. What are Pure Components and their purpose? 24. What are Higher Order components? 25. What HOCs have you used? 26. Have you used the Context API? 27. You already have state management in React, so why go for Redux? 28. How does Redux work? 29. Have you used any Middlewares? 30. What is the purpose of using middlewares? -Go Get the job- 😅😅😅😅😅😅😅
Hosting works for all var, let and const. It's just variables defined by let and const are in temporal deadzone which cann't be accessible hence we get error. Else all three(var,let,const) are hoisted.
For the deep copy question, the main idea is that if an object (say an array) contains another object (say, ...well, um, an Object), doing a copy such as Array.from, or rest restructuring, or whatever, will only create a new object in the sense that all primitive contained values will be new. However, all child objects will continue to be referenced from the original object, so modifying such a child object affects the original object. This is a really tricky bug if you're not aware of this behavior. Deep copying refers to any of a series of methods that ensure that a copy of an object does not contain any child elements that reference other objects outside the newly created parent object. The simplest way I know to do a deep copy is JSON.parse(JSON.stringify(YOUR_OBJECT)). The idea here is, however Nast your object is, you just turn it into a simple string. Strings are quantified by value, they don't know where they came from, so it breaks any reference to the original object. So JSON.stringify turns your deeply nested object into a string, and JSON.parse turns that string back into an object, but a completely new one this time. Another way you could go about this is to build a custom recursive function that can crawl the entire data-structure and do your deep copy that way. An example is non-trivial, so I won't try. The JSON method is relatively slow, but in practice, if you're working with small, deeply nested objects, you'll be okay. Better yet if you perform deep-copies infrequently. In practice, you can often get away with a shallow copy (i.e., something along the lines of {...my_object} or [...my_array]) but it's good to be aware of this behavior. Also, because this is a react interview, I'll also mention that in react, we work with state, and state is typically destroyed at the end of every render, and a new state is created at the beginning of the next render cycle. Further, react is actually quite opinionated mutating states (i.e. you don't!), so it's unlikely that you'll generate a bug like this in the course of working on your project. Hopefully, this helped someone see why this is actually a very interesting question. btw, I recommend opening your console for a few minutes right now. Make a simple nested object and play around with restructured copy (es6 style). You'll see that shallow copies are a thing :) edit: I took my own advice and played with shallow copy in the console. This got me interested in a recursive solution, so I wrote a generalized algorithm for doinga deep copy of an generic object: _____________ function deepCopy(obj) { const isArray = (arr) => Array.isArray(arr); const isObject = (obj) => typeof obj === "object" && obj !== null; if (isArray(obj)) { const finArray = []; for(let element of obj) { if (isArray(element) || isObject(element)) { finArray.push(deepCopy(element)); } else finArray.push(element); }; return finArray; } else if (isObject(obj)) { const keys = Object.keys(obj); const finObject = {}; for(let key of keys) { const element = obj[key]; if (isArray(element) || isObject(element)) { finObject[key] = deepCopy(element); } else finObject[key] = element; }; return finObject; }; return obj; }; ________
Loop over the object, check if nested value is a reference value, spread the value in your new object. You're basically flattening an object and array.
Microtasks in c++ libuv library of V8 have higher precedence over macrotasks. So at each loop run, event loop first checks the micro task queue and then the macrotask queue. Promise.then spawns microtask, setTmeout spawns macro.
Thank you. I paused every question and tried to answer it myself. The once i couldn't answer learned it before resuming to the answer. I felt like i had gone through an interview myself.
What is Hoisting in JS? How it works? What is difference between let and var? What is Event Loop? What is precedence in Event Loop? What is difference between setTimeout and setInterval? Where do you use Rest Operator? Have you heard of array.reverse? What is meant by Shallow copy and Deep copy? What are Closure? Have you used reduce function in JS? What is the difference between map and reduce? What are the parameters map function accepts? What is difference between a Promise and a Callback? What position attributes in CSS have you used? What is the difference between them? What is Flexbox? What is difference between display=none and visibility=hidden? What are the Hooks you have used? What is the purpose of useCallback? What are Class based Lifecycle methods? How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component? What are Pure Components and its purpose? What are Higher Order components? What HOCs have you used? Have you used Context API? Already have state management in React, so why go for Redux? How Redux works? Have you used any Middlewares? What is the purpose of using middlewares?
The interview is so clean and to the point and not hard but when i go to any company to give interview they ask me too much difficult question that's hard to aanswer without google. Everything is possible just need to search on Google and stack overflow
Interviews like this aren't for Google searching. Interviews are like this are to check if you know things or not. This interview was nothing more than a generic themed interview one sees in daily development.
There are two types of queues micro task queue and macro task queue .so micro task queue holds promises and macro task queue holds setTiemout, setInterval.so the event loop give the precedence for micro task queues
hoisting works for let, const and var but while using let and const it creates a temporal dead zone where we cannot access these variable and in that scenerio you will get reference error and javascript is sitll aware of that variable but only make restrictions of using it at TDZ
Mostly media query se website responsive hotaa hai. Flexbox mein aap sirf navigation part ko adjustment kartey ho. It is basically use for adding smoothness & it is easy to use tool for handling texts, images with the respective to it's contents. Media queries ke binaa website responsive nhi ho saktaa hai. It's difficult to create an responsive website without media queries.
The interviewer himself sounds like a candidate! 😂 Candidate sounds like the Boss! Maybe the interviewer is a confused jio/airtel customer taking to customerCare staff 😂
Please correct me if I am wrong memorize in react it is use to avoid re render component. We can use by useMemo(functional component name).. it change if state or props have changed
If you check javascript spec documents provided by ecma you will not find the word hoisting. It is coined by developer community. We all had wrong idea that javascript does not compile.
Reduce function has 2 parameters ( accumulator or total and current value) Var reducedArr = Arr.reduce(acc , curr) { Return acc += curr } Display none .... Removes the element from Dom Visibility hidden..... Hides from UI but it there's in the Dom React 1st render function will get call then constructor then getderivedstatefromprops the life-cycle of react
I work in non tech job profile...I am not into technical jobs ...still i enjoyed listening to this interview because this person confidently answered all the questions ....
When a variable is declared with "let" keyword, JS Engine hoist it and till it is not initialized the some value, the gap time between them is called Temporal Dead Zone.
@@kshitijvengurlekar1192 Yes they are in temporal dead zones but saying they are not hoisted could be wrong. They are hoisted but just not the way VAR is.
bro, hoisting will happen for all the variables not only for 'var' keyword. for let and const values will store in separate memory location and will be in temporal dead zone.
at 20:46, i think interviewer wanted to hear about prop drilling, and data sharing problem (parent to child) in react. That is the main reason for using state management libraries like redux.
Face to face interviews gonna gradually reduce in future. Companies and candidates have already adapted to virtual meetings. Its zero cost and easy to schedule and manage. So u better adapt as well for ur own sake
@@gentleman_in_peace yeah but there will be a chance of cheating as well as sometimes both candidate and interviewer not able to elaborate what is the actual question..here interviewer may think that the candidate is not serious/ or not listening him properly and blaw blaw.... In case of candidates there may be a network problem due to which he/she can be rejected
0:20 Interviewer: Which version of React are you using Interviewee: I am using the latest one **silence Interviewer: Ok proceeds to asking next question
at 2:31 , wrong ... javascript uses the call stack but not the FIFO rather LIFO principle. Don't know how he got selected??? Also js uses one call stack and one memory heap and executes one operation at a time ( single - threaded).
I have applied for EY multiple times, but my resume never got shortlisted. Received rejection mail. I have 3 years of react js experience. I applied 5-6 months back. Was it because i was working in startups back then and EY hires only those who has worked in reputed organisations? Because I don't believe my resume lacked anything. Any idea?
Can i please know what position this was for and for how much ctc? Because im trying to asses the level of interview here and it seemed pretty mediocre. Ps- myself a SE with 1.25 years of experience
*JS Questions asked in this interview are:* 1). What is hoisting in JS? 2). How it works? 3). Does hoisting work with all the variables, and Why? 4). Diff. b/ "let" and "var"? 5). What is Event Loop? 6). What is the precedence in Event Loop? ( between Promise() and setTimeout() ) 7). What is the Diff. b/ "setTimeout()" & "setInterval()"? 8). What are the ES6 features you have used? 9). Where do you mostly use Rest Operator? 10). Write a JS program to check whether a string is Palindrome or not? 11). What are the usage of Array.reverse()? 12). What do you mean by "Shallow Copy" and "Deep Copy"? 13). What are the Closures in JS? 14). Diff. b/ "map()" and "reduce()"?
1)Different position attributes in css 2)What is flexbox 3)display none and visibility hidden 4)hooks you used 5)usememo, usecallback hook 6)class based life cycle 7)pure components 8)context api 9)why redux instead of context api 10)how redux works 11)Middleware
The answer for middleware is not correct. If u need middleware to just intercept request, then even front end interceptors can do that. The main reason for Middleware is security and server based computing.
Hoisting : makes some type of variables accessible in the code before they are actually declared . " automatically lifted to the top of their scope " i don't think this is correct , before Executuon code is scanned for variable declaration and for each variable a new property is created in a variable environment obj. (Let and const not hosted in practice - their initial value is uninitialized, tdz )
Flexbox is used for responsive design? I thought flexbox is used to align things either horizontally or vertically. We use media queries for responsive design.
I am fresher and job less but i can explain questions of javascript, css, and some React questions better than him. But i am not feeling confident yet !
I am a BA student passed in 2019 and in the year 2023 I decided to work as a front end web developer and I learn HTML, CSS, JavaScript, React.js and Git/GitHub now I am not able to build my resume and I don't understand how to get a internship or a job. Please brother help me out.
Wonder why so many React interviews are so focused on class components… This is 2022, it’s been over 3years already since hooks and functional components became a thing… I see this a lot and I really don’t get
so you give wrong answer for hoisting. hoisting in JavaScript involves moving the declarations of variables and functions to the top of their containing scope during the compilation phase. well var ,let and const all got hoisted in diffrent manner. in memory creation phase var get undefiend but let and const load in temporal dead zone.
good set of questions as per your experience. but don't have confidence while answering. you have knowledge of each topic. I would never select as a experience candidate
Timestamps: 0:56 What is Hoisting in JS? 1:16 How it works? 1:44 What is difference between let and var? 2:17 What is Event Loop? 2:47 What is precedence in Event Loop? 3:29 What is difference between setTimeout and setInterval? 4:27 Where do you use Rest Operator? 5:36 Have you heard of array.reverse? 6:03 What is meant by Shallow copy and Deep copy? 7:11 What are Closure? 8:08 Have you used reduce function in JS? 8:19 What is the difference between map and reduce? 9:24 What are the parameters map function accepts? 9:49 What is difference between a Promise and a Callback? 10:23 What position attributes in CSS have you used? 10:35 What is the difference between them? 12:32 What is Flexbox? 13:13 What is difference between display=none and visibility=hidden? 13:48 What are the Hooks you have used? 14:34 What is the purpose of useCallback? 14:48 What are Class based Lifecycle methods? 16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component? 17:58 What are Pure Components and its purpose? 19:27 What are Higher Order components? 20:07 What HOCs have you used? 20:29 Have you used Context API? 20:46 Already have state management in React, so why go for Redux? 21:06 How Redux works? 22:27 Have you used any Middlewares? 22:42 What is the purpose of using middlewares?
![Fresher's Frontend Interview 🎉 | JavaScript | #reactjs (Mock) [Most Asked Questions -2023]](http://i.ytimg.com/vi/oDNmGfAIpQY/mqdefault.jpg)
Join Telegram group - t.me/Reactjs_Interview
instagram.com/dev.roshan_
Please don't judge and comments on my answers.
This is just the interview experience and If you know the right answers please comment below which can also help others.
Of how many years experience you have ? When you was interviewed ??
@@jiteshjoshi8170 2+
Well done bro.. but I would suggest you not to disclose interview recordings online.
@@haialex123 why ??
@@jiteshjoshi8170 we are not supposed to record the interview without consent.
Timestamps:
0:56 What is Hoisting in JS?
1:16 How it works?
1:44 What is difference between let and var?
2:17 What is Event Loop?
2:47 What is precedence in Event Loop?
3:29 What is difference between setTimeout and setInterval?
4:27 Where do you use Rest Operator?
5:36 Have you heard of array.reverse?
6:03 What is meant by Shallow copy and Deep copy?
7:11 What are Closure?
8:08 Have you used reduce function in JS?
8:19 What is the difference between map and reduce?
9:24 What are the parameters map function accepts?
9:49 What is difference between a Promise and a Callback?
10:23 What position attributes in CSS have you used?
10:35 What is the difference between them?
12: 32 What is Flexbox?
13:13 What is difference between display=none and visibility=hidden?
13:48 What are the Hooks you have used?
14:34 What is the purpose of useCallback?
14:48 What are Class based Lifecycle methods?
16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component?
17:58 What are Pure Components and its purpose?
19:27 What are Higher Order components?
20:07 What HOCs have you used?
20:29 Have you used Context API?
20:46 Already have state management in React, so why go for Redux?
21:06 How Redux works?
22:27 Have you used any Middlewares?
22:42 What is the purpose of using middlewares?
Thnx
Thanks a lot..
0:56 What is Hoisting in JS?
- Mechanism of JavaScript Engine where it makes variables available to the program even before code execution starts.
1:16 How it works?
- Whenever JavaScript code runs, It creates a special data structure called Execution Context where it stores meta data related of the code, as well as takes care of mechanism like defining the variable then assinging value to variables. Direct effect of this on code is whenever you've variable used before it's assingment or you've used a function expression. Value will be accessible to the code when it actually starts running.
1:44 What is difference between let and var?
let and var:
- let is not hoisted but not accessible in execution phase means trying to access variable will end up with A TDZ error.
for var it works.
- let has a block scope and var has a lexical scope.
- let can't be redeclared but var can.
let and const:
- Not much of distinction apart from the fact that u can assign value to const only once but in case of let it can be re-assigned.
Thier variable cycle is same.
2:17 What is Event Loop?
- A mechanism to control execution order of a piece of code which is not JavaScript but something like web-API.
2:47 What is precedence in Event Loop?
- Majority of WebAPIs are higher order functions and they accept callbacks or based on promise.
They are majorly divided into two parts: Macro and Mico. Macro includes things like Timer Functions, RequestAnimationFrame ,
Micro includes things like Fetch API etc.
3:29 What is difference between setTimeout and setInterval?
- Both are higher order function and part of WEB API interface. The main goal of them to control time aspect of the program aka defer the execution.
4:27 Where do you use Rest Operator?
- I know how to use it but don't remember line by line definition. Dont remember dont care.
5:36 Have you heard of array.reverse?
- Yes, a method available on Array.prototype and It's a destructive or in-line method with no return value.
6:03 What is meant by Shallow copy and Deep copy?
- For any complex data structure it includes layers of data to it. Shallow copy basically means you've fist layer copy of the data structure but internal layers still have reference for non-primitive data. Deepcopy means you've a new copy of data and if any internal layer data is reference type of data for them the pointers are also new.
7:11 What are Closure?
- Closure is special effect where an higher order function sets data to it's returning function during execution. The returning function has access to those data even the exectuion has finished because variables are saved in permanent memory.
8:08 Have you used reduce function in JS?
- A higher order function thats based on pattern on Reduction aka it'll work through given data resulting into a single value.
8:19 What is the difference between map and reduce?
- Both are higher order Array methods available via Array.prototype. Map returns an array but Reduce can return any data types based on it's callback function operation.
9:24 What are the parameters map function accepts?
- Map takes a callback and this callback can have first item, index and array itself.
9:49 What is difference between a Promise and a Callback?
- Promise a special data structure or object primarily build for values that takes some time to come by. The main implementation for this to use in any situation where data takes some time to load. Eg. Loading an image? Calling an API? Loading a JavaScript?
A Callback is a function whose mechanism is also grab the data that takes some time. It always consumed by a higher order function who's job is to invoke it whenever data comes back.
10:23 What position attributes in CSS have you used?
- static, fixed, sticky, relative, unset ?
10:35 What is the difference between them?
- static is general position set by your brower when it parses and fixes position of an element during rendering.
- fixed position basically means that dom element is taken out from normal position and posioned based on nearest dom element which has a position of relative.
- sticky: I forgot but it's on the same line as fixed but in context of a contaier.
- unset: reseting it back to default position value (I may be wrong)
12: 32 What is Flexbox?
- One of the layout technique whose main job is to set internal display properly of a container. It means you can easily manipulate how children elements of container are laid out. It's well fit of 2-d layouting. You can lay out elements on X-axis , Y-axis , any order etc
13:13 What is difference between display=none and visibility=hidden?
- display none means browser does not create a dom node for the given html element means it does not have box with padding, margin, width and size.
- visibility hidden means browser do render the element and adds all the attributes/values to the given html don.
13:48 What are the Hooks you have used?
- useEffect, useRef, useSet, etc
14:34 What is the purpose of useCallback?
- Ive used it but I don't remember and don't care.
14:48 What are Class based Lifecycle methods?
- Basically Mount, UnMount, Change In Dom leaf etc
16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component?
- useEffect bhai.
17:58 What are Pure Components and its purpose?
- Basically purpose is to save extra rendering dom nodes which has the change and not the whole leaf of nodes.
19:27 What are Higher Order components?
- A wrapper with specific property abstracted that can be passed down to any other components for use. Basically we would like to use it whenever we've situation to share a piece of code again and again.
20:07 What HOCs have you used?
- What do you mean? HOCs can be custom or builtin.
20:29 Have you used Context API?
- Yes, for a pet project but not for production Project.
20:46 Already have state management in React, so why go for Redux?
- Because your app will be bloated when your app scales,shared data relationsip manipulation will increase leading various mutation all over the place. It'll make your code hard to debug or add a new feature to and you'll be running around like a chicken with it's head chopped off. Please use Redux.
21:06 How Redux works?
- It's like a client side DB. The basic premise is based on Higher order function which have access to store/client-db data and can pass it using to other function again using HOC.
Redux DB -->
Access/Read the DB: A component that needs DB (wrap it using Redux Higher order function) , Access via props.
Manipulate/Change the DB: Send a signal (run Action function which takes an Action object) with some data to Redux DB
The Action object then goes to reducer which is an utility function to check type of operation and then manipulates your global state.
Redux can also handle side effects like an API call, DOM based manipulation etc but on it's core it does not have it and you need to use a library like redux-thunk, redux-saga.
22:27 Have you used any Middlewares?
- Yes, in context of Redux. Middlewares are nothing but plugin to provide features that Redux itself does not have. Main purpose is to enhance Redux capabilities. eg. Redux Saga.
22:42 What is the purpose of using middlewares?
- Answered your question in prev question.
Thank you bhai
Wow , I have never given an interview and nor prepare myself for interview ever, I just study little bit JavaScript in some phases like study for 4 days again i leave it and again i start after a month like this and i'm surprise that i know the answer of those question around 65 %TO 70%
1. What is hoisting in US?
2. How does it work?
3. What is the difference between let and var?
4. What is the Event Loop?
5. What is precedence in the Event Loop?
6. What is the difference between setTimeout and setInterval?
7. Where do you use the Rest Operator?
8. Have you heard of array.reverse?
9. What is meant by Shallow copy and Deep copy?
10. What are Closures?
11. Have you used the reduce function in JS?
12. What is the difference between map and reduce?
13. What parameters does the map function accept?
14. What is the difference between a Promise and a Callback?
15. What position attributes in CSS have you used?
16. What is the difference between them?
17. What is Flexbox?
18. What is the difference between display=none and visibility=hidden?
19. What Hooks have you used?
20. What is the purpose of useCallback?
21. What are Class-based Lifecycle methods?
22. How can you achieve componentDidMount, componentDidUpdate & componentDidUnMount in a functional-based component?
23. What are Pure Components and their purpose?
24. What are Higher Order components?
25. What HOCs have you used?
26. Have you used the Context API?
27. You already have state management in React, so why go for Redux?
28. How does Redux work?
29. Have you used any Middlewares?
30. What is the purpose of using middlewares?
-Go Get the job-
😅😅😅😅😅😅😅
Hoisting has same meaning in US as well as India
@Yahoo_marathi 😂😂😂😂
Understanding fundamental concepts are important than remembering syntax. Also How to google well is an underrated skill.
Hosting works for all var, let and const. It's just variables defined by let and const are in temporal deadzone which cann't be accessible hence we get error. Else all three(var,let,const) are hoisted.
Thanks for explaining
Akshay Saini
why var doesn't go to the temporal dead zone
You great give me some experience sir
No it's only works for var
For the deep copy question, the main idea is that if an object (say an array) contains another object (say, ...well, um, an Object), doing a copy such as Array.from, or rest restructuring, or whatever, will only create a new object in the sense that all primitive contained values will be new. However, all child objects will continue to be referenced from the original object, so modifying such a child object affects the original object. This is a really tricky bug if you're not aware of this behavior. Deep copying refers to any of a series of methods that ensure that a copy of an object does not contain any child elements that reference other objects outside the newly created parent object. The simplest way I know to do a deep copy is JSON.parse(JSON.stringify(YOUR_OBJECT)). The idea here is, however Nast your object is, you just turn it into a simple string. Strings are quantified by value, they don't know where they came from, so it breaks any reference to the original object. So JSON.stringify turns your deeply nested object into a string, and JSON.parse turns that string back into an object, but a completely new one this time. Another way you could go about this is to build a custom recursive function that can crawl the entire data-structure and do your deep copy that way. An example is non-trivial, so I won't try. The JSON method is relatively slow, but in practice, if you're working with small, deeply nested objects, you'll be okay. Better yet if you perform deep-copies infrequently. In practice, you can often get away with a shallow copy (i.e., something along the lines of {...my_object} or [...my_array]) but it's good to be aware of this behavior. Also, because this is a react interview, I'll also mention that in react, we work with state, and state is typically destroyed at the end of every render, and a new state is created at the beginning of the next render cycle. Further, react is actually quite opinionated mutating states (i.e. you don't!), so it's unlikely that you'll generate a bug like this in the course of working on your project. Hopefully, this helped someone see why this is actually a very interesting question. btw, I recommend opening your console for a few minutes right now. Make a simple nested object and play around with restructured copy (es6 style). You'll see that shallow copies are a thing :)
edit: I took my own advice and played with shallow copy in the console. This got me interested in a recursive solution, so I wrote a generalized algorithm for doinga deep copy of an generic object:
_____________
function deepCopy(obj) {
const isArray = (arr) => Array.isArray(arr);
const isObject = (obj) => typeof obj === "object" && obj !== null;
if (isArray(obj)) {
const finArray = [];
for(let element of obj) {
if (isArray(element) || isObject(element)) {
finArray.push(deepCopy(element));
} else finArray.push(element);
};
return finArray;
} else if (isObject(obj)) {
const keys = Object.keys(obj);
const finObject = {};
for(let key of keys) {
const element = obj[key];
if (isArray(element) || isObject(element)) {
finObject[key] = deepCopy(element);
} else finObject[key] = element;
};
return finObject;
};
return obj;
};
________
Thanks for explaining in details
Aisa mat likho varna RUclips wale limit lga denge comment par
Practical ki yaad dilati hai video😂😂
Json stringyfy method doesn't work when we have datetime in object. We have to use 3rd party library or custom functions
Wtf
Loop over the object, check if nested value is a reference value, spread the value in your new object.
You're basically flattening an object and array.
Microtasks in c++ libuv library of V8 have higher precedence over macrotasks. So at each loop run, event loop first checks the micro task queue and then the macrotask queue. Promise.then spawns microtask, setTmeout spawns macro.
Thank you. I paused every question and tried to answer it myself. The once i couldn't answer learned it before resuming to the answer. I felt like i had gone through an interview myself.
Appreciated 👍👏 Instead of judging you learnt from it. ❤️
Es6 have
Let and const
Arrow function
Spread and rest operator
Destructing
Map, reduce and filter
Promises
Bro the way you spoke with confidence, grew a lot of confidence in me too... Thanks!
Thank you 😊
most of them are getting depressed after watching this video
because every viewer want this much knowledge
What is Hoisting in JS?
How it works?
What is difference between let and var?
What is Event Loop?
What is precedence in Event Loop?
What is difference between setTimeout and setInterval?
Where do you use Rest Operator?
Have you heard of array.reverse?
What is meant by Shallow copy and Deep copy?
What are Closure?
Have you used reduce function in JS?
What is the difference between map and reduce?
What are the parameters map function accepts?
What is difference between a Promise and a Callback?
What position attributes in CSS have you used?
What is the difference between them?
What is Flexbox?
What is difference between display=none and visibility=hidden?
What are the Hooks you have used?
What is the purpose of useCallback?
What are Class based Lifecycle methods?
How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component?
What are Pure Components and its purpose?
What are Higher Order components?
What HOCs have you used?
Have you used Context API?
Already have state management in React, so why go for Redux?
How Redux works?
Have you used any Middlewares?
What is the purpose of using middlewares?
The interview is so clean and to the point and not hard but when i go to any company to give interview they ask me too much difficult question that's hard to aanswer without google. Everything is possible just need to search on Google and stack overflow
Interviews like this aren't for Google searching. Interviews are like this are to check if you know things or not. This interview was nothing more than a generic themed interview one sees in daily development.
There are two types of queues micro task queue and macro task queue .so micro task queue holds promises and macro task queue holds setTiemout, setInterval.so the event loop give the precedence for micro task queues
Thanks for explaining
hoisting works for let, const and var but while using let and const it creates a temporal dead zone where we cannot access these variable and in that scenerio you will get reference error and javascript is sitll aware of that variable but only make restrictions of using it at TDZ
Except shallow copy and deep copy i knew every answer.😁. Thanks for the video ☺️. It was really helpful
Glad it helps 🙂 Keep supporting 😊
You wont be able to answer under pressure
Yes, same...
Plz suggest me ı'm not getting job in react js how to prepare for interviews
Abb lagi job ki nahi?@@umairahmedofficial1
Great interview, you answered almost all questions correctly
Thank you 😊
I would say most answers are partially correct...you could only crack junior interview with this.
@@sourabhkejriwal5762 Haan Bhai sahi kaha. Questions perf, Accessibility and general system design pucha nehi. And most question rattu tota wale the.
Mostly media query se website responsive hotaa hai. Flexbox mein aap sirf navigation part ko adjustment kartey ho. It is basically use for adding smoothness & it is easy to use tool for handling texts, images with the respective to it's contents. Media queries ke binaa website responsive nhi ho saktaa hai. It's difficult to create an responsive website without media queries.
Indians saving our careers again🎉🎉🎉. Many thanks!
Glad you liked it 🙃
The interviewer himself sounds like a candidate! 😂 Candidate sounds like the Boss! Maybe the interviewer is a confused jio/airtel customer taking to customerCare staff 😂
Sahi 👌👌👌
@@DevAditya where can i follow you?
@@sentindr1404
telegram t.me/React_JS_India
Instagram instagram.com/dev.roshan_
I think this video is recorded by the candidate 😂😂😂
Amazing interview it wil help in feature
Thank you
Thanks for sharing your experience
Amazing experience thanks for this video.
Glad it was helpful!
I think memorize in react is responsible for cache storing and improving performance
Please correct me if I am wrong memorize in react it is use to avoid re render component. We can use by useMemo(functional component name).. it change if state or props have changed
If you check javascript spec documents provided by ecma you will not find the word hoisting. It is coined by developer community. We all had wrong idea that javascript does not compile.
useCallback and useMemo are both used for memoization. useCallback returns a function, useMemo returns a value.
Great interview btw 👍🏼
@Himanshu Patel arey bhai reactjs ki docs dekh le
Function is fully hoisted and variables are partially hoisted in hoisted phase
Reduce function has 2 parameters ( accumulator or total and current value)
Var reducedArr = Arr.reduce(acc , curr) {
Return acc += curr
}
Display none .... Removes the element from Dom
Visibility hidden..... Hides from UI but it there's in the Dom
React
1st render function will get call then constructor then getderivedstatefromprops the life-cycle of react
4 parameters
@@tapasdutta3595 .
@@sky73kothawade98 it has four parameters accumulator,currentvalue,index,array
First constructor then getdrivestate fromprops then render then componentsdidmount
I work in non tech job profile...I am not into technical jobs ...still i enjoyed listening to this interview because this person confidently answered all the questions ....
Thank you 🙃
He lacks communication skills
Good and very informmative. keep it up!😍
Thank you
Let and const also hoisted but they are available in script memory
Thanks for sharing very helpful..! 🙌
Let and const are also hoisted. You can check MDN documentation for the same. :)
When a variable is declared with "let" keyword, JS Engine hoist it and till it is not initialized the some value, the gap time between them is called Temporal Dead Zone.
@@AbhishekKumar-vl3cb namaste javascript 💯🌟
But they are in temporal dead zone and not accessible till the control comes on that line!
@@kshitijvengurlekar1192 Yes they are in temporal dead zones but saying they are not hoisted could be wrong. They are hoisted but just not the way VAR is.
@@SagarKumar-db2xy Agreed
It was a good interview...ig i should start learning react becuz i felt like i can answer html css js questions 😅
This is very helpful. If you can also update candidate work experience and CTC company is offering it's would be great.
Thank you
thank you ! for uploading
bro, hoisting will happen for all the variables not only for 'var' keyword. for let and const values will store in separate memory location and will be in temporal dead zone.
But that will give an Reference Error, which isiend of the day the same thing.
Hoisting happens in let and const as well. But there scope is not global so we gets error while accessing
Thanks for explaining
Very clean 🙌
Interviewer: Which version of React you're using ?
This Guy: I'm using Latest version 😆😆😆😆😆😆😆😆😆😆😆😆😆😆😂😂😂😂😂😂
🤣
getDerivedStateFromProps() method is used when the state of a component depends on changes of props.
wow nice interview rj.
Amazing interview 👍👍
We need more videos like this
Sure just Keep Supporting & Sharing 😊
bravo, watched all 20 minutes! interesting
Thank you 😊
at 20:46, i think interviewer wanted to hear about prop drilling, and data sharing problem (parent to child) in react. That is the main reason for using state management libraries like redux.
Yes, to avoid props drilling we uses Redux 😂😂.. i think after 20min he forget all the features
Thanks bro , its helpfull 😃😃
actually i prefer face to face interview as we connect with interviewer directly and can explain things very easily
Face to face interviews gonna gradually reduce in future. Companies and candidates have already adapted to virtual meetings. Its zero cost and easy to schedule and manage. So u better adapt as well for ur own sake
@@gentleman_in_peace yeah but there will be a chance of cheating as well as sometimes both candidate and interviewer not able to elaborate what is the actual question..here interviewer may think that the candidate is not serious/ or not listening him properly and blaw blaw....
In case of candidates there may be a network problem due to which he/she can be rejected
@@bharatmishra250 in ur either case candidate is at loosing end, not the company.
0:20
Interviewer: Which version of React are you using
Interviewee: I am using the latest one
**silence
Interviewer: Ok
proceeds to asking next question
😂
😂😂
😂😂
How is this candidate selected 😮
😂......his starting 2 minutes is enough to reject him
at 2:31 , wrong ... javascript uses the call stack but not the FIFO rather LIFO principle. Don't know how he got selected??? Also js uses one call stack and one memory heap and executes one operation at a time ( single - threaded).
I have applied for EY multiple times, but my resume never got shortlisted. Received rejection mail. I have 3 years of react js experience. I applied 5-6 months back. Was it because i was working in startups back then and EY hires only those who has worked in reputed organisations? Because I don't believe my resume lacked anything. Any idea?
It may be rejected automatically by thier portal software, there must be lacking something on your resume. Try with a different format once.
Try contacting directly HR
Hire a resume builder, it is only because of your resume, the algorithm works for key terms
Try to get referral , referral works better and it naturally does not need to go through portal software
Is EY that good?
Hoisting not only for var I think it supports for let const also
Asking question like that you can just memorize the question and answer for interview.🤔🤔
Var has local and global but let have local, global and block scope
Deep copy & Shallow copy - Call by Value & Call by reference..
Now its clear
Is this interview is for fresher or sr developer?
experience
@@DevAditya how much experience do you have?
@@poojasonawane3309 2+
2:28 Nope it's "Last in First Out" Method.
By default it's static. so the subchild will allign with child.
Itne easy questions puchhte h yr 🤔
Is this fresher interview?
Depends on the interviewer
Can i please know what position this was for and for how much ctc? Because im trying to asses the level of interview here and it seemed pretty mediocre. Ps- myself a SE with 1.25 years of experience
2+
2 crore?
@@parth1450 yes
@@DevAditya thik hai nai batana hai tho ...but aisa shock wala mazak bhi mat karo 😂
@@parth1450 that reply was for Experience 😂
We use Rest operator in the function declaration is the right answer....
*JS Questions asked in this interview are:*
1). What is hoisting in JS?
2). How it works?
3). Does hoisting work with all the variables, and Why?
4). Diff. b/ "let" and "var"?
5). What is Event Loop?
6). What is the precedence in Event Loop? ( between Promise() and setTimeout() )
7). What is the Diff. b/ "setTimeout()" & "setInterval()"?
8). What are the ES6 features you have used?
9). Where do you mostly use Rest Operator?
10). Write a JS program to check whether a string is Palindrome or not?
11). What are the usage of Array.reverse()?
12). What do you mean by "Shallow Copy" and "Deep Copy"?
13). What are the Closures in JS?
14). Diff. b/ "map()" and "reduce()"?
Thanks
Thanks man you are great 👍
15). Diff. between Promises and Callbacks
1)Different position attributes in css
2)What is flexbox
3)display none and visibility hidden
4)hooks you used
5)usememo, usecallback hook
6)class based life cycle
7)pure components
8)context api
9)why redux instead of context api
10)how redux works
11)Middleware
Thank you for posting video
🙂 keep supporting & sharing
What package did you get?
Hoisting does not work with let and const because of something called temporal dead zone.
It was introduced in es6 to remove this quirk of javascript.
Very insightful. Thank you
Thank you bro i really needed. Can you try doing interview with publicist sapient?
Sure, will try
The answer for middleware is not correct. If u need middleware to just intercept request, then even front end interceptors can do that.
The main reason for Middleware is security and server based computing.
Hoisting : makes some type of variables accessible in the code before they are actually declared .
" automatically lifted to the top of their scope " i don't think this is correct , before Executuon code is scanned for variable declaration and for each variable a new property is created in a variable environment obj.
(Let and const not hosted in practice - their initial value is uninitialized, tdz )
did you have corporate experience in react, redux at the time when you were in the interview?
Very helpful bro but i suggest you work on your communication because people judge you with that..especially during interviews
Agree & thanks for your suggestion 😊
Hey Kunal bro my communication is very weak can you guide?
Flexbox is used for responsive design? I thought flexbox is used to align things either horizontally or vertically. We use media queries for responsive design.
What package offered by this company?
0:21 The most epic answer 😂
😄
It was a redundant question.
@@gullukumar4497 yup😅
I am fresher and job less but i can explain questions of javascript, css, and some React questions better than him. But i am not feeling confident yet !
I am a BA student passed in 2019 and in the year 2023 I decided to work as a front end web developer and I learn HTML, CSS, JavaScript, React.js and Git/GitHub now I am not able to build my resume and I don't understand how to get a internship or a job. Please brother help me out.
Sure let’s connect topmate.io/Roshan
Was this interview for experiance hilder or fresher.
Wonder why so many React interviews are so focused on class components… This is 2022, it’s been over 3years already since hooks and functional components became a thing… I see this a lot and I really don’t get
I agree 💯
Very Helpful 👍
Glad it helps 🙂 Keep supporting
How did you record?
Mac ( CMD + shift + 5 )
@@DevAditya Ok. Which company did you join bro?
@@sachinnaik4477 EY, but got the offer from these all companies
@@DevAditya Congrats 🥳
Do you have EY video?
@@DevAditya How many rounds were there in EY?
can you share ur linkedin profile?
How much salary does it offered(just a brief idea) ?
hi bro,Nice interview!!!. what was the package they offered in this company?.
very useful ,thanks
He started with functional and now again he is using functional 😂😂😂
😂 nervousness
@@DevAditya hmm possibly..
Is he really got selected? Seems he has only memorised the definition from where… 😀
listening to an indian accent is pure suffering
pls upload more more videos like this
What's the salary category of this job?
as a fresher interview question kaha se padu??? please help any senior experience walo.....
What was your experience in number of years? I mean what was the role of this position? Senior or associate?
2+
@@DevAditya did u get the job
He have to ask properly like Explain difference between props and state
so you give wrong answer for hoisting.
hoisting in JavaScript involves moving the declarations of variables and functions to the top of their containing scope during the compilation phase.
well var ,let and const all got hoisted in diffrent manner.
in memory creation phase var get undefiend but let and const load in temporal dead zone.
good set of questions as per your experience. but don't have confidence while answering. you have knowledge of each topic. I would never select as a experience candidate
which company's interview it is and what is the salary they offered?
All variables can be hoisted .
Very easy interview what was the YEO of candidiate ?
Thanks
YEO?
I guess you are asking about the year of experience, right? @MaveNik
@@clan2839 Yes type mistake
bas data structure or algorithms ky questions jaan ni chorty
reactjs my Palidrome ka kia kaam
😅😅😅😅
who all r jobless raise their hand
Timestamps:
0:56 What is Hoisting in JS?
1:16 How it works?
1:44 What is difference between let and var?
2:17 What is Event Loop?
2:47 What is precedence in Event Loop?
3:29 What is difference between setTimeout and setInterval?
4:27 Where do you use Rest Operator?
5:36 Have you heard of array.reverse?
6:03 What is meant by Shallow copy and Deep copy?
7:11 What are Closure?
8:08 Have you used reduce function in JS?
8:19 What is the difference between map and reduce?
9:24 What are the parameters map function accepts?
9:49 What is difference between a Promise and a Callback?
10:23 What position attributes in CSS have you used?
10:35 What is the difference between them?
12:32 What is Flexbox?
13:13 What is difference between display=none and visibility=hidden?
13:48 What are the Hooks you have used?
14:34 What is the purpose of useCallback?
14:48 What are Class based Lifecycle methods?
16:37 How would you be able to achieve componentDidMount, componentDidUpdate & componentDidUnMount in functional based component?
17:58 What are Pure Components and its purpose?
19:27 What are Higher Order components?
20:07 What HOCs have you used?
20:29 Have you used Context API?
20:46 Already have state management in React, so why go for Redux?
21:06 How Redux works?
22:27 Have you used any Middlewares?
22:42 What is the purpose of using middlewares?
Thanks for summaries!
Thanks
thanks for the summary brother
@@WG26Gaming My pleasure
What is your educational qualification and how much package you got?
MCA
@@vishwanathhosmane7765 sorry can't disclose
@@vishwanathhosmane7765 DM me on Insta or Telegram, for more please check the description
@@vishwanathhosmane7765 Jharkhand