Beginner React.js Coding Interview (ft. Clément Mihailescu)

  Рет қаралды 2,208,797

Ben Awad

Ben Awad

Күн бұрын

Пікірлер: 1 600
@bawad
@bawad 4 жыл бұрын
Checkout the video we made on Clem's channel where I do an Algo interview: kzbin.info/www/bejne/rHmuq3yGrLyEock
@quirinolorusso125
@quirinolorusso125 4 жыл бұрын
Was not better to use the useEffect deps for refetching more?
@quirinolorusso125
@quirinolorusso125 4 жыл бұрын
Oke I guess you just are pointing the same which resulted in turning off rules :D
@quirinolorusso125
@quirinolorusso125 4 жыл бұрын
What about using useCallback for that fn instead of storing in the ref?
@david_wolfenden
@david_wolfenden 4 жыл бұрын
What font are you using?
@BillClinton228
@BillClinton228 3 жыл бұрын
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...
@creatorsremose
@creatorsremose 3 жыл бұрын
Interview for a FRONT-END position - "The uglier the better" "This is my jam!" Thanks, we'll be in touch.
@louisnwosu7186
@louisnwosu7186 3 жыл бұрын
Lmaooo
@arkansavalder
@arkansavalder 4 ай бұрын
you forgot "I was bullied into doing this"
@Enjubi
@Enjubi 3 жыл бұрын
cool trick: 1. Know nothing about React 2. Watch this video 3. Study React for a bit 4. Come back 5. "oooh"
@zurabzaridze9603
@zurabzaridze9603 3 жыл бұрын
lol happened to me
@Vilhena6969
@Vilhena6969 3 жыл бұрын
Going to try that
@thesupercoach
@thesupercoach 3 жыл бұрын
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?
@ItzJammyZzJ
@ItzJammyZzJ 3 жыл бұрын
@@thesupercoach Could be encapsulation meaning High order function. I might be wrong here, still learning Javascript.
@Forsvinne77
@Forsvinne77 3 жыл бұрын
@@thesupercoach arrow functions don't get hoisted
@CardinalHijack
@CardinalHijack 4 жыл бұрын
How front end interviews should be: This video How they actually are: ok so can you invert a binary tree for me please
@weirdscintillatingvedios2122
@weirdscintillatingvedios2122 4 жыл бұрын
that's the horrible truth
@ramudaredevil
@ramudaredevil 4 жыл бұрын
Ik right !! Not knowing algo and da is exactly why I choose frontend. Now they expect us to be a master in that
@digibard2890
@digibard2890 4 жыл бұрын
Just attach class invert to the tree and use this CSS: .invert { transform: rotate(180deg); }
@CardinalHijack
@CardinalHijack 4 жыл бұрын
@@digibard2890 love this
@jackvial5591
@jackvial5591 4 жыл бұрын
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.
@Jindujun
@Jindujun 4 жыл бұрын
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. :)
@_danisson
@_danisson 3 жыл бұрын
You will be there
@ade8890
@ade8890 3 жыл бұрын
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.
@_maizon
@_maizon 3 жыл бұрын
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
@andreya6156
@andreya6156 3 жыл бұрын
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.
@Jindujun
@Jindujun 3 жыл бұрын
@@androranogajec5029 Thanks for that brilliant tip, haven't thought about that. Really glad you told me that.
@clem
@clem 4 жыл бұрын
Do you know what the scariest thing in the world is? Not knowing how to write a React component in a Ben Awad interview.
@harispapadopoulos4295
@harispapadopoulos4295 4 жыл бұрын
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
@FahadAli-ot5kn
@FahadAli-ot5kn 4 жыл бұрын
@@harispapadopoulos4295 react is easy for me but angular is tuff...
@salahaosamaelhoseneyali7019
@salahaosamaelhoseneyali7019 4 жыл бұрын
hhhhhhhhhhhhhhhhhhhhhhhh
@Freshlygrazed
@Freshlygrazed 4 жыл бұрын
Incorrect, the scariest thing is getting a high paying job writing Angular code... gulp
@alexIVMKD
@alexIVMKD 4 жыл бұрын
Ahahahah good one
@i2awWombat
@i2awWombat 3 жыл бұрын
gender: “female” name: Object 8:32
@arafatzahan2082
@arafatzahan2082 3 жыл бұрын
HAHAHA
@ron0studios
@ron0studios 3 жыл бұрын
lmao
@alexandermylnikov7774
@alexandermylnikov7774 3 жыл бұрын
bruh i saw that too
@ron0studios
@ron0studios 3 жыл бұрын
Secret coding interview technique. Having sexist code gives you a higher acceptance rate at faang!
@jamnic98
@jamnic98 3 жыл бұрын
Isnt that all women?
@richardguerre3475
@richardguerre3475 4 жыл бұрын
I wish every tech interview was as friendly
@ayushkedia8469
@ayushkedia8469 4 жыл бұрын
Yup
@alpha_6t9
@alpha_6t9 4 жыл бұрын
they usually are
@GodleyBeast
@GodleyBeast 4 жыл бұрын
Never met one that wasn't this friendly
@Rafps3player
@Rafps3player 4 жыл бұрын
Maybe it's just in your mind the anxiety
@fotiem.constant4948
@fotiem.constant4948 4 жыл бұрын
You've said it all!
@Knigh7z
@Knigh7z 4 жыл бұрын
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.
@ypeelsleepy
@ypeelsleepy 5 ай бұрын
the ref almost hurt my feelings :D
@sjadev
@sjadev 4 жыл бұрын
This way of interviewing seems way more relative than just doing algorithms, I wish companies would adopt this.
@danielcastillo7133
@danielcastillo7133 4 жыл бұрын
Yeah, to me watch someone inverting binary tree is so boring haha
@alex_chugaev
@alex_chugaev 3 жыл бұрын
In Ukraine most of interviews are like this, close the project/product challenges
@xskrish
@xskrish 3 жыл бұрын
frontend interviews are usually less ds-algo
@beaubreau
@beaubreau 3 жыл бұрын
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.
@benyaminbeyzaie301
@benyaminbeyzaie301 2 жыл бұрын
Who ever can solve algorithm questions can solve or learn how to solve these questions and challenges in a minute.
@quirked504
@quirked504 Жыл бұрын
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
@dumbfailurekms
@dumbfailurekms 3 ай бұрын
ty
@panjc8543
@panjc8543 4 жыл бұрын
i like the fact that clement is humble and admit that he doesn't know about the error upfront
@JayronWhitehaus
@JayronWhitehaus 4 жыл бұрын
I'd love to see you guys continue this as a series, gradually increasing the difficulty!
@honglytech
@honglytech 3 жыл бұрын
Clément's confidence started to increase once he figured out that the bug was from line 31 instead of 32.
@ShaloopShaloop
@ShaloopShaloop 4 жыл бұрын
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.
@binaryskeptic5988
@binaryskeptic5988 4 жыл бұрын
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.
@ShaloopShaloop
@ShaloopShaloop 4 жыл бұрын
@@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
@binaryskeptic5988
@binaryskeptic5988 4 жыл бұрын
@@ShaloopShaloop Makes sense, thank you!
@premk191
@premk191 4 жыл бұрын
I was looking for this solution.
@dmz985
@dmz985 4 жыл бұрын
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.
@LilMartyFarty
@LilMartyFarty 3 жыл бұрын
Wow, I never knew you could do {name: {first, last}} to convert nested objects into variables, awesome.
@slysmyle972
@slysmyle972 3 жыл бұрын
Object destructuring
@nibbler7687
@nibbler7687 3 жыл бұрын
Yes lol, I would have done: const { name } = userInfo; const { first, last } = name; HAHAHAHA
@ВиталийГрозинский-й2х
@ВиталийГрозинский-й2х 3 жыл бұрын
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}}
@nedaltrebor8553
@nedaltrebor8553 3 жыл бұрын
Yea he does a lot of destructuring here, it's confusing at first, but then extremely convenient
@laplasparadox3138
@laplasparadox3138 3 жыл бұрын
Nice
@habibsspirit
@habibsspirit 4 жыл бұрын
Ben is doing the sassy interviewer stereotype perfectly here.
@lifetimess
@lifetimess 4 жыл бұрын
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!
@barkbark5645
@barkbark5645 9 ай бұрын
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.
@sudarshankj
@sudarshankj 4 жыл бұрын
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.
@tylerjnewman
@tylerjnewman 4 жыл бұрын
^ this to me seems like the best way to handle this
@KRIGBERT
@KRIGBERT Жыл бұрын
Isn't that pretty much equivalent to putting it in a ref in this case, though?
@TCgis95
@TCgis95 Жыл бұрын
Great tip!
@mfbx9da4
@mfbx9da4 4 жыл бұрын
Should totally do the advanced react interview next
@raynvii7140
@raynvii7140 4 жыл бұрын
"Uglier the better, this is my jam" nailed it.
@kuldipmaharjan
@kuldipmaharjan 3 жыл бұрын
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!!
@shivanigaddagimath6105
@shivanigaddagimath6105 3 жыл бұрын
Hi Kuldip! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
@computeraidedyami
@computeraidedyami 2 жыл бұрын
No you didn't
@kuldipmaharjan
@kuldipmaharjan 2 жыл бұрын
@@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.
@computeraidedyami
@computeraidedyami 2 жыл бұрын
@@kuldipmaharjan oh ok 👍
@NickWhite
@NickWhite 4 жыл бұрын
so i work for him and he works for you...? i may have to quit
@skgkensquad738
@skgkensquad738 4 жыл бұрын
lmaooooo
@mrfred456123
@mrfred456123 4 жыл бұрын
Looks like a pyramid scheme😂
@jaequery1112
@jaequery1112 4 жыл бұрын
You should hire Ben and finish the circle
@processorbot8761
@processorbot8761 4 жыл бұрын
lmaoooo
@soulninjadev
@soulninjadev 4 жыл бұрын
yea now you hire ben
@plusk343
@plusk343 4 жыл бұрын
12:26 we're not gonna catch any errors cuz..... we don't do that here *CEO MATERIAL SPOTTED*
@shaqirrazak699
@shaqirrazak699 4 жыл бұрын
Can we just appreciate and admire how Clement has nearly 100% accuracy while typing at those speeds
@CrazyTVAnime
@CrazyTVAnime 3 жыл бұрын
Sorry but not impressive
@CameronCobb
@CameronCobb 3 жыл бұрын
@@CrazyTVAnime sOrRy bUt NoT ImPrEsSiVe
@kylekyle2171
@kylekyle2171 3 жыл бұрын
@@CrazyTVAnime ok boomer
@CrazyTVAnime
@CrazyTVAnime 3 жыл бұрын
@@CameronCobb sorry but not impressive
@CrazyTVAnime
@CrazyTVAnime 3 жыл бұрын
@@kylekyle2171 boomer doesnt work here since im 19 and I used to type 170 when I was 13 KEKW
@andrw_
@andrw_ 3 жыл бұрын
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!!
@hamzahmd_
@hamzahmd_ 3 жыл бұрын
Interview: Why do you want to join this company? Candidate: I was bullied into doing this interview. lmao
@dmo253
@dmo253 3 жыл бұрын
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.
@Lysaenai
@Lysaenai 3 жыл бұрын
Did you get the job?
@kenthankgod2619
@kenthankgod2619 2 жыл бұрын
Hope you got the job bro
@will_1536
@will_1536 4 жыл бұрын
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!
@jacksonboehman3454
@jacksonboehman3454 3 жыл бұрын
I used this to practice for my first React interview - it helped - thanks!
@squashh
@squashh 3 жыл бұрын
Did you get it?
@programmercouple
@programmercouple 4 жыл бұрын
I wish all interviews Front-End were like this. Relaxing, yet, extensive.
@yubin_jo
@yubin_jo 4 жыл бұрын
This should be a series !! With a bunch of different languages, and levels of difficulties
@namankukreja818
@namankukreja818 Жыл бұрын
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 😀😀
@AmanRaj-gy6qv
@AmanRaj-gy6qv 4 жыл бұрын
imagine saying "the uglier the better" to a front end dev😂 Ps- Thanks for the 200 likes
@PP-sm4zm
@PP-sm4zm 4 жыл бұрын
when he said that I was really hoping he would use a
@processorbot8761
@processorbot8761 4 жыл бұрын
lmaoooo
@phil5053
@phil5053 3 жыл бұрын
lol
@muhammadwaqarsiddiqui6731
@muhammadwaqarsiddiqui6731 3 жыл бұрын
Well functionality is important if it's working . we can do makeups later.
@natoisnazi
@natoisnazi 3 жыл бұрын
And the designer 😂
@kelbiekelbie909
@kelbiekelbie909 4 жыл бұрын
I was dying with laughter when he tried to disable the lint rule with a comment
@iMakeYoutubeConfused
@iMakeYoutubeConfused 4 жыл бұрын
But we all do that especially for this lint warning 🤣
@siber195
@siber195 4 жыл бұрын
Yeah this dude is not that good as he says he is
@haogreat6899
@haogreat6899 3 жыл бұрын
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 ~
@larrydarrell7299
@larrydarrell7299 3 жыл бұрын
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.
@iMakeYoutubeConfused
@iMakeYoutubeConfused 3 жыл бұрын
@@larrydarrell7299 you can be more than good with this much of coding
@diegofss11
@diegofss11 3 жыл бұрын
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.
@alexwhitmore4902
@alexwhitmore4902 4 жыл бұрын
Just got to the gym, still in the parking lot .. can’t stop watching!! Haha great video
@Alex-vg7uu
@Alex-vg7uu Жыл бұрын
If I ever get have an interviewer like this - I know it’s the kind of person I don’t want to work with. Anyone who watches someone code like that in an interview has a serious superiority complex.
@ansedd
@ansedd 3 жыл бұрын
it feels so good to know what they are talking about :)
@gasparsigma
@gasparsigma 4 жыл бұрын
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
@Captainlonate
@Captainlonate 3 жыл бұрын
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."
@JustinProfaizer
@JustinProfaizer 3 жыл бұрын
I love these two guys! Two of the most trustworthy coding mentors out there.
@slan7
@slan7 4 жыл бұрын
damn, even I'm nervous for Clement lmao
@tichouls5176
@tichouls5176 4 жыл бұрын
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 ;)
@mokroargra7277
@mokroargra7277 4 жыл бұрын
I started with react 6 months ago cool to see i was able to answer this stuff. You guys make great videos
@robertyoung701
@robertyoung701 2 жыл бұрын
So much fun just watching you write React in this context. Nice video! :)
@tannerbarcelos6880
@tannerbarcelos6880 4 жыл бұрын
Aside from needing to learn more about pagination, I’d get the job 😂 I wish interviews were like this
@macki9714
@macki9714 2 жыл бұрын
00:50
@ankitkr09
@ankitkr09 4 жыл бұрын
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.
@sibonelovilakazi3042
@sibonelovilakazi3042 3 жыл бұрын
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
@石神せんとう
@石神せんとう 4 жыл бұрын
This is the greatest crossover of all time
@KieranAtkins
@KieranAtkins 2 жыл бұрын
As someone just breaking into the world of programming this was incredibly insightful!
@hfsfy3939
@hfsfy3939 4 жыл бұрын
Bruh, Imagine getting a job.
@МаркоЈакшић
@МаркоЈакшић 4 жыл бұрын
Jobs are overrated, Dante's 7th circle of tutorial hell is where it's at.
@rohankohli07
@rohankohli07 3 жыл бұрын
this was pretty fun, i'd pause after Ben posted the question and tried to code the solution, the most time I wasted was trying to use fetch correctly, so i'd say just install whichever lib you're most comfortable with
@shivanigaddagimath6105
@shivanigaddagimath6105 3 жыл бұрын
Hi Rohan! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
@arijitdas7526
@arijitdas7526 4 жыл бұрын
I've got notification of this video from both channels.
@balu.92
@balu.92 4 жыл бұрын
Ben, can you interview the Techlead? :D
@jorgejarai
@jorgejarai 4 жыл бұрын
Ex-millionaire, ex-Google, ex-Facebook, ex-husband, ex-interviewee
@ashfaq8238
@ashfaq8238 4 жыл бұрын
This is a joke right?
@wackyator
@wackyator 4 жыл бұрын
I like, here take my like 👍👍
@rezmaeeey
@rezmaeeey 4 жыл бұрын
Hahahahha
@randerins
@randerins 4 жыл бұрын
On React Native, as a millionaire?
@fotios4902
@fotios4902 4 жыл бұрын
I've never been so happy in my life, watching coding videos!!! 😄😄😄
@dh.bryson1627
@dh.bryson1627 4 жыл бұрын
This guy could probably speed run building startups
@sayantandas3511
@sayantandas3511 3 жыл бұрын
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 :)
@brandonliralizarraga9809
@brandonliralizarraga9809 4 жыл бұрын
Jajaja I've never imagined see those two in a vídeo jajaja
@flux2956
@flux2956 2 ай бұрын
First time I watched this, I was overwhelmed. Now that I know react and typescript, this is definitely a beginner task.
@ramudaredevil
@ramudaredevil 4 жыл бұрын
I know this is beginner react interview but it was fun to be able to point out the errors before Clement figured it out. Made me feel like a genius 😂😂😂😌
@RealNaisuCinema
@RealNaisuCinema 4 жыл бұрын
This is beginner stuff? How long does it take to get to this point in react?
@LuisMorales-yx8di
@LuisMorales-yx8di 4 жыл бұрын
@@RealNaisuCinema react is like javascript if you know javascript and html you should be able to follow it
@RealNaisuCinema
@RealNaisuCinema 4 жыл бұрын
@@LuisMorales-yx8di I know the fundamentals of JavaScript and how it works but I can’t make a full project without using stack overflow for help I just know how to do basic things can you look at my portfolio and tell me if you think I’m ready for react? isaiahflagg.github.io/myPortfolio/
@RealNaisuCinema
@RealNaisuCinema 4 жыл бұрын
@@LuisMorales-yx8di actually don’t look yet lol I failed to push my code to GitHub last night so my most current projects are not on my portfolio yet lol
@RealNaisuCinema
@RealNaisuCinema 4 жыл бұрын
@@LuisMorales-yx8di ok you can look at the portfolio now lol
@adamstutorial9114
@adamstutorial9114 2 жыл бұрын
The programming community is so cool and friendly. I wouldn't think of any technical skills other than programming.
@csl4199
@csl4199 4 жыл бұрын
Waiting for the next interview... Angular xD
@gabeadams2926
@gabeadams2926 4 жыл бұрын
Oh please haha
@Fuckutube547465
@Fuckutube547465 4 жыл бұрын
1st task: Please harvest as many carrots as you can in 30 minutes.
@giftedbraintech5151
@giftedbraintech5151 4 жыл бұрын
This is interesting, I wish all interviews will be this fun and interactive
@kvncnls
@kvncnls 4 жыл бұрын
This is the most forgiving interview I've seen LOL. Pls be everyone's interviewer Ben!
@stanleyogadachinedu
@stanleyogadachinedu 2 жыл бұрын
Honestly, the first line of code Clément wrote is mind-blowing, because I have never seen it done like that anywhere. It's usually React.useState or imported directly from react. well done sir 😂
@yopp1234
@yopp1234 2 жыл бұрын
It's not well done. His code is filled with terrible practices and useless functions. Don't follow this.
@vitaliik8315
@vitaliik8315 4 жыл бұрын
Clement when you did map - you forgot to assign key attribute.
@evan7D0
@evan7D0 4 жыл бұрын
Oh the warnings he shall get 😂😂
@liviuganea4108
@liviuganea4108 3 жыл бұрын
Technically they aren't required. It's just that React will kill you for that.
@soleypas
@soleypas 3 жыл бұрын
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,
@iMakeYoutubeConfused
@iMakeYoutubeConfused 4 жыл бұрын
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
@clem
@clem 4 жыл бұрын
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.
@iMakeYoutubeConfused
@iMakeYoutubeConfused 4 жыл бұрын
@@clem yes you're correct
@EDToasty
@EDToasty 4 жыл бұрын
@@clem If I am correct, const and let variables don't get hoisted. Only var and functions do.
@stillgotitstories4227
@stillgotitstories4227 4 жыл бұрын
@@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
@SaharThe49
@SaharThe49 4 жыл бұрын
Great video, love this live coding even though the task isn't that complex, very efficient, and accurate solution :)
@landonschlangen
@landonschlangen 4 жыл бұрын
I'm surprised that Clement used axios for the API Question and not just fetch with async await.
@jaggler396
@jaggler396 4 жыл бұрын
Right? const result = await (await fetch(url)).json() would have done the job
@landonschlangen
@landonschlangen 4 жыл бұрын
@@jaggler396 Yep, he definitely made it more complicated then it needed to be.
@liviuganea4108
@liviuganea4108 3 жыл бұрын
Axios is far easier than Fetch and does some of the job for you.
@dairyisfine
@dairyisfine 2 жыл бұрын
This is more handy than a regular React beginner tutorial
@KaranSharma-ew7io
@KaranSharma-ew7io 3 жыл бұрын
finally who took everyone's interview is here for his exam . Now u will understand how it feels 🤣🤣
@Calcific9
@Calcific9 Жыл бұрын
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
@randerins
@randerins 4 жыл бұрын
"I'll put this in a p tag" "fantastic...!"
@anujshaan1006
@anujshaan1006 3 жыл бұрын
i watched this video in january 2021 and i didn't understand a thing... but now again i am here and this time i can solve all questions :)
@shivanigaddagimath6105
@shivanigaddagimath6105 3 жыл бұрын
Hi Anuj! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
@saradevanney9469
@saradevanney9469 4 жыл бұрын
Clement is such a good sport. Legend! Ben too :)
@santiagomontesinos2797
@santiagomontesinos2797 3 жыл бұрын
Coding interviews should be like this. This is how you code in a day to day basis.
@Anonymous11175
@Anonymous11175 Жыл бұрын
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.
@ilikespaghetti2170
@ilikespaghetti2170 3 жыл бұрын
this video inspired me to learn react before because i couldn't understand it and it looked cool, now it all makes sense lol
@VITORB82
@VITORB82 3 жыл бұрын
Why do you want to work here? I don't, but i have to eat.
@tabmax22
@tabmax22 Жыл бұрын
the counter task was technically incorrect, should be using the function version of useState. So basically, onClick = {( ) => setCounter(current => {return current +1})}
@chaitanyasanakkayala4173
@chaitanyasanakkayala4173 3 жыл бұрын
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
@shivanigaddagimath6105
@shivanigaddagimath6105 3 жыл бұрын
Hi Chaitanya! Are you open for job change currently? Would you be interested in exploring a job opportunity in web development?
@amateruss
@amateruss 3 жыл бұрын
Best React tutorial format I've seen so far.
@corpo_ethereal2744
@corpo_ethereal2744 3 жыл бұрын
Who else had to google half the stuff Clem was typing, even after implementing it on mutiple projects? Sigh. I have a coding interview today (my first) and while I'm grateful for stumbling upon this video, I have nowhere as much experience as Clem and I am so worried I'll mess it up. Only way is through I suppose.
@devmanek
@devmanek 3 жыл бұрын
As a person who has started learning react this gave me a confidence boost since I was able to give right answers
@ciscoserrano
@ciscoserrano 4 жыл бұрын
I know this was fun and meant to be funny and light hearted but I had actual anxiety watching this. Even at the begging when he said can you make a button that counts up when I click it, my mind went completely blank and all of a sudden I forgot my my own name. I hate coding interviews.
@jklasfjkl
@jklasfjkl 3 жыл бұрын
You need more experience then. If you've done this 1000 times you shouldn't blank out.
@haciendadad
@haciendadad 4 жыл бұрын
The best thing about this video is that someone that is a genius does the same thing we all do, and this was a beginner level test.
@farhan787
@farhan787 4 жыл бұрын
WAIT!!!! Clement didn't promote AlgoExpert here, he ain't Clement 😂😂😂😂😂
@CallousCoder
@CallousCoder 3 жыл бұрын
I learned more off React than i ever wanted to in my life!!! It was funny with the fetchRandomData moving it up. I have that so ingrained with writing C and pascal that when it isn’t prototypes it goes up. And I did a Java spring project, and the Java guys all put it below and they were frustrated that they had to scroll up on my code :) I said: “that’s how real programmer do it.” :)
@DaviAreias
@DaviAreias 10 ай бұрын
I think it’s because he used const instead of function keyword, otherwise it would still work because the variable would be hoisted
@CallousCoder
@CallousCoder 10 ай бұрын
@@DaviAreiasa function is const per definition. You can't change a function after all... Well you can in assembly it's called self modifying code but that's a different story. const nameless (lambda) function or named function is a constant
@dapkman9354
@dapkman9354 4 жыл бұрын
the perks of being a wallflower
@viraj_singh
@viraj_singh 4 жыл бұрын
Nice movie though.
@briankopp7010
@briankopp7010 2 жыл бұрын
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.
@microwavecoffee
@microwavecoffee 4 жыл бұрын
the real achievement was coding in that font
@nasratt
@nasratt 4 жыл бұрын
Which font is that?
@_rushii
@_rushii 4 жыл бұрын
@@nasratt yes that theme and font looks rly good
@kareemmika6210
@kareemmika6210 4 жыл бұрын
dank mono
@arto00-g2n
@arto00-g2n 3 жыл бұрын
This is legit! I would go as far as to say it’s much more realistic for the majority of developers. Ugly but works, use the internet to cheat, print data just to see what happens, etc. thanks for both for giving this a shot.
@shubhamsehgal2336
@shubhamsehgal2336 4 жыл бұрын
Am I the only one to get Clement's algo expert ad with his girlfriend on Ben's videos lol
@yashsingalkar9575
@yashsingalkar9575 2 жыл бұрын
I wish everyone allow googling stuff in tech interviews😂
@Danutz13bv
@Danutz13bv 4 жыл бұрын
Awesome interview! One thing I'd point out is, when you map over userInfos, you shouldn't use the idx as a key, React keys need to be unique to each item, not assigned on the spot
@Michael-London
@Michael-London 4 жыл бұрын
He also said it’s ‘semantic react’ - it’s more than that - react renderer needs that unique key.
@HikarusVibrator
@HikarusVibrator 4 жыл бұрын
this was amazing. Loved that it was frontend ( I never get that in my life anymore)
@connorwong93
@connorwong93 3 жыл бұрын
if these aren't my react interview question tomorrow I'm coming for you.
@MyStockz
@MyStockz 3 жыл бұрын
How was it?
React Junior Developer Interview (Questions & Challenge)
1:06:19
Cosden Solutions
Рет қаралды 137 М.
Players vs Pitch 🤯
00:26
LE FOOT EN VIDÉO
Рет қаралды 130 МЛН
World’s strongest WOMAN vs regular GIRLS
00:56
A4
Рет қаралды 47 МЛН
How to Roll Your Own Auth
13:05
Ben Awad
Рет қаралды 120 М.
React Coding Interview Ft. Clément Mihailescu
47:08
Conner Ardman
Рет қаралды 135 М.
Software Engineering Job Interview - Full Mock Interview
1:14:29
freeCodeCamp.org
Рет қаралды 1,5 МЛН
HackSussex Coders' Cup 2024
2:37:14
HackSussex
Рет қаралды 911 М.
React Hooks Course - All React Hooks Explained
1:26:21
PedroTech
Рет қаралды 1,1 МЛН
Google Coding Interview With A High School Student
57:24
Clément Mihailescu
Рет қаралды 4,2 МЛН
Roasting Your Dev Portfolio Sites | Livestream highlight
19:24
Anthony Sistilli
Рет қаралды 103 М.
Coding Interview with Dan Abramov
58:20
Ben Awad
Рет қаралды 645 М.
Medium Google Coding Interview With Ben Awad
51:27
Clément Mihailescu
Рет қаралды 1,3 МЛН
Players vs Pitch 🤯
00:26
LE FOOT EN VIDÉO
Рет қаралды 130 МЛН