Dan Abramov SLAYS Frontend Interview w/ Ex-Twitch Engineer

Hope you React fans are excited for this one!
We were so lucky to have Dan Abramov on for a stop during his mock interview loop :) If you don't already follow him, fix that! He's been streaming on KZbin more so be sure to sub there!!
Dan's Twitter - / dan_abramov
Dan's KZbin - / danabramov8
If you like this and are interested in more web dev, React, javascript, typescript, next.js, full stack or other engineering topics, subscribe and follow me on Twitter and Twitch 🙏
/ t3dotgg
/ theo
--
Interview Guide (Sent to Dan ahead of interview) - www.notion.so/t3-tools/Techni...
Show proudly powered by Round (I built this) - round.t3.gg
--
Show notes
00:00 - Intro
00:49 - Interview Begins
02:57 - Theo Rants About Interview Philosophy
05:20 - First Question (non-technical)
17:50 - Code Problem Intro + Clarification
21:50 - Part 1: Coding Chat UI + State
29:40 - Part 2: Colorblind Mode (Deeper State Management)
34:30 - Part 3: Auto-scroll
41:55 - Part 4: Send Message (Backend Borked 😅)
57:00 - Part 5: Emoji auto-replacement (CodeSandbox Borked 😅)
1:13:35 - Wrapup
#react #javascript #fullstack #webdev #interviews

[@temoncher]

"I feel like I cheated because I wrote the react docs on a similar topic" (c) Dan Abramov

[@ThugLifeModafocah]

That's so awesome. When a guy like Dan Abramov say he never touched a socket or made a chat, man, that's unbelievable. Nowadays companies and recruiters think that just because you are an experienced dev, you know and should know everything about everything. This is so frustrating.

[@RamiGB]

What you said is 100% true unfortunately in so many companies. On the other hand, my self included, when I interview a junior developer I don't expect them to know much and I made them aware that it's totally fine not to know something as long as you are willing to learn it.

[@frogery]

interviews are basically RNG. they either ask you stuff you know or they don't...

[@antr5459]

Dan is so humble, that really contributes to his brilliance. Also from experience I can say that developers who often doubt their solutions are often the best developers. I have seen so many engineers that hardly ever question their initial solution which is mind boggling.

[@ionitaa]

Humble? Mate!... Go read his responses on github PRs for legitimate concerns about code he wrote...

[@bribes_for_nouns]

yeah the way he composed useEffect is extremely humble

[@tobiahrex]

The lack of doubt is the lack of awareness about edge cases. He even explained how he used to test a small set of test cases, but then he gradually learned to adopt a much wider breadth of awareness and due to that, became more unconfident that he had a silver bullet solution. I think people who are hyper-aware in a large-breadth context, are always going to naturally be less confident they have the “ultimate” solution.

[@alviahmed7388]

what do you mean?@@ionitaa

[@pedrogabriel-ly8mm]

Really good content, that flushSync function in setState it was like pulling a rabbit out of a hat. Thanks for sharing!

[@Tranquility_00]

LOL

[@nateo7045]

or like pulling a rabbit out of a whole haha

[@ni5hu]

exactly

[@king-manu2758]

I had never seen that before.

[@JC-fd8ho]

Never seen it before tbh

[@audiodrocher]

Soooo. I’m not the only one telling to myself “this should be working” couple dozen times a day when it should really not. Feeling so relieved, thanks ☺️

[@MrLT-vf3wr]

When I'm at that point, I know I'm on the right track :)

[@Mozartanna1992]

I went to school with Dan :) so happy he turned out so successful! :)

[@sveng08]

i really love dans thought process regarding programming in general! really interesting video, thanks theo!

[@tatendachawanzwa8439]

The perfect interview doesn't exi.... (you code entire coding test flawlessly and interviewers code is the one that breaks, interview perfection 👌🏾)

[@lydiahendriks2751]

Wowww. This was great and oh so informative. Thank you both so much for doing this (and your comment at the end caught me off guard haha - TY for all the time you spent video editing!)

[@darrenvong9404]

This was so wonderful to watch - I love how collaborative the whole thing felt compared to a lot of interviews I've done. Definitely something to take notes from and a sign of how broken the technical interview process in our industry is at the moment! P.S. Didn't know about the flushSync API until I watched this video! Not sure that's a well-known API unless you are a library author 🤔

[@omrishooshan9784]

Its in the docs tho..

[@thegreatbambino3358]

I could be wrong, but isn't flushSync only necessary when you have batching? If you're not batching DOM updates (which I thought was like a react 17 or 18 thing), then this doesn't do anything for you. Could be completely wrong on this one.

[@usmanabdurehman97]

@@AlisonJonck yeah. The docs say we shouldnt. However for some reason he didnt want to run the useEffect everytime the messages state changed. Idk why. I would do it by placing messages inside useEffect

[@shiyunze7157]

Great stuff, Theo and Dan are without doubt exellent problem solvers, but I think the key takeaway is that event if we are not sure about stuff, knowing what to ask and how to search for answers is also key to succeed in interviews. I was in an interview with similar setup last week, wasn't able to solve some questions right away but by trying to break down the problem and identifying key steps, the 2 interveiwers were happy to help as I made baby step progress.

[@lakhanrochwani9426]

Loved it. Really informative, I have been doing interviews for a quite a while know in all FAANG and Non-FAANG companies, and I really want to see to adapt this kind of interviews for atleast front end developers, to better showcase their skillset. Thanks @THEO 👌🏻👌

[@itaileshem]

Great video, I personally like solving these types of problems myself while listening. Would be very cool if you shared the setup for the backend.

[@emmanuelotobo7944]

Really nice and insightful content. The interview gave me a clear picture of how I can improve my chances in future pair programming interviews.

[@cryptoaddict6715]

As I start navigating these crazy interviews, this style would make me feel like my understanding of the code base can actually shine. Thank you for this.

[@userrrfriendly1908]

That was awesome. Both the way the interview was conducted, and the way Dan tackled each problem.

[@jacksonsingleton]

Absolutely love Dan, began following him a few years ago after an interview about him creating Redux

[@kiranearle5665]

Theo seems like a good leader in the tech space. He looks to treat the dev as an individual and not just a number. I like this approach.

[@Coyannn]

This was very interesting to watch! I didn't know about flushSync.

[@fantom_0560]

same, makes me wonder how much I don't know and how much of the issues I face already have a solution

[@rjmunt]

Nice interview. Ive done a lot and conducted a lot of them and I particularly like the chill atmosphere and friendly assistance. The process works both ways, for the interviewer to assess the candidate and for the candidate to assess their possible colleagues. If I had been the candidate I'd have been excited at the prospect of working at the company.

[@KingstonFortune]

Can't believe I stayed till the end of the video...great content, and I love Dan's smile 😂😂

[@mohitpopli8368]

Awesome interview.. Well I was unaware of that flushSync method. Got to learn about that!!

[@elenatroyanskaya6838]

Thanks for the interview with Dan. I enjoyed watching it

[@ericpezzulo7493]

I found you from the HTML All The Things podcast. Excited to see what you put out on this channel man!

[@nacimhoc]

Geat content! that gives "Juniors" more confidence and trust in their skills and abilities when you listen to Dan Abramov in person saying things like "I never implemented a chat ... I never used a socket library..."

[@heroe1486]

He has a blogpost on what he doesn't know.This guy is just incredibly good at what he's doing and I bet he could learn fundamentals of other things than fe really quiclkly, hd just doesn't need them at the moment. If he showcased his real skills it would make most people insecure tbh.

[@luillyfe]

That was awesome, I really love seeing you guys coding along!

[@boopfer387]

Thanks Theo - Dan is so relaxed wonderful to hear his thought process

[@kirillpavlovskii8342]

Great video , it’s always pleasure to watch Dan coding and talking about different coding stuff

[@llDartsll]

I love this so much to be honest, I recently did an coding challenge for a front end position that had me question if i should continue being a developer. this restored my faith in my knowledge. thank you so much!

[@trun222]

It is really encouraging that there is even stuff that Dan has never done like Websockets and making a chat app. That was really surprising.

[@okbel4130]

Lovely conversation. Thank you both 🙏

[@dalanxd]

Really good content, thank you both. It was a pleasure to stay until the end hahaha

[@universecode1101]

I've seen it and now that I see it again, I think this interview has the potential to become powerful over time. Theo grows up with his channel, Dan Abramov is increasingly present on the internet, and the interview is useful 😊

[@t3dotgg]

This made me smile a lot. Thank you for being here since day 1. Has made this all worth it ❤️❤️

[@universecode1101]

@@t3dotgg Glad you noticed, my presence from day one. It makes me feel part of the process, of your evolution as a KZbinr, the results are clear and deserved, as a Developer, you were already great 😜 Keep it up Theo

[@omrishooshan9784]

Dan is such a humble guy! Im impressed

[@greatnile]

I reached the end of the video. I usually run most of my videos with 2x speed but this one I watched in a normal speed and still didn't get bored at all. I admire the smoothness and the calmness of the interviewer. and I also admire Dan's humbleness! one side note though, I expected more of process and team standardization and code review questions (like how the interviewee would conduct a code review, what kind of issues/problem he spots in others' code and is the interviewee if able to distinguish between actual issues and his personal preferences..and so on)

[@memorycard6568]

The time passed by really fast, didn't notice at all that the length of the video, really good stuff.

[@king-manu2758]

I recall seeing a mock interview with Dan and he was given some leet code type challenges and it didn't look like he was enjoying that. However here he looked like he was right in his element.

[@borisillic]

That was great! I love seeing a common understanding of the issues and the ability to 'follow the thread of the conversation' so well. Any time you pointed something out or changed something Dan acknowledged it and understood what was going on without it being a derailment to the interview. It is refreshing :D I haven't investigated properly but I was also a bit confused by the `if (i > 0)` piece of code for replacing the LULs. The solution in general is incorrect right? There needs to be some state which tracks where the LULs are which was missing. Great interview regardless. Was this a mid / senior engineer question?

[@sagarkhasnis5991]

Only if all tech interviews were like this, good stuff!

[@jasonwhisnant5457]

I made it all the way through. Good content! Now if I can only find a hiring manager that does what you do for interviews!

[@JordanDPiano]

I learned so much from watching this. Thanks for sharing :)

[@taklamak]

Best Dan interview yet!

[@jyotirmayasahu2099]

This was super refreshing. The last image replacing part was really exciting

[@sinzies]

I am amazed at how good this interview was, no gotchas with obscure JS/TS knowlede. Just go to a problem and solve it collaboration style. I think that this may be one of the best ways to see if a candidate fits into your culture. This would require a fairly competent coder interviewing with experience managing juniors, but if you dont have someone who can humbly do this you're doing it wrong. I remember my initial coding interview for my current company 7 years ago, and though it was different in form, it remained similar with regards to the approach of the interviewer talking with a new person they meet the first time online. As I already had some experience with different types of colleagues good and bad I knew immediately I'd love to work within this company. The way you gave a candidate the option to choose how to conduct the interview is also a fascinatingly simple way to get a person comfortable and bring out the best they can show you. Great point on the distinction between senior and junior about knowing when to step in/step back with regards to an issue. This video is just gold all the way!

[@Melanker]

Learnt a lot from this interview, thanks. Though I wonder if the easier/friendly way to scroll was to use useLayoutEffect instead of flushSync

[@ee_color]

I think your intuition is spot on that manipulating something in the browser should be done at the end of the frame (just before rendering). That would make sure that any other animations will be fluent. useLayoutEffect is similar to requestAnimationFrame in that sense. A basic principle is to write to the DOM in an animation frame and read the DOM outside of it. Using useLayoutEffect however complicates things because it will react to some state. In essence by the time you arrive at the effect you lost the knowledge of the event. This would complicate your code easily in real scenario's because it's tough to communicate signals or events through state. As far as I can tell the proper way to do it with flushSync is to wrap the code that scrolls in a requestAnimationFrame. If you want to do it without flushSync you would need a ref containing an array of pending effects and a useLayoutEffect that runs on each render to execute all pending effects. This however might be problematic because there is (I think) no guarantee that the state has already been updated on the next render. So instead of a ref with an array you would need a ref with a map where they key is the state and the value the effect. The problem with that approach is that you might miss effects because the state has been updated multiple times before a single render.

[@khaledmaruf5813]

can the hanging be because of the `results.push()` being interpreted by the JSX compiler something like we do in `return ()` or alike? as both the syntaxes are wrapped inside parenthesis?

[@DanKaschel]

Probably not. But remember, jsx components are functions. So that means "result" is an array of strings and functions. Assume react knows what to do with that, it should fit just fine into the return value (which is also a function).

[@falxie_]

With the emoji problem is there any particular reason not to split by spaces and replace matches with their corresponding elements?

[@barunacharya5272]

Reached the end :P Really nice interview process 🙌 Would love to know if you dove deeper into the CodeSandBox problem and what was the cause 😁

[@DanKaschel]

I'm not totally convinced that was the problem. To me it seemed like there was an unstable render loop causing that function to run as fast as the CPU would let it. I'd be interested in knowing what it really was.

[@SyedThowfeeq]

such a nice video. I was curious to see how react engineers use react stuff and how they think of solving some common problem, we face every day . Thank you for such content. p.s I got to the end.

[@Snowboardbound]

Unreal quality content!

[@Anthony-wg7fn]

This was great to watch. Does anyone know of any places to practice React specific coding challenges like this?

[@MarcelRobitaille]

For the scrolling, would a flexbox column-reverse solution be accepted?

[@saralance506]

Can we get the sandbox link to explore more the code? Thanks

[@saralance506]

Can somebody explain what he did with socket and the reference? Is that a normal way to have the socket reference? Couldn't we initialize socket outside the useEffect?

[@dennyh66]

Socket is going to be re-initialized every time the component re-renders if it’s initialized outside of useEffect in the component. You can’t put the initialization outside of the component either because if you have two of the chat components on the single page they will share the same socket instance. useRef is the way to go in this situation.

[@pulserudeus7968]

love your twitch mug Theo

[@shivamjhaa]

Got to the end of video. Good that it was not in a "leet-code" fashioned thing, but actual real world problem solving!

[@zakr2]

Дэн держался молодцом, показал свои компетенции и достойно выдержал все испытания. Было очень приятно смотреть, особенно порадовало то, что задачи были относительно простые и приближены к реальности. Хозяин канала устроил очень интересное шоу, даже backend сломал в прямом эфире, круто! В том смысле, что в программировании почти всегда что-то идет не по плану и должен быть план Б.

[@NicolasJoye]

So inspired!!!!! Thank you Dan!!!

[@markemerson98]

great collaboration - bravo

[@frenziecooper]

If only interviews could be like this

[@philippd8844]

Very interesting, really really enjoyed this content! :)

[@faustaleonardo]

Thanks for sharing. Nice content :)

[@bigmistake5565]

Hey so fun! I have seen u on the solid discord, didn't know u had a yt channel! Instant sub!

[@vaylx2253]

Very cool! Pro-tip, if you’re going to be looking camera left, perhaps have the guest on the left side as well. It makes more sense :) cheers!

[@victoryasokomeh]

awesome interview

[@Chrosam]

This is enjoyable to watch

[@tripstergaming8435]

Well I don't have anything to say.. I made it till the end of the interview and this made me comfortable that I can also do it.. AND I WILL... Thanks a lot man

[@kalahari8295]

Literally didn't know who Theo and Dan were the first time I watched this 😪❤️

[@dtown1234]

I fully expected him to shoehorn Redux into this solution - which I have actually done with sockets and it sucked. Pretty telling - Redux is almost always overkill these days. I also love this interview process - it reminds me of trying out a musician for your band. Gives you a good preview of the development process of the candidate and how they would work with you or your team. Great video!

[@buddy.abc123]

This was a great interview

[@nutrio7833]

Awesome stuff!

[@naz3eh]

I have started my job hunt and I watched this video until the end and if this would be the interview process I am pretty confident about myself. but the things with which I mostly suffer with are anxiety, nervousness and pressure of creating an impression.

[@EuropeanLord]

How am I supposed to watch it as Dan is writing code that is below your avatars? :(

[@ashuvssut]

Mann I really wish my Interviewers to be just be as suppostive as Theo🥺🥺

[@michaeljmeyer3]

Dan is great. I do want to say that I found that fixing a decent sized bug, or really, just talking around the code has been more effective to me. If a developer can talk to it, and cannot fix or develop on a feature, that is often an issue with the developer ecosystem and one worth knowing. Tests or watch-em-work, tends to be distracting. And at principal or better, we should be having larger conversations than 'find the squeaky mouse'. Just food for thought, I found my own pivot away from this approach very helpful. As an alternative, I will just invite a candidate to work on a ticket with me and chat while we go or talk to their own code. Reverse interviews are great! Circling back to my point about if a good developer cant develop in your ecosystem, this is why I encourage developers to keep moving forward. Fired, laid off, quit due to stress or whatever - that next position is often better. The grass often is greener when you are standing in a toxic dump. Especially with the markets doing what they have, just keep moving forward. Code is the easier part of what we do. It is important, but ironically, we often over focus on it. Find the fit.

[@Michael-ls7lu]

18:25 is when things actually start

[@anhvt]

Dan's keyboard is THOCC

[@adrian_franczak]

Yeah I wish my interviews looked like this but I think when I will have chance to Interview somebody I’ll use similar approach

[@atk65223]

What is the point to store socker in a ref and other "state" with the "useState"? Is there is some kind of convention?

[@fullstack_journey]

the socket object itself will never change, it's only used as a reference to a socket connection from which you'll receive events and can send data from it, so having it as a "state" doesn't make sense, it will never change in itself but only acts as a reference from which u can do stuff

[@atk65223]

@@fullstack_journey Thanks for the answer. But this is just a semantic difference? There is no any tiny performance optimisation or something like that?

[@sasivarnan36]

​@@atk65223 Setting it on useState triggers a re-render which is useless in this case as the re-render didn't update anything in the DOM.

[@mreyybree]

This is great!

[@KarlOlofsson]

What level position would this type of interview be for?

[@nightcoder5k]

1:13:15 I was thinking `replaceAll()` would probably be better than split(). Also, result.push() needs quotes around the

[@Grim_tidings]

IIRC, while the '.replaceAll()' function is more performant than the '.split()' method, it limits what you're replacing the other strings. That's fine if you're just displaying unicode emojis, but in this case he wanted to render an tag as a child. The JSX compiles down to Javascript, not HTML so if he were to wrap the tag in quotes, it would simple treat them as text (IE "omg !!") instead of rendering the image itself. By doing it with the .split method he can essentially create an array of type "(string | JSX.Element)[]" and set the entire array as the children of the component. It's a pretty useful and popular method for preformatting text components in React. There's a popular utility called react-string-replace that works this way as well.

[@mhoegh]

To me it seemed like a missed opportunity to to use .map()

[@marklim3699]

In addition to what Daniel X has said, replaceAll(" LUL ", ) doesn't work because of cases like "random text LUL LUL random text", and replaceAll("LUL", ) similarly doesn't work because of cases like ("random textLUL"), noting that Dan's approach wouldn't have worked for the same reason I mentioned. Something which would have worked would be something like str.split(" ").map((v) => (v === "LUL" ? : v) + " ")

[@kahnfatman]

Dan has a gentle spirit.

[@jimgitonga2180]

Great stuff .cool

[@ni5hu]

Beautiful

[@DisfigurmentOfUs]

I think the freezing occurred because of using the index key on the image.

[@VIDEOSELEKTOR]

is Theo actually Adam Scott?

[@PhilipAlexanderHassialis]

I got a good feedback out of it, this is very much the way I conduct technical interviews albeit on a bit lesser scale. Plus when you asked "if you got Dan Abramov to interview" my first reaction would be to get all the Team Leads in the company in the call and just have Dan let it rip while the rest of us would be restraining ourselves from prostrating and yelling "teach us master, we are not worthy!" :P

[@strifeclient]

got to the end!

[@thekwoka4707]

"I need to make sure I don't open that file so nobody sees the url" as he's hovering the variable and it's showing the URL

[@atulsinghrajput9932]

great. , we learned a lot

[@sukritsaha5632]

Loved it❤

[@nevermore7755]

This is good content my CdT friend :)

[@abderahmaneaoufi]

Hello theo today I have interview thank you

[@TheVideogamemaster9]

I hope this will help me get into a frontend engineering position :p

[@mateomalaj3278]

Ok but where do they learn these things, i mean is there any books or what

[@mateomalaj3278]

I mean the hidden, super advanced stuff

[@naveenvenkateshk]

He creates them, Dan is part of the team at Facebook which works on maintaining React. He is also the person who created Redux which is popularly used with React for state management. He just has more knowledge about React than the regular person.

[@fullstack_journey]

If you plan on learning JavaScript then "You don't Know JS" series of books are pretty good

[@eXpertise7]

@@fullstack_journey totally agreed, I'm coming from Angular and when I've seen how Dan explains pure basics and makes you to think I started to watch his videos even in React. :)

[@SandraWantsCoke]

This guy is good I would hire him as a junior. We at the company need a program which would keep the React state in one place and be available in all components without having to prop drill, maybe he could do something like that.

[@Ujwal5555]

Like a state management library?

[@StarCourtesan]

Yeah i watched the whole thing and i felt dan was a very zen person haha. Something i should try myself since im so chaotic all the time

[@lukehatcher98]

Good stuff

[@havokgames8297]

Cool vid. But I did notice that Dan skipped over adding the 'Join' button which was the only requirement given initially. I understand there was lots of interesting stuff to carry on to, but it was almost a symptom that he wanted to jump to assume what would be done next.