Technical Questions and Answers React Fundamentals: State vs. Context: Explained the difference between state and context in React. State Updates: Discussed how to trigger state changes in parent components from child components. Redux: Shared thoughts on Redux and its boilerplate nature. Component Passing: Explained how to pass components as props to other components. Coding Exercise: Longest Substring.
As a person who preparing for frontend interviews, it really helped. Many people talk about the question because the question may seem like focused on algorithm. I don't know if this is the best interview for the md-level "react" interview though, the point is that. This video is really helpful for me. I really appreciate it you made this video and uploaded it on youtube. Thank you very much! I'm looking forward to further mock interview videos!
I think a good way to practice would be to copy a hackerrank problems into a react app, display the result(s) in a component, then make an input for the user to see different results from whatever the hackerrank question is asking to do. That seems to be the theme for many of the early-mid level questions. Cody kept saying something along the lines of "Theres probably a better way to do this" and I think that's ok to say, but if you say it too frequently, it makes you seem less confident or qualified. You might want to reword it in a more 'impressive' way by saying something like "I would probably review the documentation to make sure this is the best way to do this...".
I remember watching this video when it was released and I didn't understand anything at all. Now, I solved it without watching the video and I feel really happy! 😂
Thanks! Any feedback from you is much appreciated! function getLongestNonRepeatingSubstring(str) { let currentSubstring = ""; let longestSubstring = ""; for (let char of str) { if (currentSubstring.includes(char)) { currentSubstring = ""; } currentSubstring += char; if (longestSubstring.length < currentSubstring.length) { longestSubstring = currentSubstring; } } return longestSubstring; }
ahh.. btw the solution that they agreed on is not correct, consider "ABCDAFG", their code will output "ABCD" but the correct answer is "BCDAFG". also this is an easy two-pointers problem.
I would just add (based on my interview experience) that perhaps stating that you have never touched something or don't know it (in the redux/jotai question) does not really add anything to conversation other then name drop. If you don't have any knowledge to share, a simple don't know about it would suffice.
I was wondering about your question smth llike what we get if we pass the component to another component. so, can be the answer that we will get a HOC(high order component) which get and return a component. if we use TS, so we can describe it like React.NodeChild. i'm a junior, so don't judge me please. but can it be the answer?
My first thought about the first problem is to have a way to know which characters has already been iterated to. Maybe something like a Set or a Map, array could definitely be used but that would be O(n). then whenever the current iterated character is already in the set or map, that means we have to reset the tracker.
I would assume either way the worst case would be O(n) because you still have to iterate through the whole string character by character to append to your map. The implementation here was O(n+n) or O(2n) which is still equivalent to O(n) as the worst case.
The solution to this is wrong tho. If we had another string for example str = 'ABCDAEFGH' - the longest string here is 'BCDAEFGH'. The solution cody provided wouldn't work , so you need to check with either the substring method or charAt because you need to see if one of the characters is repeated.
Now seriously though, is this interview even junior level. I mean I figured in the first 10s that you should create an array to add chunks then sort it by length. And despite this, when I apply for a position, I dont even get an interview call, not even for an unpaid internship position. It makes me feel bad since I self-studied React 2 Yrs. My portoflio is still in building phase, but the ideas I try to execute require extensive development (Job Platform, Company Portal, ECommerce Everything) Should I copy porfolio projects and then rewrite them as my own (while still working on my own projects) , just to get to the interview ?
i won't lie, i did not expect the materials for mid-level position interview would be like this; i understand and can kind of solve the problem by myself which was surprising i always thought that i am more of a junior position guy despite having more than 1.5 yoe because i am never get confident enough of my skills.. but then maybe that's why i am still not good enough for a mid-senior level because i'm still not confident? no telling honestly lol
It's what happens to most self thought programmers, because we don't have grades given by teachers and often no one to compare too we think we are still not good. Reality is we very well may be overqualified for junior position but are held back by simple lack of experience and by extention lack of confidence. Then there is whole interview stress thing we're i know fir a fact outspoken confident but weak programmers do better then timid shy but very good programmers it's just how it is, so it's important that interviewer is experienced enough to catch wats going on.
Nice video but I think the candidate overall would have failed in my book. 1. They answered all the React questions in the beginning pretty well. 2. The solution for the coding challenge is pretty much O(n^2) due to the includes nested in the for loop. The solution is not optimal and a pretty messy. 3. The react code was messy. The util method should have been brought in from another file instead of residing in the component. The util function itself should have been "pure" and should not include any React state setter methods. That should be done outside of the util method. Not knocking the interviewee at all though, it's a lot harder under pressure obviously.
Not sure I understand how the algorithm challenge has anything to do with react. Seems 90% of time not about react. And the code challenge was not well explained. Thought any consecutive same chars should have been eliminated in the results, but guess I was wrong.
I really don't like that much this kind of interviews, because in real life you have an entire world to explore different approaches to hit the best solution. It feels more stressful than a real scenario, if you ask me. Good questions though. (As feedback: Next time don't use music, most of us are listening our own music)
Your solution fails on a string 'ABCDAEFGHI'. Your solution answer = 'AEFGHI', correct answer = 'BCDAEFGHI'. Sorry, but dividing by chunks isnt always enough to solve this problem; so your algorithm is wrong from its idea.
Instead of using second loop you could use sort method to sort the array from biggest to lowest(arr.sort((a,b) => a.length < b.length ? 1 : -1)) and then return the first element of the array
That was a fun coding challenge. I liked it and decided to do it myself in 5 minutes or less, without Google or other helping tools. I got something like this: const getLongestWord = (string) => { const wordArray = []; let word = string[0]; for(i = 1; i < string.length; i++) { if(string[i] == string[i-1]) { wordArray.push(word); word = string[i]; } else { word += string[i]; } if(i == string.length - 1) wordArray.push(word); } let longestWord = wordArray[0]; for(word of wordArray) { if(word.length > longestWord.length) longestWord = word; } console.log(longestWord); } getLongestWord('ABCDDDEFGHI');
really loved watching this, i kept pausing after the question to quickly think about what i would say and how I would write the function before Cody answered. My solution was super similar apart from i used **continue ** in my if block in the loop and at the end to find the longest str in the array i did: return strArr.reduce((longest, current) => { return current.length > longest.length ? current : longest; }, ' ');
another way function getIterateData(str, list) { let filterChar = list ?? "ABCDDDEFGHI"; let filterStr = Array.from(filterChar.split(" ")[0]); let pos = filterChar.indexOf(str) + str.length; let strVal = []; let center = Math.floor((filterChar.length - 1) / 2); let uniqueValue; if (pos
this my solution function getNoNRepeatedLongChar(str, list) { let filterChar = list ?? "ABCDDDEFGHI"; let pos = filterChar.indexOf(str) + str.length; let center = Math.floor((filterChar.length - 1) / 2); let uniqueValue; if (pos
const getLongestNonRepeatingSubstring = (s) => { let result = "" for (let i = 0; i < s.length; i++) { let char = s[i]; let newString = s.substring(0, i) if (!newString.includes(char)) { result += char } } return result }
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Technical Questions and Answers
React Fundamentals:
State vs. Context: Explained the difference between state and context in React.
State Updates: Discussed how to trigger state changes in parent components from child components.
Redux: Shared thoughts on Redux and its boilerplate nature.
Component Passing: Explained how to pass components as props to other components.
Coding Exercise:
Longest Substring.
As a person who preparing for frontend interviews, it really helped. Many people talk about the question because the question may seem like focused on algorithm. I don't know if this is the best interview for the md-level "react" interview though, the point is that. This video is really helpful for me. I really appreciate it you made this video and uploaded it on youtube. Thank you very much! I'm looking forward to further mock interview videos!
Glad it was helpful!!
react interview... 2 react questions and then 90% of the video a leet code exercise
Thanks 😊, you save me 40 minutes)
the type of BS they use in react interviews these days, stupidly enough 😂
I think a good way to practice would be to copy a hackerrank problems into a react app, display the result(s) in a component, then make an input for the user to see different results from whatever the hackerrank question is asking to do. That seems to be the theme for many of the early-mid level questions. Cody kept saying something along the lines of "Theres probably a better way to do this" and I think that's ok to say, but if you say it too frequently, it makes you seem less confident or qualified. You might want to reword it in a more 'impressive' way by saying something like "I would probably review the documentation to make sure this is the best way to do this...".
- He did not crush it, he would have been rejected.
- This is not a mid level interview, more like an entry level one.
Great feedback!
i had the same feeling, he didn't answer the basic technical questions at the start. Feels more like junior level
Pretty easy to do it faster than n^2 at home, but I would probably freeze up in an interview lol. I could feel that guys anxiety haha
Oh just saw the end that it's 2n not n^2 TIL
same, i had an optimal solution in my head immediately but in an interview setting i'm pretty sure i'd forget what javascript even was
its n^2, subStr.includes(currentChar) is kinda innocent but it's O(n), better to use set/hash map here
@@wlgs my solution is just loop through the string once and keep track of the longest string and current string so it still be O(n)
I like the concept of structuring the interview , very scientific.
The use of Array.includes method will affect the time complexity that will be O(n^2), nested loop so to speak.
Fine Cody the pressure is extremely high these moments.
Interviewer nice approach.
I remember watching this video when it was released and I didn't understand anything at all. Now, I solved it without watching the video and I feel really happy! 😂
Awesome! 👏🏻👏🏻👏🏻
Thanks!
Any feedback from you is much appreciated!
function getLongestNonRepeatingSubstring(str) {
let currentSubstring = "";
let longestSubstring = "";
for (let char of str) {
if (currentSubstring.includes(char)) {
currentSubstring = "";
}
currentSubstring += char;
if (longestSubstring.length < currentSubstring.length) {
longestSubstring = currentSubstring;
}
}
return longestSubstring;
}
Would this not be a junior/entry interview...? I am on that level, and I feel like I could've done exactly the same
ahh.. btw the solution that they agreed on is not correct, consider "ABCDAFG", their code will output "ABCD" but the correct answer is "BCDAFG".
also this is an easy two-pointers problem.
Coz the loop starts from first character and only went one time.
I would just add (based on my interview experience) that perhaps stating that you have never touched something or don't know it (in the redux/jotai question) does not really add anything to conversation other then name drop. If you don't have any knowledge to share, a simple don't know about it would suffice.
In that getTheLargestSubString problem, u can probably use 'continue' to just skip that repeating char that u don't want in ur array
I was wondering about your question smth llike what we get if we pass the component to another component. so, can be the answer that we will get a HOC(high order component) which get and return a component. if we use TS, so we can describe it like React.NodeChild. i'm a junior, so don't judge me please. but can it be the answer?
My first thought about the first problem is to have a way to know which characters has already been iterated to. Maybe something like a Set or a Map, array could definitely be used but that would be O(n). then whenever the current iterated character is already in the set or map, that means we have to reset the tracker.
yeah, Set would be a better choice performance wise
the trick is sliding window
I would assume either way the worst case would be O(n) because you still have to iterate through the whole string character by character to append to your map. The implementation here was O(n+n) or O(2n) which is still equivalent to O(n) as the worst case.
Do more Interviews like this one. Really helpful video. Keep it
Man, I'm struggling to get entry/junior level job and could answer those questions anytime.
guys take it easy, as he said it is a MOCK interview haha
The solution to this is wrong tho.
If we had another string for example
str = 'ABCDAEFGH' - the longest string here is 'BCDAEFGH'.
The solution cody provided wouldn't work , so you need to check with either the substring method or charAt because you need to see if one of the characters is repeated.
Great catch!
so lost as to how the function knows what the new maxLength is????
Have you a version without background music?
as a self taugh i feel that its hard to organize what you need to know to get a job
For sure!
Now seriously though, is this interview even junior level.
I mean I figured in the first 10s that you should create an array to add chunks then sort it by length.
And despite this, when I apply for a position, I dont even get an interview call, not even for an unpaid internship position.
It makes me feel bad since I self-studied React 2 Yrs.
My portoflio is still in building phase, but the ideas I try to execute require extensive development (Job Platform, Company Portal, ECommerce Everything)
Should I copy porfolio projects and then rewrite them as my own (while still working on my own projects) , just to get to the interview ?
Let’s chat! discord.gg/4hmnhYpfDg
i won't lie, i did not expect the materials for mid-level position interview would be like this; i understand and can kind of solve the problem by myself which was surprising
i always thought that i am more of a junior position guy despite having more than 1.5 yoe because i am never get confident enough of my skills.. but then maybe that's why i am still not good enough for a mid-senior level because i'm still not confident?
no telling honestly lol
Same. I'm never get confident enough of my skills too.
It's what happens to most self thought programmers, because we don't have grades given by teachers and often no one to compare too we think we are still not good. Reality is we very well may be overqualified for junior position but are held back by simple lack of experience and by extention lack of confidence. Then there is whole interview stress thing we're i know fir a fact outspoken confident but weak programmers do better then timid shy but very good programmers it's just how it is, so it's important that interviewer is experienced enough to catch wats going on.
in reality we would use chatGPT for that function and then just build the component.
nah
yea with a crap load of errors
me personally would not even call him a junior at this point, but pretty good interview, questions at the start were more like an internship level max
Nice video but I think the candidate overall would have failed in my book.
1. They answered all the React questions in the beginning pretty well.
2. The solution for the coding challenge is pretty much O(n^2) due to the includes nested in the for loop. The solution is not optimal and a pretty messy.
3. The react code was messy. The util method should have been brought in from another file instead of residing in the component. The util function itself should have been "pure" and should not include any React state setter methods. That should be done outside of the util method.
Not knocking the interviewee at all though, it's a lot harder under pressure obviously.
He did not complete the exercise. maxLength=currentVal
The music is a little bit distracting and making hard to understand sometimes. :( Othewise awesome job!
thanks i really need this
Not sure I understand how the algorithm challenge has anything to do with react. Seems 90% of time not about react. And the code challenge was not well explained. Thought any consecutive same chars should have been eliminated in the results, but guess I was wrong.
the background music ruins everything smh.
The interviewer looks like Doctor who
Which one 🤔😅
Great video, is there anyway to try this with you?
Yeah! Just reach out on our Discord. Always looking for new people! 👍🏻
discord.gg/rFP29feQ
Nice one! hope my interviewer was this kind 😂
Well was he?
I really don't like that much this kind of interviews, because in real life you have an entire world to explore different approaches to hit the best solution. It feels more stressful than a real scenario, if you ask me. Good questions though. (As feedback: Next time don't use music, most of us are listening our own music)
3:56 no, correct answer is callbacks
Which question?
Prop drilling state setter does not fit to react flow of data, and it can cause bugs
Your solution fails on a string 'ABCDAEFGHI'. Your solution answer = 'AEFGHI', correct answer = 'BCDAEFGHI'. Sorry, but dividing by chunks isnt always enough to solve this problem; so your algorithm is wrong from its idea.
Instead of using second loop you could use sort method to sort the array from biggest to lowest(arr.sort((a,b) => a.length < b.length ? 1 : -1)) and then return the first element of the array
Sort? Second loop its better bc time complexty Mr russain
Why need to sort the elements when you can just take their length and compare that. Its faster that way!
wow you went O(n) to On(logn) complexity and think its better
1. State and Context
chale i no reach!
Often, one's posture when sitting can reveal their level of expertise or competence.
also the real complexity is more than n^2, you should consider the usage of string "+=" operator is O(N) itself
"Mid-level" is kind of meaningless in this exact interview.
great content but the music is not helpful
Terrible React interview. It was an algorithms interview, which he will never need to use.
No joke, the real life correct answer is "dude, Gary, this API is whack, why are you giving me a bunch of bullshit instead of the thing I need?"
At least it's close to a real interview. Everyone asks questions about data structure
having a b2 level of english, will be deat on the tree first minute 🤮
Cool video, but so difficult for me to listen to people say "uh" or "um" every other word. haha
bthw in Russia this is definitely not a mid-level it’s more like junior or even intern level of knowledge
bruhh
yeah new born baby level, rotting in trench soldier level, what else?
In Soviet Ruzzia, code write you!
bullshit interview
Probably smth like that
// 'ABCDDDHIGKL'
function longestUniqueSeq(str: string) {
let maxStr = "";
let bestMaxStr = "";
for (const ch of str) {
if (maxStr.includes(ch)) {
bestMaxStr = withMaxLength(bestMaxStr, maxStr);
maxStr = ch;
continue;
}
maxStr += ch;
}
return withMaxLength(bestMaxStr, maxStr);
}
function withMaxLength(str1: string, str2: string) {
return str1.length > str2.length ? str1 : str2;
}
How is my clever (I guess) solution?
#!/bin/env node
let longestChunckIndexPair = [0, 0];
let firstIndex = [];
const setIfLongest = (lastIndex)=>{
if((lastIndex - firstIndex) > (longestChunckIndexPair[1] - longestChunckIndexPair[0])){
longestChunckIndexPair = [firstIndex, lastIndex];
}
}
const func = (inputStr)=>{
// O(n-1)
for(let i=0; i
Awesome!! 👏🏻
That was a fun coding challenge. I liked it and decided to do it myself in 5 minutes or less, without Google or other helping tools. I got something like this:
const getLongestWord = (string) => {
const wordArray = [];
let word = string[0];
for(i = 1; i < string.length; i++) {
if(string[i] == string[i-1]) {
wordArray.push(word);
word = string[i];
} else {
word += string[i];
}
if(i == string.length - 1) wordArray.push(word);
}
let longestWord = wordArray[0];
for(word of wordArray) {
if(word.length > longestWord.length) longestWord = word;
}
console.log(longestWord);
}
getLongestWord('ABCDDDEFGHI');
interesting interview!
I have a short solution to the algorithm question
```js
const longestNonRepeatingSequence = (str) =>
str
.match(/.*?(.)(?=\1|$)/g)
.reduce((acc, item) => (item.length > acc.length ? item : acc), "");
```
damn . that was awesome
really loved watching this, i kept pausing after the question to quickly think about what i would say and how I would write the function before Cody answered. My solution was super similar apart from i used **continue ** in my if block in the loop and at the end to find the longest str in the array i did: return strArr.reduce((longest, current) => {
return current.length > longest.length ? current : longest;
}, ' ');
FWIW: Big O on this solution 100% O(n^2) because of the `.includes`.
const getStr = (s) => {
let startSlice = 0;
let longestUniqString = " ";
const compareAndSetString = (endSlice) => {
const newSting = s.slice(startSlice, endSlice);
if (longestUniqString?.length < newSting.length) {
longestUniqString = newSting;
}
};
for (let i = 0; i < s.length; i++) {
const currentLetter = s[i];
const nextIndex = i + 1;
const nextLetter = s[nextIndex];
if (currentLetter === nextLetter) {
compareAndSetString(nextIndex);
startSlice = nextIndex;
}
compareAndSetString(nextIndex);
}
return longestUniqString;
}
another way
function getIterateData(str, list) {
let filterChar = list ?? "ABCDDDEFGHI";
let filterStr = Array.from(filterChar.split(" ")[0]);
let pos = filterChar.indexOf(str) + str.length;
let strVal = [];
let center = Math.floor((filterChar.length - 1) / 2);
let uniqueValue;
if (pos
My preety solution with reducer. .... Changing the condition to "actualChar === result[0][0]" gives you the second version.
const longestUniqueSequention = (str) => {
return [...str]
.reduce((result, actualChar) => {
actualChar a.length < b.length)
.at(0)
.reverse()
.join('');
}
console.log(longestUniqueSequention('ABCDDDDEFGHI')); //
Awesome!! 👏🏻
const getLongest = (str) => {
var currStr = "";
var tempStr = "";
for(let i = 0; i < str.length; i++){
if( str[i + 1] && (str[i] != str[i + 1])){
tempStr += str[i];
}else{
if(tempStr.length + 1 > currStr.length){
currStr = tempStr + str[i];
tempStr = "";
}
}
}
return currStr;
}
this my solution
function getNoNRepeatedLongChar(str, list) {
let filterChar = list ?? "ABCDDDEFGHI";
let pos = filterChar.indexOf(str) + str.length;
let center = Math.floor((filterChar.length - 1) / 2);
let uniqueValue;
if (pos
let LongestSubString = str.replace(/(\w)\1+/gi,' ').split(' ').sort((a,b)=>b.length - a.length)[0];
let misingLetter = String.fromCharCode(LongestSubString[0].charCodeAt(0) - 1);
console.log(misingLetter+LongestSubString)
const getLongestNonRepeatingSubstring = (s) => {
let result = ""
for (let i = 0; i < s.length; i++) {
let char = s[i];
let newString = s.substring(0, i)
if (!newString.includes(char)) {
result += char
}
}
return result
}