Mock React job interview (featuring Cassidy Williams)

Key Takeaways

was like an emotional roller coaster you know like i sent my video off but i was like so engaged in what was happening especially when you were talking about props because steffy you basically had the answer on the tip of your tongue for like three minutes i think and cassidy you kept that thing nurturing her towards mentioning props when you asked about passing it to the header and when you said props i was like yes probably yeah as soon as she did it i was like yeah she got it hey alex from scrimba you're about to watch a fairly realistic mock react interview between steffi roska and cassidy williams uh stephanie subscribes at scrimba.com meaning she's watched some of the interactive coding courses over there she's been programming in total for about a year doing react for only six months i reached out to staffy because while she's not currently working as a full-time dev she's been working really hard to prepare and is looking to get her first death role in the new year cassidy works in netlify as a developer experience engineer where she's actively interviewing developers in general cassidy has a wealth of experience when it comes to carrying out interviews so what you're about to watch is actually a pretty unique opportunity to get a feel for how react interview could actually go at the end of the interview cassidy also gives steffy some awesome feedback i want to caveat the whole video by saying that different companies have different interview processes depending on the role the reason i think this is realistic is that steffy and cassidy had never met prior to this interview the questions that cassidy asks and the directions she takes steffy could very likely be the same questions and directions that appear in any other interview and on the topic of questions you're not about to watch a pop quiz an interview is more like a conversation and the way that cassidy navigates this is very natural and really resembles i think a realistic interview i want to just reiterate one last time steffy had very little idea about what to expect going into this and so it'll be interesting to see how she does listen if this video helps you please do free things please like the video comment say something nice ask cassidy a question if you like or maybe give me some ideas about what questions you have about getting your first dev job so that scrimba and i can help finally please check out scrimba.com cassidy recently launched a in-depth react interview questions course which goes into the details about a bunch of nitty gritty react details this interview uh what's the questions some of them come from that course they're very realistic questions this is also touching on those soft skills you know those communication skills those interviewing skills pay close attention to those two because even if you're looking to apply for a more intermediate or senior role i know for a fact there's something you can learn from cassidy and staffy in this video without any further ado here is the interview anyway hello uh my name is cassidy and i'm a uh principal developer experience engineer at netlify and so what that means is i code a lot and and my primary focus is developer experience and so i work with our marketing teams our product teams and stuff and trying to figure out how can we improve the developer experience of of the netlify product for developers and i focus on react and so react and next js and those kinds of things i try to build resources tools and features and stuff so that developers have a good time using react and i've been in the industry for a while and i've done many many interviews and so i've i've both given and received many interviews and so hopefully this will be a fun experience for you could you tell me more about yourself what you're doing where you're at right now yeah so my name is steffi and i've been working for a long while in digital marketing and i was always interested in coding but it was it didn't feel like feel like the right path so i'm from romania and i moved three years ago to barcelona and when i was in romania these things like boot camps or tech meetups didn't don't exist or i didn't know about them and i tried to learn coding by doing like a c course which was super painful and i i gave up after two sessions i was like i'm not getting it i feel like i don't blame you i mean in the end i succeeded i did a course on c but it was a different setup so i moved to barcelona for like a job in digital marketing and then i hear about code bar and all these communities and free code camp and scrimba and all these like nice people who want to bring minorities into tech and everything felt like oh it's a beautiful world out there come join us so i like did like slow steps and then i was like i really like this because also working in digital marketing you're a lot in contact with the tech team and it kind of bothered me sometimes when i asked them we needed something and they were like it takes too long it's in the backlog or something and then i was like what is happening here so i i started to do like small things on my own and then i i felt like i need to commit more and i wanted it to happen faster so i did like a boot camp where i learned also react and that ended this year in february and after this i was about to go to rc the recourse center in new york yeah familiar with it so i got accepted which was like pretty exciting for me as like a recent graduate that's huge thank you with the whole situation it was like moved remotely but i'm very happy it happened like it was an amazing experience even remote like what they did was incredible in my opinion and i did that for about two months and a half almost a full batch and then with the whole situation i felt like it's i should get a job so i joined as a technical solutions engineer but then i feel more into front end and wanting to code and that's why i'm here today so basically that's what i did at the rc i wanted to go there and experiment and i was all about i want to do backhand i don't know why and then i realized like oh i actually like front end much more and i just want to do this now so it was a process and i think i still might change my mind but now i'm i'm really enjoying the front end part that is awesome first of all barcelona is a beautiful city um so but that's really fun that you get to live there um and uh that's really interesting that you started with c and back and stuff did you in your boot camp did you uh do front end or was it kind of a full stack kind of experience it was a full stack but it was mostly in my opinion focused a lot on front end because we touched a lot upon react we also looked at view a bit but very little but mostly because the time is so short you get a lot of information and the easier way to do things is see them in the front end yeah yeah that makes sense and with rc um i actually know the founder of rc and the rc people are awesome um did you focus what kind of projects did you focus on were they more back end projects like i'm going to build some apis or figure out scaling things or did you focus on a specific language it started out as back-end focus so i wanted to get better with javascript to know like how it works and how to do things and be like really comfortable and then i wanted to to do like something with gatsby like create a blog and see how that works and then i moved to things like trying out testing and seeing how that is because at first you're very reluctant and i felt like oh i just want to write code i don't want to write tests like my code is perfect and then you you start to understand when you actually put the time in and create tests that make sense so i did that and i the the great part about drc is like it's so diverse that you get to meet also seniors and you get to bear and learn things that you as a junior you would not think about some of those things like how to refactor your code was something that i focused on how to understand like the architecture and different things like i had a plan but it's just like you go there and then you're like oh this is happening and i want to learn about this and there's an algorithm study group and let me learn about this too and it was just fantastic but i started out this back end and then it went all into front and then doing some of my own projects small projects that's so cool i'm glad that you were able to have that experience because that's a ton of experience before going into your first coding job and tech job and stuff yeah it was it was really valuable like for me the pairing sessions and getting those is really it makes a difference because as someone who comes out of a boot camp you don't get to understand some things like you're like oh how do the the components communicate and you're like i'm just doing my own project i'm just gonna put everything in one component and just like that's fine nobody will see my code but when you start working with others it's like oh we have to actually be more mindful and write cleaner code and it's a different story yeah it helps you understand modularity better and scaling even and all kinds of stuff do you in your current role do you get to do much prepare programming no i was doing a lot of like more support and debugging and looking at javascript so it's not a lot of like hands-on coding unfortunately gotcha okay that makes sense um so that that gives me a really cool picture of of some of the experience and stuff that you did and so i'd like to kind of walk through an application and figure out how you would build it and then kind of ask react questions along the way if that works for you um so there is an algorithm in the world it's it's going to be a url shortening algorithm so let's just say we have a website where you put in a url and then some long url and then it spits out a short url and then you can use that and it points to that um on the back end side of things how would you set up that database what what do you picture that database table looking like and what do you picture those uh end points looking like fun guy if the only data that comes in it's like this url and then what comes out should be like a shorter version of this url then it will be definitely one one you store this like main url somewhere and you should also have like the shortened version of it somewhere after it's created so i think these two are important and if you want to do some things but that i think is more advanced so i'm not sure about like analytics to know how many people click on those things you might want to store this also in a database cool and so what what do you expect or how would you design it for duplicates would you allow duplicates or would you have something set up for no duplicates no i would work with something like if it's a duplicate like i would join table so i would create like because it depends on i mean let me think of it because it depends do we have like a user who's like it matters who creates its url it depends also like how we like if we generate like a random combination of numbers there it could be that we go back to the database and see like did somebody enter this url already yes no and if they did like do we have it in the database yes then we return like we grab something from there and return it but if we and i think it makes more sense to be honest but i haven't thought about that yeah no i i like that because then if we do have user authentication then you can have a list of a user's urls and they can have their own profile of their shortened urls and everything um so let's just say we do have this service with the shortened urls and someone who has logged in and everything um how would you store authentication data um just like like you have some form and you're going to submit the form how would you share that that state that someone is logged in in you you mean like in the react part or in the database in the back end either one so so let's just say i'm a user and and i have logged in i've hit the login button as i'm navigating around the website the page should know if i'm logged in or not um so as i'm as i'm clicking around and adding stuff so how would you how would you store that so i would start by having a table with the user profile where they have like their username i don't know password and other things they might add and then for the links there will be a table and you would have like an id and link that so it will not be like all the links don't come in the same table because imagine we have different users so then we link that and then we we go on that path of seeing like okay this id links to this link and this gives us this shorter url so i'd have like a user table and a links table yeah and the links table connection is another table which has like the shortened url so let's say if what you asked me like if if we don't give like a unique url a shorter url for a specific user we would want to do that for analytics purposes maybe but maybe it works without it also uh then we would like need this kind of thing like this tables to have like a join table afterwards to see like what is happening yeah yeah and that and that makes sense and so from the browser perspective from the front-end perspective let's just say you're putting this page together in react you have a component for the table you have a component for the form you have a component for like a user avatar or whatever um what would you do from the browser end to determine if someone is logged in or logged out i would use a boolean for to check this like if user is locked in or user is locked out and i'm thinking already like this the situation with the user is data that we will need across all components right so this is something that should should we should consider but given it might be something small we can just pass the data sure and so in that in that boolean where is that boolean stored and then i would put it in the main app in maine okay so you have you have the main app and and i might i might have you like draw your own uh in invisible diagrams you have your main app is your main app just like that app.js kind of root and then everything builds on top of that yes yes so i would have main app where i where i store like i mean because i always think when i think about uh user authentication i really like how apps have this like header and then you have like welcome and your username and if you're not logged in you have like a login option and this you see it everywhere and you have to make sure when you do like the authentication that like the user stays logged in so if i'm moving from like i click a button or i move somewhere and it re-renders that i want to make sure that like the user is still logged in and this data like the components now like user is logged in through so that is important to keep track of cool so let's talk about this login functionality then let's just say you have to write a react hook or some function to make the login happen to set that boolean and to get the data that'll be shared across the application in your brain how would you how would you set that up to be honest i would like i know everything is going the hooks direction and i heard about custom hooks and how that that helps with things like if i would do a class it's really easy to set like a function which handles all the data from this input boxes if i for for example do the hook then i have to do like a different function for each input box if you have just like login and password that's not a big deal because it's like two things and it's like it is less code than creating the whole state and everything else but if they have to register and send a lot of data which i once did and i tried to do it with hooks i was like this is insane like this is so much and then i learned about things like custom hooks but i'm not so comfortable with it so so i would just go like the state version depending on how much data we have okay yeah and that makes sense hooks is something where once you get in the mindset of it you're just like oh yeah you just write those functions but it can be a lot if you don't have a lot of experience with it and so let's just say you have an api that logs people in how would you query it what function would you write where in the life cycle would you put it i would put it on componentdidmount to to to grab this data from to call the api from the database and get the data and actually wait and make sure that i get the data and while this is happening i can put the loading or something like this on the ui okay and so you're getting that data from your login component how do you store it where do you put that blob of like the username avatar links or whatever where where do you put that data i put like i if it i send it i could send it back to the state or i could just use the api directly in the component and like no we're talking login and not registration because like yes so log yes i get i kind of understand that you would understand registration putting it in the table but assuming someone's logging in let's just say you get the correct username and password you get this json data how do you share it amongst the components in the client i would have an api with which would actually check and query the the data and i would also like do some evaluation on all these data but basically i would need something in the back end like an api that goes and i received this username and i received this password so first i would check like does this user name actually exist in the database if it doesn't then i just return something like user not register and this data i will do something on the display but if the username exists then i will check if like the password they provided matches with the password that i have in stored in the database well i would say like it's not stored as a string and all these like things it should be it should not be visible because otherwise we get into trouble but i would cross check that and if this data is correct i will send a response like all good response code i think 200 and then it will update like the is logged into true and then it will re-render to something else okay cool and so uh for every component like again the avatar component the the the this the that how would each of those individual components the the table the welcome whatever your name is how would they get that data would you how would you pass that data to each of those components or would they each call that api in your opinion no because you don't need to call the database so much because that just you could but it's not right to do it i mean it just causes trouble when you do some small things you might think like i'm just gonna call it it's fine but if you think on bigger terms it's not fine and you can use the is logged in true or false everywhere else so that could communicate like is it logged in or not because you don't need to ask the database to do all this work again because it might slow down everything so i would use the the boolean to determine if like the user is logged in or not and then passing also like the username if i need to put that somewhere visible like in the header as i was saying yeah and so where how would you pass that username to the header from from the app if it goes down to the header then it goes as a prop so it's quite straight forward okay cool yeah that's what i was looking forward to passing it via a prop um cool and so let's just say suddenly beyonce tweets about our really awesome service thanks beyonce but oh no now we have to scale so we we have to make our application a little bit bigger so we have user authentication but on the back end side how would you come up with a way to try to scale this as best as we can and on the front end side how would you what features would you add to add like the analytics that you might want or or things like that [Music] if we want to scale we think of like adding features and making it better because we get more people and giving them more back or do we think of like make sure that it doesn't break make sure it's just like no it doesn't break that's a tricky one because we know most websites break when they get a lot of traffic and that's like a big problem um we have to make sure we have this bandwidth for a lot of users to come in and do these things to our database so we we should think about that i'm not sure how you do this but it's something to to consider because it's the first thing like if beyonce tweets and suddenly from your like two users per day you get like 500 in a day or even more then you're like okay code red i don't know what happened when it breaks but i think this is a challenge that i i really don't know how they solve it but i see it happening quite often in the market and it's something that i should probably learn more about yeah look up the term load balancer but it's a thing that balances the load across different servers and stuff and that was more just i'm curious about your backend knowledge because that's that's something that i've never implemented myself i've mostly been just like well we need to load balance that and then the back end engineers go do it but i i was just i was mostly curious about that and so on the on the front end side of things um you talked about passing values down um to all of the different components let's just say we have a button somewhere that logs a user out how would you pass that data back up to the app level like passing data from children to parents like from the button back up it's a different process you cannot do it the easy way like props yeah and you would do it with the callback function which is i feel like it's a bit unfair but it's basically like the parent components needs to say like okay i'm going to listen to you i give you this like callback function and if you want to talk to me you can use it but if they don't provide provide this thing the child has no chance to send anything out so this is the way you have to do it yeah exactly i was i was hoping for that because that's that's one that trips a lot of people up where you're just like it's just a variable the callback function is very key there um i think we call like for me in the beginning to remember it it was like a parent can tell their kids whatever they want the kids need to know the email address where they say what they want address was like code for callback function and that helped in the beginning because you're you get confused with like why yeah yeah for sure so let's just say with this application uh it's not a single page application so it's not just the app level it's happening across different pages and stuff how would you share your data or have you thought about how you might share data across different pages of an application let's just say you have two html files that both have react apps but they both need the data uh how would you how would you share something like that across those but they they have the same parent or they're like super different super they're they both they don't have the same client parent they don't have the same react parent but they both are part of some weird code base that can call the api and stuff if if you can send the data from like if you have the same backend for both of them then you can send the data from the backend to them so you have to send the information from one to the back and then there but i never really thought about it like having them not share the same app but i i assume there should also be some library to make our life easier and let us do this because it it should exist already yeah yeah and so that that kind of stuff does exist there's there's options um and actually we're at the 30-ish minute mark anyway and so i i kind of did want to start talking about other things anyway so uh i'm trying to stay on time here so for something like that there's options if first of all yes if they share the same api they can just query that way but if you want to share things across different pages and not have that single page application you can use either a cookie um and save a cookie for example for authentication and stuff yeah you knew that you knew that and then i use it a lot in my work so it's like yeah this is how we remember what happens with our script but like it doesn't cross your mind when it's like in front of you right yeah i don't hold that against you at all that makes sense and then also uh local storage oh yeah yeah and so it's not necessarily authentication when you put the token in true yeah yeah and so there's like session storage people sometimes put uh authentication stuff either in a cookie or session storage and then yeah if let's just say there's some other thing color scheme some other not important thing putting it in local storage to share across the app is a pretty common thing as well um cool and so i wanted to talk through some of your answers so first of all you did great good job um i appreciate that you do know generally like at least high-level back-end stuff like you you know how a database would be structured and stuff um and understanding that like a load balancer exists will be useful um but overall that that side of things is great on the front end side um definitely i would check out things like next js and remix and gatsby and stuff a bit more to see how they spread things across different pages rather than a single page application at the root like in a regular react application because i love using just a plain regular react application but when you get the really big ones then you have to figure out how to share that kind of stuff and uh one thing that would have been helpful instead of prop drilling all of the different uh pieces of data to the components that works just fine but if you had to prop drill it down multiple levels for whatever reason um context would have been really helpful there because then you can set up a context at the app level at the top or across pages or whatever and then should get the data from that level anywhere in your application and so that might be useful as well as the context api you can use it on two separate things yeah and so it depends on the framework you use um for example something like next js i actually just wrote a blog post on this yesterday and so i can send it to you um but you can actually with something like next.js they have um an optional route where you can put a context around that and it'll wrap every html page that's generated with that context and so that's that's how you can share data across everything um and so that that can work um and i know redux says does something similar i don't use redux as much but context can can solve a lot of that um i thought you did great knowing the react life cycle knowing like the doing the authentication on component did mount and everything is great um the hook for it is use effect if you can if you learn more about use effect and everything it it basically combines all of those functions into one big function which like you said when you experimented with it that can get a little long but if you if you write custom hooks and everything which again you said that you've looked into a little bit that that can actually make it nice and concise and pretty short as well you know your stuff on props you it seems like you know your stuff with the browser and the dom [Music] for class-based components versus function components you can use either i recommend learning more about function components because that's the direction react is going in uh the only time you ever really need to know uh class-based components is for error boundaries because error boundaries are a thing that are funky that they haven't built an api for that with with hooks yet um and let's see you know state you you pretty much checked all of the boxes and so there there are a few little things that i mentioned but besides that you answered the questions really well yeah i'm happy to hear yeah do you have any questions for me or do you want to go over anything a little bit more in detail no i think like for for me as a beginner the hardest thing is like to think like the bigger level because you always build something super small right and then you don't think about other problems or like having like i would never think like i have two different reactings and how do i combine them because i'm like i did once and then i do another one and i just don't i don't have this like thinking behind when i do something right but yeah part of the process and it's really good you brought it up so i can like think of it more and look into it yeah i feel like a lot of practicing is knowing what to practice for sure and yeah that's an actual real world example where i i used to work at a place where we had i think four different react apps separate individual react apps across different pages and we had to figure out how to connect all of them and uh i recommend looking up apollo apollo is a really cool library for that and uh yeah we did the local state thing we did firebase we we did a lot of different things to to experiment with that and how to efficiently connect everything um are there any other questions that you have or any clarifications or anything that might be useful for you no i think it's really clear and really nice because you put everything into like a context so then it's like you're on the spot and you have to think of of all these things and you don't realize the name behind them so right that was useful great well i'm i'm glad again i thought you did a great job and and you know the thing said to practice now um but overall i thought you did a great job but do you think something like uh i should look into like frameworks like you said next gs or more into gatsby and these things or focus more on getting like my hands don't react and knowing more the advanced stuff rather than jumping into i think i think a little bit of both first know the react hook stuff the react hook stuff will be uh most useful to to just get up and running because for example next js is based on hooks and so you'll you'll want to know hooks because uh their apis are in hooks but also uh for a framework like next js it is of it is an incredibly simple framework because all it requires is you have a pages directory and then everything else you can organize it however you want like a regular react application um so i recommend trying that after you've understood use effect use ref and context really well once you once you get those ones down that's when start uh start experimenting with other stuff all right sounds good great awesome i think we can probably cut the recording but that was fantastic both of you stephanie i think you did an amazing job well done yeah that was fun i had a good time me too to me it was like an emotional rollercoaster you know like i sent my video off but i was like so engaged in what was happening especially when you were talking about props because steffi you basically had the answer on the tip of your tongue for like three minutes i think and cassidy you kept that thing nurturing her towards mentioning props when you asked about passing it to the header and when you said prompt says like yes yeah as soon as she did it i was like yeah she got it because a lot of times interviewers just want to know that you know the words like saying the keywords like oh well i would pass props with this or i would use the lifecycle method for this component did not just knowing those kind of keywords and they're just like okay they generally know the framework um because i i could tell the entire time i knew that you knew what you were talking about because you were using it correctly but it was throwing the word prop out there and using the word context using the word state that uh that's that's what the interviewer is looking for um and i think it's just a matter of working on um more projects basically and connecting all these little bits of knowledge about features into building applications i think with a bit more practice you're well on your way slightly that was awesome yeah yeah i thought you did great