REAL React Interview Questions
ฝัง
- เผยแพร่เมื่อ 10 พ.ค. 2021
- Ever wondered what you'll be asked in front-end engineer/React interviews?!
This video is to give an idea of what you questions could reasonably expect from a React developer hiring process.
Many of these questions are approximations of what I think you could expect as an entry-level software engineer, or the types of things I would ask if I were coming up with topics from scratch. They all offer opportunities to show off your knowledge, even if they seem basic on the surface.
Let me know if you find them helpful!
Links:
One-on-one interview mentoring: superpeer.com/peterelbaum
My interviewing course - Ace the Front End Interview: gum.co/KlowV
Kent C. Dodds blogpost: kentcdodds.com/blog/use-terna...
--
Follow Me Online Here:
🌏 My website/blog - peterelbaum.com
✉️ My newsletter (weekly on Sundays) - peterelbaum.com/subscribe/
🗣 One-on-one mentoring - superpeer.com/peterelbaum
🤓 My courses: peterelbaum.gumroad.com/
🐦 Twitter: / peterelbaum
💻 GitHub: github.com/elbaumpj
☎️ Office Hours: calendly.com/elbaumpj/saturda...
--
My gear:
Main Camera: amzn.to/2Tv1WBe
Tripod: amzn.to/2t570AH
External HD: amzn.to/2t1UphI
Memory card: amzn.to/2UEQfIn
Computer mic: amzn.to/2t7mUue
--
Who am I?
I'm Peter Elbaum, a software engineer living in Raleigh, North Carolina. I make videos about code, software engineering career development, and self improvement. I also have a newsletter (peterelbaum.com/subscribe) and tweet my thoughts on money, work, and being a great dev. Feel free to get in touch!
![[TH] VCT Pacific Stage 2 - Playoffs Lower Bracket Final // PRX vs DRX](http://i.ytimg.com/vi/5HwO1bQyAx4/mqdefault.jpg)
Are these questions helpful to you? What React questions have you encountered in your interviews? Let me know!
How React works with the DOM is a good one i've seen before. A good example is using useState with a text input.
Could you make 40 more of these exact videos? Perfect to prepare for interviews
super helpful
I always hated questions like the 4th back in the days. Kinda falsely phrased, sometimes even on purpose to see the response. Good that I'm already wise and old but maybe just old by now. :)
In most of the React Interview videos that I watched on youtube, all questions are about React or at least related to React, I applied for a React position, in tests, I have been asked to solve 2 JavaScript problems which were Ok and I passed that tests, then I have been informed that I will have a 20 minutes technical interview on real problems for react and after a week later, I attended to technical interview for React Dev position and the following questions asked :
Question #1: Think you are a Full Stack Developer and your project takes data from another API supplier and you do not have control over it, the API brings data about Weather forecasts and current temperature but API takes 6 seconds to bring data, How can you solve this problem for better user experience on showing current temperature?
Question #2: You have an application that generates a PDF report for the user, the user selects some filters and according to filters your application creates a PDF report for the user. Whatever the selected filters are, the app generates a report in 10 minutes and there is no way to decrease this duration. In this case, what kind of solution you can present for the best user experience. And if the user closes the page after request, what kind of process you would apply?
Question #3: Interviewer explained about Technical Debt and then asked, you have code that has been written without considering best practices and readability of the code, in which cases you chose to leave this code like (without refactoring). Give some cases that you may need to deliver code without refactoring for best readability. On the other hand, let's say, you have enough time to refactor the code but your manager told you to leave it like that what you would do? For which type of companies technical debt is more important Enterprises or Startups?
I couldn't find any React relation on these questions? I Tried to give answers on Frontend and React Basis especially for the first question, interviewer stopped me and told me that I am not asking on React basis, you must assume that you are a Full Stack Developer.
In the end, I understood that for a React Dev position, apart from the questions on React Interview Videos, there is the possibility to encounter any kind of question, in my next interview, I am expecting a question about pancake recipe in detail or how to prepare and cook cookies. I have to say, up to now, I tried to attend many interviews and all was about React Position and only in one of them I have been asked about React, they have asked mostly on class-based components and at that time because I focused on Hooks, I couldn't answer. After that interview, in none of React dev position interviews, I have gotten a single question about React, they mostly asked about JavaScript, tested on JavaScript, and in my last interview, I got the above 3 questions. AND I WILL BE HAPPY IF SOMEBODY TALKS ABOUT WHAT SHOULD BE THE EXACT ANSWERS TO THE ABOVE QUESTIONS...
Could you make 40 more of these exact videos? Perfect to prepare for interviews
Glad to hear it! I can definitely work on a few more :)
Hi sir, please tell me, how to get a job in Australia for the position of react developer, i am a fresher from India
@@vaibhaviupreti5609 bro did you done it?
1.What is JSX? => syn. sugar of createElement
2.what class named as classname in react? => class is reserved in JS
3. Describe DataFlow in the React? => Unidirectional
4.How would you delay API Call untill component is mounted? => useEffect Hook
5. Should you use ternary or && operator to conditionally render React components? use ternary operator (&& have falsy thing)
ty
could you please show an example for the 5th question? thank!
@@michal3833 GOOD:
{!something ? null :
.........
}
BAD:
{something &&
.........
}
Hey temp grey, could you please share more questions that you have encountered in all your interviews?
1,2,5 - these three questions will go to my list of the most stupid recruitment questions
Do you ask the animal handler during the job interview what is the average length of an elephant's trunk?
Or do you ask him how he would behave in the event of an elephant attack?
When are we going to finish asking during job interviews about interesting facts not related to the real work of a programmer?
Thank you so much! I was watching your video before my interview and I actually got asked the jsx question. I kinda knew it already, but, having researched it more thoroughly after this video, I was even more confident answering it. Really appreciate your help!
Thanks so much for all these basic looking yet tricky questions
Was saving this for when I became ~technical~. Awesome stuff, Peter 👏
Thanks brother! Let me know if I can be helpful as you're learning
This video was super helpful I never thought about whether or not the ternary or && operator would be better, since I usually use ternary but your response was definitely a huge plus to know
Great questions, and I like how to you explain the area where to shine. I would encourage to please create more React or Angular questions like these. Amazing, thanks a lot.
One of the best. And yes these are the questions that are asked mostly especially Use Effect
Hello sir. I am just starting my career and am preparing for my first interview as a mern stack developer. I came across your interview playlist.... And it seems just made for me.. thank you sir.. and yeah.. you won a subscriber 😅
This was really eye opening. Keep up the great content!
Thank you! Will do!
Thanks for a great video!
I was putting it on pause, thinking about the way I’d answer and the resuming the video.
The question about the ternary operator and && I wound answer in the following way:
“You should consider the reasons why you are about to use conditional rendering.
If the reason is that assuming a particular condition is met you display a component, if not, nothing is displayed instead, use && operator (and handle it with care 😌).
If you are considering displaying either one component OR the other, use ternary operator.
The caveat in here: keep in mind react reconciliation algorithm. If components are of different type, React will unmount the whole component’s tree and the state (which you potentially need) will be lost.
Plus it’s always more costly operation then just changing an attribute. So consider further examining the case, maybe you just need to change some attributes instead in the same component.”
Thanks for your comment! I like your distinction with the use cases. I probably could have provided a bit more nuance in my explanation. Thanks for watching!
Thank you, that was a great, concise video!
Very helpful. Thank you! I appreciate if you talk about common mistakes programmers make when using react just like the && operator you mentioned in this video.
You're very welcome!
Didn't know about this ternary and &&, now I know. Thanks Peter.
Glad to help!
Thanks for this. Most of the stuff I know already but the answers aren’t immediately obvious in relation to the question, so everytime you say the answers, I was like “ohhh so that’s what you mean”.
Glad it was helpful! :)
Regarding point #5: that's why we need to use double inversion in such cases, which casts the value into boolean: !!items.length && ...
Great vid, Peter!
Thanks mate! Hope you found it helpful :)
Great set of questions thank you
You're very welcome! :)
You can also Cast the length to a Boolean before using the && operator to fix the issue of a zero being rendered
Good call! :)
Great video, and great advice! I have an interview myself today and this was great.
The ternary operator question was a bit misleading: when using rhe && operator to conditionally render some element, you can simply cast arr.length to a boolean using !!arr.length && ..., this will be a very simple way to still use the && operator
or just use a ternary. I don't belie the question is misleading.
@@adeleke5140 && is more readable I reckon?
The className thing has nothing to do with the class being reserved syntax as it's working just fine in Preact.
Great content, Peter!
Thank you! :)
very nice questions, bawss
Thanks, great video. What's are some of the shibboleths of an amateur with react?
What is virtual dom and how does it work ?
React is how you want to respond and control the screen or code outputs. Just process management controls. Three things. Get put react respond pm.
I don't use zero as false in js.
Even though I used to do it a lot in C++.
Is there any other reason not to use & for rendering in react?
what if I the condition is not about the length but it is undefined? ternary is long for that logical condition.
So why do we not need to use className in svelte
In most of the React Interview videos that I watched on youtube, all questions are about React or at least related to React, I applied for a React position, in tests, I have been asked to solve 2 JavaScript problems which were Ok and I passed that tests, then I have been informed that I will have a 20 minutes technical interview on real problems for react and after a week later, I attended to technical interview for React Dev position and the following questions asked :
Question #1: Think you are a Full Stack Developer and your project takes data from another API supplier and you do not have control over it, the API brings data about Weather forecasts and current temperature but API takes 6 seconds to bring data, How can you solve this problem for better user experience on showing current temperature?
Question #2: You have an application that generates a PDF report for the user, the user selects some filters and according to filters your application creates a PDF report for the user. Whatever the selected filters are, the app generates a report in 10 minutes and there is no way to decrease this duration. In this case, what kind of solution you can present for the best user experience. And if the user closes the page after request, what kind of process you would apply?
Question #3: Interviewer explained about Technical Debt and then asked, you have code that has been written without considering best practices and readability of the code, in which cases you chose to leave this code like (without refactoring). Give some cases that you may need to deliver code without refactoring for best readability. On the other hand, let's say, you have enough time to refactor the code but your manager told you to leave it like that what you would do? For which type of companies technical debt is more important Enterprises or Startups?
I couldn't find any React relation on these questions? I Tried to give answers on Frontend and React Basis especially for the first question, interviewer stopped me and told me that I am not asking on React basis, you must assume that you are a Full Stack Developer.
In the end, I understood that for a React Dev position, apart from the questions on React Interview Videos, there is the possibility to encounter any kind of question, in my next interview, I am expecting a question about pancake recipe in detail or how to prepare and cook cookies. I have to say, up to now, I tried to attend many interviews and all was about React Position and only in one of them I have been asked about React, they have asked mostly on class-based components and at that time because I focused on Hooks, I couldn't answer. After that interview, in none of React dev position interviews, I have gotten a single question about React, they mostly asked about JavaScript, tested on JavaScript, and in my last interview, I got the above 3 questions. AND I WILL BE HAPPY IF SOMEBODY TALKS ABOUT WHAT SHOULD BE THE EXACT ANSWERS TO THE ABOVE QUESTIONS...
Totally hear you - it can be hard to predict the _exact_ questions that will be in an interview. I think the best strategy is to have solid fundamentals, and if there's a nitpicky question then so be it. Hope that helps!
@@PeterElbaum thank you very much 🙂
To Answer question 1:
For the best user experience I'd simply play an animation for the duration it'll take the api to deliver the data for entertainment
For the second question:
After the user finishes all the filter, I'd simply create a program that emails the report directly to the user in 10mins. So they don't have to wait on the application for the report to be processed
For the third question,
I'd inform the interviewer that I ensure I write clean code for readability, and I ensure that i adopt all the best practices.
I'll convince the manager if he says I should not clean the code, and inform him if the huge disadvantageous factors that could happen in the future due to leaving the code uncleaned.
I believe startups have more importance to technical debts
@@steevgr3y71 for the first one, animation has not been accepted, they were expecting something caching old data, may be, fetching every 10min and catch data on server. I am not sure, but they did not accept animation etc. For second one, I gave the similar answer but interviewer was not happy about that, but I believe it is the best approach. For third one, I couldn't give exact answer 😊 and as a result they rejected me
@@aytacg26
Of course they won't accept animation, and only caching it is also not the full answer.
The best way is to load the animation for the fist time for the data to be fetched and store it and keep updating it every interval you want(greater or equal to 6s). The next time the user opens the application, you fetch the cache value and update it by making a new request (no animation this time)
Instead of && we could use the nullish coellescing operator, ?? , to bypass the situation
6:30 short circuit evaluation ( not evaluation the right side of the && operation if the left side if falsy) has nothing to do with rendering 0.
0 gets rendered because React would only skip rendering nullish and boolean values.. and 0 is neither nullish nor boolean
0 is not boolean but it's "falsy", so in logical && operations it counts as a boolean false and will short circuit. The behavior you are describing is provided by the nullish coalescing operator (??)
really good one!
Thank you! :)
Amazing thanks a lot!!
Glad you liked it! :)
Best of till now. 👍
Thanks! :)
Thank you.
In my opinion, ternary makes code too long (sometimes we use null for the second condition) but it is easier to render component with a && operator
u can avoid 0 by adding !!array.length && rendersomething
@@imkir4n Great point!
@@Tommy-and-Ray thanks
Dang I would ace that lol. That’s like the simplest stuff you can know. But I’ve been working with react alone while in college for two years and I also just read a react 17 book that explained a lot of in depth concepts so maybe I’ve just finally reached a point passed beginner 😂
Nice! Like I said, there are varying levels of depth to each question. Glad you're feeling confident! :)
Alright tough guy
when can you show the second part?
Not quite sure what you mean, but I do plan to release more interviewing videos in the next couple weeks :)
Using && operator with prefixing the left hand condition with !! (double bangs) should eliminate the wrong rendering problem.
Yep - good call! :)
Good job, your explanations are great!
Glad you like them!
does something automatically correct the whole class vs className cuz I often copy paste components from css frameworks and yes it yells at me but the code always runs
Hmm. Not sure, it may have to do with your settings, but typically with CRA (create-react-app), I'd expect class/className to throw an error
Yup. It yells but it runs for me too
Thank you for the video, first of all, but I noticed that your video is "choppy" and has chunks removed. IDK if that it something that your recording software does to remove the pieces of "silence" of N milliseconds or if it is done intentionally in your post-processing software but it actually really messes up with the watcher's brain and after several minutes of watching it becomes very very annoying. Kind of reminds of those fast-flashing Insta-tiktok videos. Just FYI
The last question is interesting. Because I have only use ternary operators when rendering component's, if possible.
I think, I'm gonna fail from the first question alone.
I either would say
Jsx is a file you usually use to create components or
Jsx is like a javascript but you can also put your html codes there...
These are good questions that I should learn about.
Why we have to check the length of the list? {List && List.map(()=>some JSX)} should work without bug. Am I right?
It depends a little bit on what `List` is. It could be an empty array, in which case nothing would render and you would avoid this bug, but you would be mapping the array for no reason.
You don't have to check for length, it's just a common pattern because it doesn't really make sense to try and render components or elements out of an empty array. Hope that helps! :)
@@PeterElbaum In my case, if the List is empty, will && logic execute the second expression? In my point of view, it would just stop at the first express. [] == false, then the expression is evaluated as false, the second expression will not execute. Nothing get rendered.
@@xiupingwu3952 you might check the length of the list to generate some header text or a button. For example the dropdown button of this comment section that says "3 Replies". Though I think it's stupid to use {List.length && ...} instead of {List.length > 0 && ...} in the first place.
I still rarely use ternary to conditionally render.
That's because I just use a boolean. Don't throw out readability for no reason.
If the length is 0, isn't that desired behavior to not evaluate the right side since the array is empty?
Maybe, but the point is you don't want a 0 to render to the screen
On the question regarding ternary vs && operator, I could see how that could happen, however if he used an expression like "array.length > 0 && ..." would that not fix the issue? I think there are situations where && is more readable and more concise to write and maintain.
Correct, depends on the context of how you use them :)
You could also just do (array && ...) since a defined array will always be truthy even if it's empty (the same is not true for empty strings though)
&& is used when we want to display error messages and loading indicator
2:25 mmmmmm. Solid's JSX just uses 'class' instead of 'className' so it's not inherent to js to error on 'class'.
I usually use !!arr.length && .... instead of ternary condition.
That could work too - love the double bang
Thanks bro I found it useful👌👌👌👌👌👌👌👌
Glad to hear that :)
Regarding the use of `&&` : This is an incomplete statement being compared with a ternary operator. To mimic ternary operators, always specify an `||` clause as well, so the expression always has something truthy to evaluate to in case the left-hand operand is false. So in the case of the Ken Dodds article, it would have worked just fine if he'd written `!!contacts.length && something || somethingElse`. I've used this code pattern in tons of production code with zero issues. (Also, note the use of `!!` to force an operand to a boolean value)
does the double bang change anything? the value is converted to a boolean either way
@@michastruck2584 No it isn't - the value gets interpreted as truthy or falsy, not boolean. Double bang coerces the value under consideration to a boolean so we are guaranteed to be working with a single type (boolean), and not the potentially unbounded type of our test expression without the double bang.
@@LuveenWadhwani how does the double bang determine the boolean? in the same way doesn’t it?
Ah finally, questions if asked I could answer and get hired.
:)
Can’t believe i found this!
:)
Does anyone still use classes ? 😅
I like your video format, other creators are boring jejejje
They asked me what are solid princibles and can we apply them on react projects last time :/
Tough one! It's hard to prepare for any possible question, it's probably best to focus on the foundational ideas
@@PeterElbaum Yeah I see so. They got me bad that time 😄
I wouldn't call JSX syntactic sugar since it has to be transpiled.
Fair point!
bug with && easily solved by double conversion like !!condition
i am watching this few hours to my interview, i hope i scale through.
Good luck! You've got this!! :)
Did you get the job?
@@canalinactivo9607 I didn't get that particular job, the good news is i got another.
@@tobiillz Congratulations!
I am working like a JS dev (react) for a long time. I was lost while during interview the CTO asked me what is "Hoisting". I stucked. After 5 secs of my cilence he asked me "whats the difference with let and var definition?" I understood the previous question.
So: during interview, a lot of companies use "smart definitions" you like to know. This is nothing related to the coding.
Can you elaborate on this?
@@edcoronado hoisting is like function vs arrow function. If you define a function in the bottom on your js file, you can still use it at the start since the function get hoisted up. but you can't do the same thing with arrow function. It's the same thing as Var vs let /const. Var has this weird variable hoisting, so you can define a variable in the bottom of the lexical scope, but use it above the definition.
Hey Peter, if you're just speaking to the camera, why not consider adding all your content to a podcast too? There's definitely space for good react content within the podcast realm.
You know, that's a great point but not something I had considered before. Thanks for the suggestion!
class classname decision is purely based on react-core team's choice, & nothing else.
They knewnthat class can serve multiple meanings based on the contexts, which they dont wanted to get in.
🙏🏻✨
Most Asked Tuff Questions on React for 4+years experienced, you can watch part1 on channel - 'Codetailed'
Let see how many questions you can solve...
amazing
Thank you! Cheers :)
I never understood the "class is a reserved keyword in JS, so you can't use it in JSX" argument. Because if JSX is a syntactic sugar over `React.createElement`, then shouldn't the compiler just change the `class` to `className`?
Great video, btw
I think this is a good question! In my view the answer has two parts:
1. React.createElement was designed to mimic the DOM API, which uses `className`: developer.mozilla.org/en-US/docs/Web/API/Element/className
2. The `class` keyword can be used elsewhere in React, for example when you're creating a class component. It might read a bit strange to have class in both places but doing different things.
Glad you found the video helpful!
It ain't gonna differ if it's js class or a css class.
Actually you can use class instead of className and compiler would only throw a warning and not an error.
I asked Dan Abramov this question in a twitter AMA. Here's his response:
"it’s because you can’t use it as an argument, like
function Button({ class })
or
let class = ...
so you have to rename it at usage anyway, which is annoying to explain. arguably taking class as a prop is not a great api but it’s a very common thing people do"
I can code and build apps with React. But explaining React in an interview, that I'm not confident.
Interviewing is definitely its own skillset!
7:15 I don't actually see how ternaries fix the issue with falsy values more than && operator. If you're using variables that can get falsy without dealing with it, you're going to have the same issues with both. E.g. `myList.length && ` E.g. `myList.length ? : null`. What you need to fix is the condition, so to actually check for what you're checking. E.g.
`myList?.length != undefined`. Then you can use whatever conditional construct you like 😉
Good call! The specific error I'm talking about happens when we're using an array's length to decide whether or not to render the list. If array.length is false, then a 0 will show up.
More here: kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx
@@PeterElbaum My favourite solution to this problem is doing something like this `!!myArray.length && `. The `!!` at the beginning will ensure that 'myArray.length' returns a boolean value.
If i would been asked with only these difficulty of questions then I would be probably a react developer already :/
The density of terms is pretty overwhelming. It takes 30 minutes to watch an 8 min video.
Thanks for your feedback - I'll take that into account in the future.
We deployed that 0 into SIT
Classic
dude, /highfive
🙏
provide example and talk...
Great questions. The background music is annoying and anxiety inducing to me!
You can still do someArray.length > 0 && renderElement()