I believe the answer about Pure Component is slightly wrong. Pure components as far as I know are still quite often used. In Function Components, for example, you can create a Pure Component by wrapping it into a React.memo function. In React, again, as far as I know, everything below the component that changed is re-rendered. If the child component is a Pure component, the re-rendering propagation ands in this component IF the props passed to it has not changed.
Hey @rjborba, referencing the React Documentation: "Unlike PureComponent, memo does not compare the new and the old state. In function components, calling the set function with the same state already prevents re-renders by default, even without memo." React.memo and PureComponents are two very different things and in functional components, memoizations happens at many different levels by default so there is no need to use PureComponents. Referencing the docs, functional components are preferred with React.memo rather than PureComponets(class based). You can read more here: react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function
@@therealseniordev I’ve been trying to answer back but by comments keep vanishing. Maybe because I’m sharing an link to a implementation that exemplifies what I’m trying to say. But as it seems to be not possible, I’m going to explain myself here. First of all, I’m a big fan of your work. Thanks for these videos. They’re pretty helpful. About the pure components, it is unrelated to use state change. It is related to prevent the children to be rerendered when the parent is rerendered for changes in states that the children is not dependent of. So, essentially as it is today, pure components are components that has a MEMO call. Documentation is a bit misleading regarding that. They just stop the natural propagation of react rerender
@@rjborba You are conflating something key: a Pure Component is a specific React implementation for class components, which is different than how we talk about things like "pure functional components" today. So it is indeed related to state changes.
This video is awesome! Just a small tip. In the question about the pure components I would suggest to explain also in terms of a pure function. A functional component with state is not a pure component
In my experience I'm totally against asking for acronyms or enumerating many things like (say the patterns you know). It happened to me that many times you know how to use something but maybe you don't remember the name (like IIF). Or you use a pattern and you are unaware of its name (module pattern for example).
I've never heard of anyone using the term "essential state" before In React. I even tried googling "essential state" and found nothing lol. I assume this question is more or less asking about being able to have computed values that rely on other state using something like useMemo or something? It's kind of a weird way to phrase the question. The answer that was given in the video was such a non-answer as well, it was basically "essential state is state that can't go any farther". Like, what does that even mean? It can't go farther? Where is it trying to go? Anyway, if anyone is reading this and wants to know about derived state. I think the answer given is a vague overview, but more specifically it's basically the idea of composing a value based off of existing state. You can just make a normal variable for it honestly, there's no reason why you can't. However, you can also use the useMemo hook if you need to memoize it for performance reasons. In the future with React 19, the new compiler will reduce the need to manually memoize various things like with useMemo or useCallback.
You have a problem with this becaus you are noob and you should learn JS exclusively for a year or two before even thinking about React or Frameworks. "Essential state" wording made perfect sense in the context of the conversation and the explanation, but there is no such thing.
I think it just means state that's the primary state, state that you cannot improve or "process" on the front end in a transformative way, it needs to be present in the state system verbatim. he gave the example of a shopping cart, the individual items names can't be "calculated" so those item cards are using "essential state". the shopping cart subtotal is "derived" from the essential state (a reducer pattern summing up all the cart items to a total). the subtotal isn't "essential" in that sense, you can't infer the items from a different piece of data in the global state. you need the original copy of the data. you CAN infer the subtotal as long as you have the list of items. including the subtotal in the larger global state isn't really necessary (unless you have other reasons to calculate and store this globally, whereas in a typical scenario you'd (probably, this is an example) just calculate it in the cart modal component as it receives the cart items from the server database, renders both the item cards and the subtotal, and passes the value down). it's not something you'd imagine would be repeated often or worth it to have calculated in the backend or wherever else the original cart data found itself born unto the world. it's situational, hence why these terms are "colloquial" and can't be found. If you're building a formal understanding, this guy essentially coined the term. tbf it is kinda a secret, one that he found through his direct experience of this kind of situation. he's a senior after all; few learn state management this intimately essential as in the literal sense, "essence of", not primarily the social sense, "urgent/important/critical". @MrZerosixZerooone hey don't be rude. React's easy to pick up. ending up on videos like this means they're looking for deep knowledge. they clearly are trying to learn. Dan Abramov didn't even learn flexbox for years upon years. you want him to sit in vscode doing hello world and algorithms in JS for two entire years? boring. he's studying web dev, let him learn web dev. he'll get there. give some people some slack, let them walk their path
This was a great video! Love the depth on the answers. This should really help people to get a better sense on what they can expect in the interviews and how to approach answering a question. Would love to see more videos like this one 👏
yes, we had to move into that direction to give more value to the audience, is a mix of both, lecture and interviewing, hope it is helping you folks :)
Why is this common standard? If the candidate have documented experience and education, this should not have to be "tested" again and again. The narrative as a whole is sick, and we need to start trusting people instead. You're hiring a human being, not a machine. I get that you might have questions about skills and competence if the candidate has no experience, and bare minimum education. But to treat everyone like this, is disresepectful towards those who are experienced and educated. I disagree with this entire approach as default.
Do you understand that firing a person due to his low skillset is way harder than hiring? You cannot just trust them because they have some paper proving they're good. You do need to test people in some degree
we don't get to choose how we get interviewed, the only thing we can control is our preparation, is it fair? probably not. But is that world we live in. Win the game first, and change the game later when you get to the top.
@@grenadier4702 Why would you fire the developer for not having a certain skill? That is just wasteful, inefficient. Train the person on the job instead, make sure they get on top of your company tech stack. Teamwork. We are humans, we learn every day.
@@therealseniordev That might be true, but why would you agree to it? I have refused many companies because of their incompetent tests. Yet they continue like retarded zombies and don't listen to candidates....and eventually they are forced to hire consultants at triple rate to fix their shit.
this is a Frontend focused interview, not a JavaScript one, type coercion => TypeScript, Event Loop => JavaScript, Generator Functions => JavaScript, Inheritance => OOP & JS, we are pulling different series, this video is focused on more FE related questions, cheers
FrontEnd is so endless in technologies, names, paradigms, libraries, etc that it is virtually impossible to give one only type of interview. Depending on the role the company looks for they can be interested in architecture, patters, CSS and styles... Hundreds of possible combinations and limited time. One can not be answering, explaining, doing assigments etc forever
This video is awesome! Just a small tip. In the question about the pure components I would suggest to explain also in terms of a pure function. A functional component with state is not a pure component
Find your technical gaps with our Free Technical Assessment: learn.theseniordev.com/technical-assessment 🎯
Best high level touch on FE topics I've seen so far. Well done guys!
Great job many things I learn new here. Thanks
I believe the answer about Pure Component is slightly wrong.
Pure components as far as I know are still quite often used.
In Function Components, for example, you can create a Pure Component by wrapping it into a React.memo function.
In React, again, as far as I know, everything below the component that changed is re-rendered. If the child component is a Pure component, the re-rendering propagation ands in this component IF the props passed to it has not changed.
Hey @rjborba, referencing the React Documentation:
"Unlike PureComponent, memo does not compare the new and the old state. In function components, calling the set function with the same state already prevents re-renders by default, even without memo."
React.memo and PureComponents are two very different things and in functional components, memoizations happens at many different levels by default so there is no need to use PureComponents.
Referencing the docs, functional components are preferred with React.memo rather than PureComponets(class based). You can read more here:
react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function
@@therealseniordev I’ve been trying to answer back but by comments keep vanishing. Maybe because I’m sharing an link to a implementation that exemplifies what I’m trying to say. But as it seems to be not possible, I’m going to explain myself here.
First of all, I’m a big fan of your work. Thanks for these videos. They’re pretty helpful.
About the pure components, it is unrelated to use state change. It is related to prevent the children to be rerendered when the parent is rerendered for changes in states that the children is not dependent of. So, essentially as it is today, pure components are components that has a MEMO call. Documentation is a bit misleading regarding that. They just stop the natural propagation of react rerender
@@rjborba You are conflating something key: a Pure Component is a specific React implementation for class components, which is different than how we talk about things like "pure functional components" today. So it is indeed related to state changes.
This video is awesome! Just a small tip. In the question about the pure components I would suggest to explain also in terms of a pure function. A functional component with state is not a pure component
In my experience I'm totally against asking for acronyms or enumerating many things like (say the patterns you know). It happened to me that many times you know how to use something but maybe you don't remember the name (like IIF). Or you use a pattern and you are unaware of its name (module pattern for example).
webpack is not mandatory, Vite is used a lot now. Else great talk!
you should still know the working mechanics and not use a specific tool as an answer?
Great content, very useful thanks
thank you as well for the kind words, happy to hear it helped :)
Effects run after the re-render but they donot create a new render until element in the dependency array change.
I've never heard of anyone using the term "essential state" before In React. I even tried googling "essential state" and found nothing lol. I assume this question is more or less asking about being able to have computed values that rely on other state using something like useMemo or something? It's kind of a weird way to phrase the question.
The answer that was given in the video was such a non-answer as well, it was basically "essential state is state that can't go any farther". Like, what does that even mean? It can't go farther? Where is it trying to go?
Anyway, if anyone is reading this and wants to know about derived state. I think the answer given is a vague overview, but more specifically it's basically the idea of composing a value based off of existing state. You can just make a normal variable for it honestly, there's no reason why you can't. However, you can also use the useMemo hook if you need to memoize it for performance reasons. In the future with React 19, the new compiler will reduce the need to manually memoize various things like with useMemo or useCallback.
You have a problem with this becaus you are noob and you should learn JS exclusively for a year or two before even thinking about React or Frameworks. "Essential state" wording made perfect sense in the context of the conversation and the explanation, but there is no such thing.
I think it just means state that's the primary state, state that you cannot improve or "process" on the front end in a transformative way, it needs to be present in the state system verbatim. he gave the example of a shopping cart, the individual items names can't be "calculated" so those item cards are using "essential state". the shopping cart subtotal is "derived" from the essential state (a reducer pattern summing up all the cart items to a total). the subtotal isn't "essential" in that sense, you can't infer the items from a different piece of data in the global state. you need the original copy of the data. you CAN infer the subtotal as long as you have the list of items.
including the subtotal in the larger global state isn't really necessary (unless you have other reasons to calculate and store this globally, whereas in a typical scenario you'd (probably, this is an example) just calculate it in the cart modal component as it receives the cart items from the server database, renders both the item cards and the subtotal, and passes the value down). it's not something you'd imagine would be repeated often or worth it to have calculated in the backend or wherever else the original cart data found itself born unto the world. it's situational, hence why these terms are "colloquial" and can't be found. If you're building a formal understanding, this guy essentially coined the term. tbf it is kinda a secret, one that he found through his direct experience of this kind of situation. he's a senior after all; few learn state management this intimately
essential as in the literal sense, "essence of", not primarily the social sense, "urgent/important/critical".
@MrZerosixZerooone hey don't be rude. React's easy to pick up. ending up on videos like this means they're looking for deep knowledge. they clearly are trying to learn. Dan Abramov didn't even learn flexbox for years upon years. you want him to sit in vscode doing hello world and algorithms in JS for two entire years? boring. he's studying web dev, let him learn web dev. he'll get there. give some people some slack, let them walk their path
This was a great video! Love the depth on the answers. This should really help people to get a better sense on what they can expect in the interviews and how to approach answering a question. Would love to see more videos like this one 👏
great content, pls create this kind of contents. it's really valuable content in entire dev community
Great session , preparing for an interview in 1 hour and just saw it , questions i didn't think about and make so much sense.
Best of success @iziversano
Very valuable information. Thanks Bagdon and seniorDev
Great video loved it. Pps bring more videos on senior Frontend content. Keep going!🎉
Move of those coming soon @onecurious
Great content.
outstanding answers for the questions!
Glad you enjoyed it @nazardzys
Well done video. But you should mention this is for a React Developer
Noted @Johan
Great video, thanks guys 👍
You are welcome @cankat
nice, need more vids like this. Im your follower now)
Awesome @MeLu! glad to have you on the channel
Quite good (and important) questions. Cheers, guys!
Glad you found it useful @renato
Amazing.
Thanks a ton❤
You are welcome @chiran! Glad you enjoyed it :)
Amazing video. Thank you 🙏🏻
Thank you @anastasia
Ii shared with my friends
amazing content
thank you :)
And design patterns too
crazy level.
i couldn't answer any questions :(
thanks !
You are welcome @nutan
Basically, not bad, basically
glad it helped :)
awesome bogdan
Why use Webpack? I’m literally seeing no one using it in their projects.
.vite is all over the place
More of like the candidate is holding a guest lecture and the interviewer is clearing his doubts 😅
yes, we had to move into that direction to give more value to the audience, is a mix of both, lecture and interviewing, hope it is helping you folks :)
@@therealseniordev Yes definitely really helpful. I was just trying to express the extent to which the candidate was experienced. 😅
Nice
Thanks :)
Why is this common standard? If the candidate have documented experience and education, this should not have to be "tested" again and again. The narrative as a whole is sick, and we need to start trusting people instead. You're hiring a human being, not a machine. I get that you might have questions about skills and competence if the candidate has no experience, and bare minimum education. But to treat everyone like this, is disresepectful towards those who are experienced and educated. I disagree with this entire approach as default.
Yep, ive worked a bit with react but a lot you learn as you go and dont remember all the time, its crazy what the modern world has become
Do you understand that firing a person due to his low skillset is way harder than hiring? You cannot just trust them because they have some paper proving they're good. You do need to test people in some degree
we don't get to choose how we get interviewed, the only thing we can control is our preparation, is it fair? probably not. But is that world we live in. Win the game first, and change the game later when you get to the top.
@@grenadier4702 Why would you fire the developer for not having a certain skill? That is just wasteful, inefficient. Train the person on the job instead, make sure they get on top of your company tech stack. Teamwork. We are humans, we learn every day.
@@therealseniordev That might be true, but why would you agree to it? I have refused many companies because of their incompetent tests. Yet they continue like retarded zombies and don't listen to candidates....and eventually they are forced to hire consultants at triple rate to fix their shit.
is this really senior level questions? where are those about type coercion, backtracking, event loop, generator functions, inheritance etc?
this is a Frontend focused interview, not a JavaScript one, type coercion => TypeScript, Event Loop => JavaScript, Generator Functions => JavaScript, Inheritance => OOP & JS, we are pulling different series, this video is focused on more FE related questions, cheers
FrontEnd is so endless in technologies, names, paradigms, libraries, etc that it is virtually impossible to give one only type of interview. Depending on the role the company looks for they can be interested in architecture, patters, CSS and styles... Hundreds of possible combinations and limited time. One can not be answering, explaining, doing assigments etc forever
90% of this video is a React Interview.
This video is awesome! Just a small tip. In the question about the pure components I would suggest to explain also in terms of a pure function. A functional component with state is not a pure component