Beginner React.js Coding Interview (ft. Clément Mihailescu)
ฝัง
- เผยแพร่เมื่อ 19 พ.ย. 2020
- I give Clément Mihailescu a mock React.js interview that is geared towards beginners.
Checkout the video we made on Clem's channel: • Easy Google Coding Int...
#benawad #ClémentMihailescu #react
----
Follow me online: voidpet.com/benawad
#benawad - วิทยาศาสตร์และเทคโนโลยี
Checkout the video we made on Clem's channel where I do an Algo interview: th-cam.com/video/vHKzIPwWQkg/w-d-xo.html
Was not better to use the useEffect deps for refetching more?
Oke I guess you just are pointing the same which resulted in turning off rules :D
What about using useCallback for that fn instead of storing in the ref?
What font are you using?
I thought this interview was very realistic until you said "feel free to Google things". Yeah, I've never been on a interview where they allowed me to google anything...
Interview for a FRONT-END position -
"The uglier the better"
"This is my jam!"
Thanks, we'll be in touch.
Lmaooo
Do you know what the scariest thing in the world is? Not knowing how to write a React component in a Ben Awad interview.
Do you know what’s even more scary than this ? An Angular interview
Jokes aside I’m actually learning Angular. I might have made the wrong choice but oh well
@@harispapadopoulos4295 react is easy for me but angular is tuff...
hhhhhhhhhhhhhhhhhhhhhhhh
Incorrect, the scariest thing is getting a high paying job writing Angular code... gulp
Ahahahah good one
cool trick:
1. Know nothing about React
2. Watch this video
3. Study React for a bit
4. Come back
5. "oooh"
lol happened to me
Going to try that
I've hardly touched react, but it mostly made sense to me. I was a bit confused that the function he was calling wasn't hoisted though. Is that a typescript feature?
@@thesupercoach Could be encapsulation meaning High order function. I might be wrong here, still learning Javascript.
@@thesupercoach arrow functions don't get hoisted
As much as most of this makes sense to me as a Junior Webdeveloper, I find it stunning that people can write code from the get go just thinking through the application and using knowledge they've gathered over the years. I literally have to google nearly every shit that I try to make and it really puts it into perspective for me of how much I still need to learn. :)
You will be there
Once you have a solid 1000 hours of solid production experience in web dev, you should be able to be in a close enough state to mirror clem's performance.
shhhiiish I tought i was the only one and I must know how to write all that without checking Everything although I understand the concepts very well and I felt like the most shit programmer ever thank you haha
this exactly is the difference between a jr dev and a senior dev, I also used to google every single little thing when I first started in this field, but as I developed a better skillset and through reading the docs countless times and books and experience it all led me to actually know how to do shit from scratch....if you are really passionate about coding you will be there in no time.
@@androranogajec5029 Thanks for that brilliant tip, haven't thought about that. Really glad you told me that.
How front end interviews should be: This video
How they actually are: ok so can you invert a binary tree for me please
that's the horrible truth
Ik right !! Not knowing algo and da is exactly why I choose frontend. Now they expect us to be a master in that
Just attach class invert to the tree and use this CSS:
.invert {
transform: rotate(180deg);
}
@@digibard2890 love this
Only at mega corps, interviews at smaller companies are more like the above or they just want to see some code/projects and talk to you about what you've worked on.
I wish every tech interview was as friendly
Yup
they usually are
Never met one that wasn't this friendly
Maybe it's just in your mind the anxiety
You've said it all!
so i work for him and he works for you...? i may have to quit
lmaooooo
Looks like a pyramid scheme😂
You should hire Ben and finish the circle
lmaoooo
yea now you hire ben
This way of interviewing seems way more relative than just doing algorithms, I wish companies would adopt this.
Yeah, to me watch someone inverting binary tree is so boring haha
In Ukraine most of interviews are like this, close the project/product challenges
frontend interviews are usually less ds-algo
I would leave the interview. If I were applying for a font end position and they started asking my questions beyond the scope of the position I would tell them to have a wonderful day. That is if that is only their concern. If they started out with relative questions and then lead into it just to see the scope of everything I knew... then that would be fine. But I feel most front end specific job interviews do focus more on this style of interviewing. I mean they need to know you can do the front end stuff. Would be funny to hire someone that has mastered sorting algos but then couldn't center a div.
Who ever can solve algorithm questions can solve or learn how to solve these questions and challenges in a minute.
I'd love to see you guys continue this as a series, gradually increasing the difficulty!
Ben is doing the sassy interviewer stereotype perfectly here.
33:06 - you'd wrap fetchNextUser in a useCallback if you wanted to satisfy the linter and pass fetchNextUser to the dependency array. This is because the function is re-allocated on render because it's within render scope, and therefore the function reference changes between renders, causing your useEffect to every time (based on shallow comparison of the dep array), so useCallback avoids that and keeps the reference the same between renders.
the ref almost hurt my feelings :D
thank you, that was so nice! as a junior I feel comforted seeing this type of interview, I could actually answer those questions without even typing the code. now it would be really cool to see something like this for junior+, middle, middle+ etc. levels!
I'm a Sr. They didn't ask me to code anything or provide any code. It's the jr roles where they'll want to see it. At a mid and sr level. I think the interviewer can tell because you'll be asking questions about the codebase and the design patterns, issues they have, how they release new features and so on. How many times they're late or delayed, at that time what is going on (are people working weekends and late nights). You're more worried about how the company functions at that point.
Thank you guys for making this video. I really enjoyed going through these questions & trying to code the solutions to test myself before watching Clément's solutions . Keep making such videos.
0:50 Make a counter
3:10 Fetch an API
14:10 Display the API data in UI components
22:06 Add a button to load more results
29:38 Bonus: fix the linter's useEffect dependency array requirement
Hey Ben and Clement, nice interview! For your question at 33:11, React encourages you to wrap your fetchRandomData function in useCallback and add it to the dependency array of the useEffect to satisfy the linting 😁 Unfortunately then you'd have to handle the dependency array for the useCallback hook, but it's the "official recommendation". I liked the useRef hack though :) Nice work and entertaining content as always!!
i like the fact that clement is humble and admit that he doesn't know about the error upfront
This is really good, I've done interviews in C#, python and on regular stuff but had no idea what it looked like for front end, this is a really approachable React interview to practice with!
seeing some React stuff ( other than algo ), was really exciting. Also learned a lot. Please try bringing many more stuffs like this. Will be happy to watch :)
Wow, I never knew you could do {name: {first, last}} to convert nested objects into variables, awesome.
Object destructuring
Yes lol, I would have done:
const { name } = userInfo;
const { first, last } = name;
HAHAHAHA
Several tips here:
1. Always add a default value when destructuring nested objects. Like { name: { first, last } = {} }. This will help you to avoid errors if `name` is not defined in base object.
2. You can also rename variables during destructuring to avoid shadows. Like { name: {first: firstName, last: lastName}}
Yea he does a lot of destructuring here, it's confusing at first, but then extremely convenient
Nice
gender: “female”
name: Object
8:32
HAHAHA
lmao
bruh i saw that too
Secret coding interview technique. Having sexist code gives you a higher acceptance rate at faang!
Isnt that all women?
I started with react 6 months ago cool to see i was able to answer this stuff. You guys make great videos
Loved this video. Super natural and really funny from both of you. PLUS really useful as well for beginners.
So much fun just watching you write React in this context. Nice video! :)
For the final bit you can pass your setters in the effect, or memo it instead of ref it. But I usually don't have empty dependencies as linting error. Also, I'm almost sure that if you try to set some state while the component already unmounted you'll get a memory leak error on your log, so to go around that you can return early in the promise resolution by setting a flag on a return function of the effect
Awesome stuff !
what I most liked about this video is the fact that Clément was thinking out loud so we could have a better understanding on how he would solve a problem.
I would love to see a second video.
Thanks guys, from France
PS : René Coty was a french president ;)
This was so great. Love your videos, they’re really helping give me more confidence. One side note, never use index on as a key unless the list is immutable. Also, your fetch function was a const, so I’m not sure how the reference would be reassigned.
Great video, love this live coding even though the task isn't that complex, very efficient, and accurate solution :)
Interview: Why do you want to join this company?
Candidate: I was bullied into doing this interview. lmao
useCallback instead of useRef - it memoizes the fetch function for ref equality, so the effect doesnt rerun on every render. UseCallback will mean that if you eventually do a refactor so the function *does* depend on some value inside the component, your compiler will yell at you until you include it as a dependency. Useref might solve the problem now, but it can hide future potential dependencies. Also, working with a ref is annoying, constantly looking up .current or forgetting to.
If the function used really doesnt depend on anything in the component then it should be externalised if possible.
There's an issue with using useCallback as well. useCallback would depend on all the state variables as well, and since state is changing on each click, useCallback would also return a new function. We'll get the same lint errors like we're getting right now.
@@binaryskeptic5988 The only state I can see is the page number - i.e. only incrementing the page number (stated in the useCallback deps array) should rerun the effect - which if you think about it, is the exact behavior this component is looking for.
In most if not all cases, dependencies may seem annoying at first, but eventually you understand that they declaratively get at exactly the functionality that is needed
@@ShaloopShaloop Makes sense, thank you!
I was looking for this solution.
you could use useMemo as well, by returning the fetch function itself from the hook's callback. useCallback is basically a specialization of useMemo for functions.
This was great!! It's super helpful to follow off-the-cuff reasoning. Coming from Vue and starting to dust off my very limited React knowledge
This should be a series !! With a bunch of different languages, and levels of difficulties
Can we just appreciate and admire how Clement has nearly 100% accuracy while typing at those speeds
Sorry but not impressive
@@CrazyTVAnime sOrRy bUt NoT ImPrEsSiVe
@@CrazyTVAnime ok boomer
@@CameronCobb sorry but not impressive
@@kylekyle2171 boomer doesnt work here since im 19 and I used to type 170 when I was 13 KEKW
I wish all interviews Front-End were like this. Relaxing, yet, extensive.
beautiful......
I'm gonna get to this level soon bro! that feeling of complete confidence in your problem solving skills is the sweetest thing in the world. Excellent work Clément
Thank you for adding tips and best practices too. Highly appreciated.😃
Bro i watched your video just like 30 mins before my web development interview and in the react section they have asked the same questions as you have asked and I have solved all those questions thanks to you 😀😀
Should totally do the advanced react interview next
Very cool. I really like how you both talk us through what's going on.
Very nice and clear video, didnt get fully understanding on the empty array error and the sol of it...
Keep doing videos like so, very much appreciated !
i just started learning react few months ago and I am so happy that I understood all the questions and the potential solutions :) Great content!!
Hi Kuldip! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
No you didn't
@@computeraidedyami i actuallly did.. It was not because I am smart or anything, I had to learn it for building pcf control in dynamics crm which involves learning react framework. I struggled for weeks until the idea of react components etc clicked in my brain. I still struggle with some of the difficult concepts but overall I undertand things a lot better now.
@@kuldipmaharjan oh ok 👍
"Uglier the better, this is my jam" nailed it.
This was fun to watch. Thank you for this.
Also, I have a lot to learn. I was able to follow it, but I need to develop the instincts to find the solutions in a timely manner.
I used this to practice for my first React interview - it helped - thanks!
Did you get it?
I love these two guys! Two of the most trustworthy coding mentors out there.
Love this!! Thank you so much! Please provide more videos like this~
I like how Ben Awad puts Clement on the Hot seat... For someone who is an Expert in programming.. It's very mind blowing that still haven't forgotten the basics of programming or should I rather say the fact that they still get excited to do the small tasks... Bigups
Just got to the gym, still in the parking lot .. can’t stop watching!! Haha great video
it feels so good to know what they are talking about :)
AWESOME! please do a second part BOTH OF YOU, of course with another topic PLEASE!!!
Cheers from Arg
every time I watch you guys videos I feel like I am hanging out with the best!!!!!! thanks guys!!!!!!!
Clément's confidence started to increase once he figured out that the bug was from line 31 instead of 32.
HE just cared about money :P
For that linter error (which I deal with weekly), take that huge function expression out of the component (it's unreadable to define those in there anyways).
Your first thought will be, but now I don't have `setUserInfos` in scope. Right, so pass it as a callback function.
You have one function that fetches data, creates a new merged list, and updates 2 pieces of state. It does too much anyways.
Ok, but now you're thinking that you need to add `setUserInfos` to the dependency list of useEffect, and you're right back to where you started, right?
That's fine, the function that comes back from `useState` is the same exact function on each render. It'll never change.
Consider this snippet from the react docs:
"React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list."
All variables that could change over time should be included in the dependency array. It might not make a lot of sense at first but thinking deeper it really does. In case the fetch function was not initialized by the time the useEffect without dependencies runs, the result would make you wonder. I really had to get my head around this at first, also with the useCallback and useMemo hooks which also use dependencies.
Also, a tip for the counter setter function. When using it, you can just increase like this setCounter(oldCounter => oldCounter + 1). This might come in handy especially when using dependencies to not include the getter and setter as dependencies, which might result in an endless loop.
For linting error at the end, since you re-defining/assign a new value to your function variable, that is the reason why it changes and always be different.
So to resolve it, use use.memo or use.callback.
Another thing, why using ref stopped the error, since we still assign the value to current?
1. Ref is always stay the same regardless of touching its fields, and changing field doesn't mean changing parent pointer.
2. Useref doesn't cause a re-render. So you can change the current an any point inside render function.
Cheers,
fetchNextUser() is a function that gets newly created on every render call since its defined inside the component.
Wrap fetchNextUser() inside the useCallback() hook and mention the dependencies which when changed must create a new fetchNextUser().
It's a bit more efficient this way and I guess that can get rid of the lint error.
^ this to me seems like the best way to handle this
Isn't that pretty much equivalent to putting it in a ref in this case, though?
Great tip!
Aside from needing to learn more about pagination, I’d get the job 😂 I wish interviews were like this
this was really fun to watch, and really interesting to see the thought process off it
To solve the eslint message you could:
- Create the fetchNextUser inside the sideEffect so there's no dependency. If it's possible - however, it's been used outside the useEffect.
- Otherwise, use a useCallBack function to memoize the function to avoid re-rendering and re-computing as it's a function.
This is the most forgiving interview I've seen LOL. Pls be everyone's interviewer Ben!
12:26 we're not gonna catch any errors cuz..... we don't do that here
*CEO MATERIAL SPOTTED*
12:35 I think this code will try to set state when the component is unmounted. Well this component is root in this video, so it won't unmount. But its more than just optimisation. Its rather a bug doing so.
33:00 this lint is there because this often causes problems which are later hard to reproduce because the outcome/behavior it may cause is kind-of undefined - means, you can't tell "oh this is because of the stale reference", because outcome is always something different depending on what you are doing. For example if you actually follow the lint and add the function to dependency of the useEffect, it means it will run every update, because the function fetchNextUser is recreated each update/render of App, so the useEffect is run each update. And it can also create infinite callback loop, since call to it updates page, which updates state, which cause App component to update, which cause the function to be recreated (without useRef), and that again cause useEffect to run -> infinite loop.
Problem/Solution: The problem is caused by design. The fetchNextUser function does not belong in the App component. Why is it there in the App component? Because it takes all the state hook functions in closure. But why does it? fetchNextUser is not called fetchNextUserAndUpdateComponentState, right? You need 1 function for fetching, that takes params like page and either uses asyn-await to return a result sync, or return a promise. Its independend of state and can be outside App. Everything else belongs in the useEffect closure, inclusing call to this API and updating the page. You could also useCallback, but it works around design error. Also useRef is just working around the root problem, which is simple to fix.
As someone just breaking into the world of programming this was incredibly insightful!
I was dying with laughter when he tried to disable the lint rule with a comment
But we all do that especially for this lint warning 🤣
Yeah this dude is not that good as he says he is
The first thing he did right is the comment but the content is wrong so unable to solve the lint error haha But //eslint-disable-next-line should do it ~
He was at Facebook for 2 months only. Prior to that he was at Google for only 3 years. He has only been programming for 3 years. He learnt how to code 6 months before joining Google. That is why he is not that good.
@@larrydarrell7299 you can be more than good with this much of coding
Moving from another framework to react I love that I was able to understand all the questions and the solutions and I have learnt more from this video than from many tutorials and courses
Hi Chaitanya! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
This was fun and I learned a bunch. Thanks for making this video!
Lol, this is really good content. Keep it up guys! I had so much fun watching this.
imagine saying "the uglier the better" to a front end dev😂
Ps- Thanks for the 200 likes
when he said that I was really hoping he would use a
lmaoooo
lol
Well functionality is important if it's working . we can do makeups later.
And the designer 😂
This is the greatest crossover of all time
Yeah, I've watched both of the interview videos. It would be cool if we have a 2.0 version of both interviews with much harder questions :).
Hey Ben! You should add more such videos. Loved it!
Clement is such a good sport. Legend! Ben too :)
I've got notification of this video from both channels.
Only a few mins in but this makes me feel better knowing that other people do stuff like trying to call function before it has been declared 😀. Cool interview!
Another version for sure, this was one of my favorites!
At 11:50
You can't use Await directly in UseEffect Callback.
Even you can't type async directly into useEffect Callback for example
useEffect( async ( )=>{
const response = await someApiCall();
} )
You have to create a new function inside the callback of useEffect and then you can use Async Await. For Example
useEffect( ()=>{
async function helloWorld (){
const response = await someApiCall();
}
helloWorld();
})
This is the correct approach.
Ben, can you interview the Techlead? :D
Ex-millionaire, ex-Google, ex-Facebook, ex-husband, ex-interviewee
This is a joke right?
I like, here take my like 👍👍
Hahahahha
On React Native, as a millionaire?
This is pretty similar to a recent react interview I had. Nice video and convo :)
This video was so helpful! I had a job interview and they gave me this exact test using a different API.
Amazing what’s next a cook book app ?
I literally had this interview today... Dude launched right into it with no small talk and went through it at 3x speed. It was rough.
Did you get the job?
Hope you got the job bro
This is great @benawad I really wish more interviews like this!
This is interesting, I wish all interviews will be this fun and interactive
This guy could probably speed run building startups
23:16 So much passion in this
As a person who has started learning react this gave me a confidence boost since I was able to give right answers
Awesome! Im starting my first job (after graduation) and they use react. This was so helpful!
damn, even I'm nervous for Clement lmao
Bruh, Imagine getting a job.
Jobs are overrated, Dante's 7th circle of tutorial hell is where it's at.
This was really fun. We need a second version of this but with Auth APIs ;)
it was a blast watching this, guys. I really like the format of the interview!
Clement when you did map - you forgot to assign key attribute.
Oh the warnings he shall get 😂😂
Technically they aren't required. It's just that React will kill you for that.
Jajaja I've never imagined see those two in a vídeo jajaja
This is really fun. Do more of this, please.
I think your supposed to implement the useCallback hook for the useEffect dependency problem. This prevents the FetchNextUser function from being recreated on every re-render which could cause an infinite loop should it effect the components props or its state. Instead you declare the function as a useCallback fnc
"I'll put this in a p tag"
"fantastic...!"
8:23 thats not weird cause you're creating a function using function expression not declaration so it will not be hoisted at the top
Yeah, but I'm calling that function in another function (the React component), so it should never be an issue, as far as I know. I effectively did:
```
function foo() {
bar();
}
const bar = () => {};
```
This _should_ always run properly, and it indeed doesn't get flagged as problematic by the normal TypeScript type checker. Seems like it's the ESLint "no-use-before-define" rule that's a little overly protective.
@@clem yes you're correct
@@clem If I am correct, const and let variables don't get hoisted. Only var and functions do.
@@EDToasty hoisting would matter here if foo would actually be called before bar is declared in Clement example. You would then get a reference error (if bar is declared with const, so only declaration is hoisted without any initialisation, hence the reference error) or a type error (if bar is declared with var, so declaration is hoisted and initialised with "undefined" so it is not yet initialised as a function). Since component is exported, there should be no problems
I've never been so happy in my life, watching coding videos!!! 😄😄😄
This was actually a very interesting video and was fun to watch.
I wish interviewers would learn from this
Waiting for the next interview... Angular xD
Oh please haha
1st task: Please harvest as many carrots as you can in 30 minutes.