ReactJs Interview | 🎉 Selected | ReactJs & JavaScript | Experienced
#reactJs #interview
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/w "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?
Send your Interview Video at dev.roshann@gmail.com
Join Telegram group - t.me/Reactjs_Interview
Instagram - / dev.roshan_
Buy me a Coffee - www.buymeacoffee.com/dev_roshan
Frontend Interview
ReactJs Interview
React/Redux Coding Interview
Пікірлер: 481
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.
@jiteshjoshi8170
2 жыл бұрын
Of how many years experience you have ? When you was interviewed ??
@DevAditya
2 жыл бұрын
@@jiteshjoshi8170 2+
@haialex123
2 жыл бұрын
Well done bro.. but I would suggest you not to disclose interview recordings online.
@jiteshjoshi8170
2 жыл бұрын
@@haialex123 why ??
@haialex123
2 жыл бұрын
@@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?
@Unknown15605
10 ай бұрын
Thanks for summaries!
@digambarholgunde8835
3 ай бұрын
Thanks
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- 😅😅😅😅😅😅😅
Understanding fundamental concepts are important than remembering syntax. Also How to google well is an underrated skill.
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.
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.
@DevAditya
2 жыл бұрын
Thanks for explaining
@sonuprajapat7789
2 жыл бұрын
Akshay Saini
@amitmahato6404
2 жыл бұрын
why var doesn't go to the temporal dead zone
@1Ve4gaming
2 жыл бұрын
You great give me some experience sir
@nirajpatil9040
2 жыл бұрын
No it's only works for var
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.
@DevAditya
Жыл бұрын
Appreciated 👍👏 Instead of judging you learnt from it. ❤️
Bro the way you spoke with confidence, grew a lot of confidence in me too... Thanks!
@DevAditya
Жыл бұрын
Thank you 😊
Thanks for sharing your experience
Very clean 🙌
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; }; ________
@DevAditya
2 жыл бұрын
Thanks for explaining in details
@apnagamer61
2 жыл бұрын
Aisa mat likho varna KZread wale limit lga denge comment par Practical ki yaad dilati hai video😂😂
@ravirachchh4062
2 жыл бұрын
Json stringyfy method doesn't work when we have datetime in object. We have to use 3rd party library or custom functions
@PrinjuVaidyan
Жыл бұрын
Wtf
@dastaan3468
Жыл бұрын
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.
thank you ! for uploading
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
Es6 have Let and const Arrow function Spread and rest operator Destructing Map, reduce and filter Promises
Thanks for sharing very helpful..! 🙌
Amazing interview 👍👍
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
@gullukumar4497
Жыл бұрын
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.
Amazing experience thanks for this video.
@DevAditya
2 жыл бұрын
Glad it was helpful!
wow nice interview rj.
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.
Great interview, you answered almost all questions correctly
@DevAditya
2 жыл бұрын
Thank you 😊
@sourabhkejriwal5762
Жыл бұрын
I would say most answers are partially correct...you could only crack junior interview with this.
@gullukumar4497
Жыл бұрын
@@sourabhkejriwal5762 Haan Bhai sahi kaha. Questions perf, Accessibility and general system design pucha nehi. And most question rattu tota wale the.
Function is fully hoisted and variables are partially hoisted in hoisted phase
I think memorize in react is responsible for cache storing and improving performance
@musa7801
5 ай бұрын
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.
Except shallow copy and deep copy i knew every answer.😁. Thanks for the video ☺️. It was really helpful
@DevAditya
2 жыл бұрын
Glad it helps 🙂 Keep supporting 😊
@bryxxdore4150
2 жыл бұрын
You wont be able to answer under pressure
@umairahmedofficial1
2 жыл бұрын
Yes, same... Plz suggest me ı'm not getting job in react js how to prepare for interviews
@alloverworld6528
8 күн бұрын
Abb lagi job ki nahi?@@umairahmedofficial1
getDerivedStateFromProps() method is used when the state of a component depends on changes of props.
Good and very informmative. keep it up!😍
@DevAditya
Жыл бұрын
Thank you
Indians saving our careers again🎉🎉🎉. Many thanks!
@DevAditya
8 күн бұрын
Glad you liked it 🙃
Amazing interview it wil help in feature
@DevAditya
2 жыл бұрын
Thank you
very useful ,thanks
It was a good interview...ig i should start learning react becuz i felt like i can answer html css js questions 😅
Thank you for posting video
@DevAditya
2 жыл бұрын
🙂 keep supporting & sharing
thanks for sharing.
most of them are getting depressed after watching this video because every viewer want this much knowledge
Very insightful. Thank you
Var has local and global but let have local, global and block scope
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
@DevAditya
2 жыл бұрын
Thanks for explaining
We need more videos like this
@DevAditya
Жыл бұрын
Sure just Keep Supporting & Sharing 😊
Very Helpful 👍
@DevAditya
2 жыл бұрын
Glad it helps 🙂 Keep supporting
Let and const also hoisted but they are available in script memory
Hoisting not only for var I think it supports for let const also
This is very helpful. If you can also update candidate work experience and CTC company is offering it's would be great.
@DevAditya
2 жыл бұрын
Thank you
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?
did you have corporate experience in react, redux at the time when you were in the interview?
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 ....
@DevAditya
2 жыл бұрын
Thank you 🙃
@sakshiarora3565
Жыл бұрын
He lacks communication skills
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.
@Roronoa1062
Жыл бұрын
But that will give an Reference Error, which isiend of the day the same thing.
Asking question like that you can just memorize the question and answer for interview.🤔🤔
By default it's static. so the subchild will allign with child.
Hoisting happens in let and const as well. But there scope is not global so we gets error while accessing
@DevAditya
2 жыл бұрын
Thanks for explaining
pls upload more more videos like this
Abhi abhi seekha hai js, ye starting ke q to bade easy Lage 😶
useCallback and useMemo are both used for memoization. useCallback returns a function, useMemo returns a value. Great interview btw 👍🏼
@gullukumar4497
Жыл бұрын
@Himanshu Patel arey bhai reactjs ki docs dekh le
We use Rest operator in the function declaration is the right answer....
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.
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.
@musa7801
5 ай бұрын
Yes, to avoid props drilling we uses Redux 😂😂.. i think after 20min he forget all the features
Let and const are also hoisted. You can check MDN documentation for the same. :)
@AbhishekKumar-vl3cb
2 жыл бұрын
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.
@GauravTubeOfficial
2 жыл бұрын
@@AbhishekKumar-vl3cb namaste javascript 💯🌟
@kshitijvengurlekar1192
2 жыл бұрын
But they are in temporal dead zone and not accessible till the control comes on that line!
@SagarKumar-db2xy
2 жыл бұрын
@@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.
@kshitijvengurlekar1192
2 жыл бұрын
@@SagarKumar-db2xy Agreed
hi bro,Nice interview!!!. what was the package they offered in this company?.
He have to ask properly like Explain difference between props and state
What package did you get?
Very nice
@DevAditya
2 жыл бұрын
Thank you 😊
var creates property in Global object i.e. window and let does not
9:20 reduce take 2 parameter mostly accumaltor and current value
Very helpful bro but i suggest you work on your communication because people judge you with that..especially during interviews
@DevAditya
2 жыл бұрын
Agree & thanks for your suggestion 😊
@karan7596
Жыл бұрын
Hey Kunal bro my communication is very weak can you guide?
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?
@DevAditya
2 жыл бұрын
It may be rejected automatically by thier portal software, there must be lacking something on your resume. Try with a different format once.
@mrigankabora4835
2 жыл бұрын
Try contacting directly HR
@karna5171
2 жыл бұрын
Hire a resume builder, it is only because of your resume, the algorithm works for key terms
@gullukumar4497
Жыл бұрын
Try to get referral , referral works better and it naturally does not need to go through portal software
@shreyash8273
Жыл бұрын
Is EY that good?
bravo, watched all 20 minutes! interesting
@DevAditya
2 жыл бұрын
Thank you 😊
Thank you bro i really needed. Can you try doing interview with publicist sapient?
@DevAditya
2 жыл бұрын
Sure, will try
Deep copy & Shallow copy - Call by Value & Call by reference..
@Ranitdey
Жыл бұрын
Now its clear
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 😂
@arunsoni5471
2 жыл бұрын
Sahi 👌👌👌
@sentindr1404
2 жыл бұрын
@@DevAditya where can i follow you?
@DevAditya
2 жыл бұрын
@@sentindr1404 telegram t.me/React_JS_India Instagram instagram.com/dev.roshan_
@chulbulpandey7188
21 күн бұрын
I think this video is recorded by the candidate 😂😂😂
How much salary does it offered(just a brief idea) ?
function and classes also in Hoisting
Is he really got selected? Seems he has only memorised the definition from where… 😀
as a fresher interview question kaha se padu??? please help any senior experience walo.....
This interview was for fresher or you were having some experience that time? Because i have given some interviews they ask to do heavy coding. I failed many and its giving me dipression.
@DevAditya
2 жыл бұрын
2+ Depends on the interviewer
Was this interview for experiance hilder or fresher.
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 !
What's the salary category of this job?
which company's interview it is and what is the salary they offered?
Please mention the years of experience
Supeb
@DevAditya
2 жыл бұрын
thank you
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 )
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
@DevAditya
2 жыл бұрын
2+
@parth1450
2 жыл бұрын
2 crore?
@DevAditya
2 жыл бұрын
@@parth1450 yes
@parth1450
2 жыл бұрын
@@DevAditya thik hai nai batana hai tho ...but aisa shock wala mazak bhi mat karo 😂
@DevAditya
2 жыл бұрын
@@parth1450 that reply was for Experience 😂
Freshers or experienced? Which one you are?
bro what package they offer in this
Which company was person interviewing from
I think you need more preparation 👍
Shallow copy vs deep copy, he got confused i think.
Itne easy questions puchhte h yr 🤔 Is this fresher interview?
@DevAditya
2 жыл бұрын
Depends on the interviewer
Is this interview is for fresher or sr developer?
@DevAditya
2 жыл бұрын
experience
@poojasonawane3309
2 жыл бұрын
@@DevAditya how much experience do you have?
@DevAditya
2 жыл бұрын
@@poojasonawane3309 2+
*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()"?
@DevAditya
2 жыл бұрын
Thanks
@manojlandge9149
2 жыл бұрын
Thanks man you are great 👍
@miantaimoortahir175
2 жыл бұрын
15). Diff. between Promises and Callbacks
@anuppendkar6138
Жыл бұрын
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.
What package offered by this company?
Interviewer is good
sir, pls guide me on how to make a resume for 2+ years of experience as front-end developer
@DevAditya
Жыл бұрын
Follow the ATS format for Resume. Rest you'll get from the Google
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).
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
@DevAditya
2 жыл бұрын
😂
@mohan2253
2 жыл бұрын
😂😂
@GauravSharma-gc7mo
Жыл бұрын
😂😂
How much experience do you have in?
Which company's interview is this ?
this is a junior interview
Why the screen is blur
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.
@DevAditya
5 ай бұрын
Sure let’s connect topmate.io/Roshan