Are these questions helpful to you? What React questions have you encountered in your interviews? Let me know!

@kingivan1151

2 жыл бұрын

How React works with the DOM is a good one i've seen before. A good example is using useState with a text input.

@chrisdietrich1533

2 жыл бұрын

Could you make 40 more of these exact videos? Perfect to prepare for interviews

@dancewithzinnia

2 жыл бұрын

super helpful

@oliverk3190

2 жыл бұрын

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. :)

@aytacg26

2 жыл бұрын

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

@PeterElbaum

2 жыл бұрын

Glad to hear it! I can definitely work on a few more :)

@vaibhaviupreti5609

Жыл бұрын

Hi sir, please tell me, how to get a job in Australia for the position of react developer, i am a fresher from India

@Telugucoder1

5 ай бұрын

@@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)

@ashoksoni8931

2 жыл бұрын

ty

@michal3833

2 жыл бұрын

could you please show an example for the 5th question? thank!

@denistsaplind357

2 жыл бұрын

@@michal3833 GOOD: {!something ? null : ......... } BAD: {something && ......... }

@purnimabaranwal

2 жыл бұрын

Hey temp grey, could you please share more questions that you have encountered in all your interviews?

@4funszejk442

2 жыл бұрын

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!

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

Thanks so much for all these basic looking yet tricky questions

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

Was saving this for when I became ~technical~. Awesome stuff, Peter 👏

@PeterElbaum

2 жыл бұрын

Thanks brother! Let me know if I can be helpful as you're learning

Thank you, that was a great, concise video!

Regarding point #5: that's why we need to use double inversion in such cases, which casts the value into boolean: !!items.length && ...

This was really eye opening. Keep up the great content!

@PeterElbaum

2 жыл бұрын

Thank you! Will do!

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 😅

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.

@PeterElbaum

Жыл бұрын

You're very welcome!

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.”

@PeterElbaum

2 жыл бұрын

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!

Great set of questions thank you

@PeterElbaum

2 жыл бұрын

You're very welcome! :)

Great vid, Peter!

@PeterElbaum

3 жыл бұрын

Thanks mate! Hope you found it helpful :)

You can also Cast the length to a Boolean before using the && operator to fix the issue of a zero being rendered

@PeterElbaum

2 жыл бұрын

Good call! :)

very nice questions, bawss

Great content, Peter!

@PeterElbaum

Жыл бұрын

Thank you! :)

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

@adeleke5140

6 ай бұрын

or just use a ternary. I don't belie the question is misleading.

@RW-he5fu

3 ай бұрын

@@adeleke5140 && is more readable I reckon?

Didn't know about this ternary and &&, now I know. Thanks Peter.

@PeterElbaum

Жыл бұрын

Glad to help!

Thank you.

Thanks, great video. What's are some of the shibboleths of an amateur with react?

Amazing thanks a lot!!

@PeterElbaum

2 жыл бұрын

Glad you liked it! :)

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...

@PeterElbaum

2 жыл бұрын

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!

@aytacg26

2 жыл бұрын

@@PeterElbaum thank you very much 🙂

@steevgr3y71

2 жыл бұрын

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

@aytacg26

2 жыл бұрын

@@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

@ahurein1641

2 жыл бұрын

@@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)

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.

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”.

@PeterElbaum

2 жыл бұрын

Glad it was helpful! :)

really good one!

@PeterElbaum

2 жыл бұрын

Thank you! :)

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.

@BarryMichaelDoyle

2 жыл бұрын

Correct, depends on the context of how you use them :)

@abird35

2 жыл бұрын

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)

@balddog470

Жыл бұрын

&& is used when we want to display error messages and loading indicator

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

@abird35

2 жыл бұрын

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 (??)

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

@imkir4n

Жыл бұрын

u can avoid 0 by adding !!array.length && rendersomething

@Tommy-x-Ray

Жыл бұрын

@@imkir4n Great point!

@imkir4n

Жыл бұрын

@@Tommy-x-Ray thanks

Thanks bro I found it useful👌👌👌👌👌👌👌👌

@PeterElbaum

Жыл бұрын

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)

@michastruck2584

Жыл бұрын

does the double bang change anything? the value is converted to a boolean either way

@LuveenWadhwani

Жыл бұрын

@@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.

@michastruck2584

Жыл бұрын

@@LuveenWadhwani how does the double bang determine the boolean? in the same way doesn’t it?

Instead of && we could use the nullish coellescing operator, ?? , to bypass the situation

Using && operator with prefixing the left hand condition with !! (double bangs) should eliminate the wrong rendering problem.

@PeterElbaum

2 жыл бұрын

Yep - good call! :)

What is virtual dom and how does it work ?

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 😂

@PeterElbaum

2 жыл бұрын

Nice! Like I said, there are varying levels of depth to each question. Glad you're feeling confident! :)

@keifer7813

Жыл бұрын

Alright tough guy

Best of till now. 👍

@PeterElbaum

2 жыл бұрын

Thanks! :)

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?

I usually use !!arr.length && .... instead of ternary condition.

@PeterElbaum

2 жыл бұрын

That could work too - love the double bang

Good job, your explanations are great!

@PeterElbaum

11 ай бұрын

Glad you like them!

The className thing has nothing to do with the class being reserved syntax as it's working just fine in Preact.

I still rarely use ternary to conditionally render. That's because I just use a boolean. Don't throw out readability for no reason.

I wouldn't call JSX syntactic sugar since it has to be transpiled.

@PeterElbaum

Жыл бұрын

Fair point!

what if I the condition is not about the length but it is undefined? ternary is long for that logical condition.

Why we have to check the length of the list? {List && List.map(()=>some JSX)} should work without bug. Am I right?

@PeterElbaum

2 жыл бұрын

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! :)

@xiupingwu3952

2 жыл бұрын

@@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.

@HaloDude557

Жыл бұрын

@@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.

amazing

@PeterElbaum

2 жыл бұрын

Thank you! Cheers :)

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.

@edcoronado

Жыл бұрын

Can you elaborate on this?

@maharta8458

Жыл бұрын

@@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.

🙏🏻✨

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

@PeterElbaum

2 жыл бұрын

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!

@sidharth5665

2 жыл бұрын

It ain't gonna differ if it's js class or a css class.

@pooyaestakhry

2 жыл бұрын

Actually you can use class instead of className and compiler would only throw a warning and not an error.

@ChrisMinnickMWS

Жыл бұрын

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"

when can you show the second part?

@PeterElbaum

2 жыл бұрын

Not quite sure what you mean, but I do plan to release more interviewing videos in the next couple weeks :)

If the length is 0, isn't that desired behavior to not evaluate the right side since the array is empty?

@PeterElbaum

2 жыл бұрын

Maybe, but the point is you don't want a 0 to render to the screen

i am watching this few hours to my interview, i hope i scale through.

@PeterElbaum

2 жыл бұрын

Good luck! You've got this!! :)

@canalinactivo9607

2 жыл бұрын

Did you get the job?

@tobiillz

2 жыл бұрын

@@canalinactivo9607 I didn't get that particular job, the good news is i got another.

@canalinactivo9607

2 жыл бұрын

@@tobiillz Congratulations!

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 😉

@PeterElbaum

2 жыл бұрын

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

@TheJaySaw

2 жыл бұрын

@@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.

So why do we not need to use className in svelte

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...

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.

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

@PeterElbaum

2 жыл бұрын

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

@wise5674

2 жыл бұрын

Yup. It yells but it runs for me too

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.

@PeterElbaum

2 жыл бұрын

You know, that's a great point but not something I had considered before. Thanks for the suggestion!

They asked me what are solid princibles and can we apply them on react projects last time :/

@PeterElbaum

2 жыл бұрын

Tough one! It's hard to prepare for any possible question, it's probably best to focus on the foundational ideas

@gradar7891

2 жыл бұрын

@@PeterElbaum Yeah I see so. They got me bad that time 😄

Ah finally, questions if asked I could answer and get hired.

@PeterElbaum

2 жыл бұрын

:)

Can’t believe i found this!

@PeterElbaum

Жыл бұрын

:)

bug with && easily solved by double conversion like !!condition

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.

I like your video format, other creators are boring jejejje

2:25 mmmmmm. Solid's JSX just uses 'class' instead of 'className' so it's not inherent to js to error on 'class'.

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

I can code and build apps with React. But explaining React in an interview, that I'm not confident.

@PeterElbaum

8 ай бұрын

Interviewing is definitely its own skillset!

If i would been asked with only these difficulty of questions then I would be probably a react developer already :/

Does anyone still use classes ? 😅

We deployed that 0 into SIT

@PeterElbaum

Жыл бұрын

Classic

The density of terms is pretty overwhelming. It takes 30 minutes to watch an 8 min video.

@PeterElbaum

2 жыл бұрын

Thanks for your feedback - I'll take that into account in the future.

dude, /highfive

@PeterElbaum

Жыл бұрын

🙏

provide example and talk...

Great questions. The background music is annoying and anxiety inducing to me!

You can still do someArray.length > 0 && renderElement()