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...
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)
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?
Wow. This is the first vid I'm coming across from you and it was *excellent*. I find myself at a point in my career where I need to refresh myself on all of this kind of basic knowledge (at least the ability to speak to it) ASAP to land a new role after a layoff and before I lose my home, and this has been one of the most helpful resources I've found yet! Thanks for this - checking out the rest now! :D
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!
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
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!
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!
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)
I didn't know any of these things! good video to direct my studying - I've put react on my resume, but the year I spent working with it was far from fruitful. Thank you!
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 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
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 (??)
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.
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.
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 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.
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.
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 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.
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.
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”.
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.
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
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.
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.
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 😂
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!
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"
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
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.
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...
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?
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?
Wow. This is the first vid I'm coming across from you and it was *excellent*. I find myself at a point in my career where I need to refresh myself on all of this kind of basic knowledge (at least the ability to speak to it) ASAP to land a new role after a layoff and before I lose my home, and this has been one of the most helpful resources I've found yet! Thanks for this - checking out the rest now! :D
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
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?
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!
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)
nullish operator can be used instead of ternary operator because only if null or undefined is considered as false on the life hand side,
Regarding point #5: that's why we need to use double inversion in such cases, which casts the value into boolean: !!items.length && ...
You can also Cast the length to a Boolean before using the && operator to fix the issue of a zero being rendered
Good call! :)
I didn't know any of these things! good video to direct my studying - I've put react on my resume, but the year I spent working with it was far from fruitful. Thank you!
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
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!
@@hatem.tommy.lamine thanks
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 😅
The className thing has nothing to do with the class being reserved syntax as it's working just fine in Preact.
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
This was really eye opening. Keep up the great content!
Thank you! Will do!
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 (??)
One of the best. And yes these are the questions that are asked mostly especially Use Effect
Didn't know about this ternary and &&, now I know. Thanks Peter.
Glad to help!
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.
I usually use !!arr.length && .... instead of ternary condition.
That could work too - love the double bang
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
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?
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.
Oh shit here we go again...! When looking for a new job, best place to revisit.
Thank you, that was a great, concise video!
I still rarely use ternary to conditionally render.
That's because I just use a boolean. Don't throw out readability for no reason.
Thanks a lot, they seems very useful tips! :D
2:25 mmmmmm. Solid's JSX just uses 'class' instead of 'className' so it's not inherent to js to error on 'class'.
I wouldn't call JSX syntactic sugar since it has to be transpiled.
Fair point!
Great set of questions thank you
You're very welcome! :)
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!
What is virtual dom and how does it work ?
what if I the condition is not about the length but it is undefined? ternary is long for that logical condition.
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.
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.
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! :)
Good job, your explanations are great!
Glad you like them!
Instead of && we could use the nullish coellescing operator, ?? , to bypass the situation
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?
Using && operator with prefixing the left hand condition with !! (double bangs) should eliminate the wrong rendering problem.
Yep - good call! :)
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
Ah finally, questions if asked I could answer and get hired.
:)
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.
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
Thanks, great video. What's are some of the shibboleths of an amateur with react?
Great vid, Peter!
Thanks mate! Hope you found it helpful :)
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 :)
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.
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!
Best of till now. 👍
Thanks! :)
very nice questions, bawss
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!
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
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!
Can’t believe i found this!
:)
Thank you.
really good one!
Thank you! :)
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...
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
bug with && easily solved by double conversion like !!condition
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 😄
Thanks bro I found it useful👌👌👌👌👌👌👌👌
Glad to hear that :)
Does anyone still use classes ? 😅
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.
Amazing thanks a lot!!
Glad you liked it! :)
I like your video format, other creators are boring jejejje
We deployed that 0 into SIT
Classic
If i would been asked with only these difficulty of questions then I would be probably a react developer already :/
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.
amazing
Thank you! Cheers :)
🙏🏻✨
You can still do someArray.length > 0 && renderElement()
dude, /highfive
🙏
provide example and talk...
Great questions. The background music is annoying and anxiety inducing to me!
Great content, Peter!
Thank you! :)