🔥 Complete ReactJS interview preparation Guide in 2023 | All common interview questions are covered
Вставка
- Опубліковано 12 вер 2024
- Join Uncommon Geeks community to discuss with other developers: t.me/uncommongeek. Interview Preparation series : • Watch this series and ...
Medium Blog / mevasanth
Follow me on LinkedIn - / vasanth-bhat-4180909b
Github Repository that contains examples: github.com/coo...
JavaScript Custom implementation introduction: • Learn Custom implement...
MAANG series for frontEnd Developer: • First ever MAANG serie...
Promise video 1: • Javascript Promise int...
Promise video 2: • Javascript Promise int...
Promise video 3: • Javascript Promise int...
Promise video 4: • Javascript Promise int...
Difference between Class and Functional component:
www.geeksforge...
Reconciliation in react:
reactjs.org/do...
Hooks In ReactJS:
reactjs.org/do...
Pure components in React:
reactjs.org/do...
Higher order component in React:
reactjs.org/do...
If you declare a variable with let inside a functional component and update it, React still won't automatically trigger a re-render. The reason for this is the same as with const: variables declared with let or var are not considered part of the component's state, and React doesn't track them for updates.
To trigger a re-render and reflect changes in the DOM, you should use React's state management, typically through the useState hook. When you update the state using the setX function provided by useState, React will recognize the state change and automatically re-render the component to reflect the updated value in the DOM.
Thanks for the detailed answer !! but anywhere is it mentioned state means just what is declared using useState ? if so, you can share it ?
@@careerwithvasanth, When we talk about "state" in React, we mean the data that a component uses and can make it update or re-render. You're absolutely right that it includes variables created with useState, but it's not just limited to that.
State can also refer to other types of data, like information that comes from a parent component, shared data through context, or even certain special variables made with useRef in certain situations. So, while useState is a common way to manage a component's state, it's not the only way. The essential thing to remember is that changes in this data can affect how the component behaves and shows updates in the web page.
@@abhishekshukla3094 appreciate the detailed reply, thank you
Pure component example was amazing! Instantly subscribed !Hope to see more quality content in the future.
Thanks for watching the video Soumava, please watch all the videos and share the channel with your friends.
18:34 Answer
So React does not re-render the component and it's also a bad practice to directly update state ...component will not be re-rendered on state change if you make a direct state change.
Calling setState automatically re-renders the entire component and all its child components. We don't need to manually re-render as previously using the renderContent function.
27:25 why the useEffect is running unusually because when you create a event listener or settimeout you need to remove the events by return statement with function containing remove eventlistener .
Hi Vasanth, this was so informative! Can you please do the part 2 of this? Would love to watch and share it with my community!
Surely will plan Vignesh .. thanks for the comment
@18:29 State is not only a variable that remains throughout the lifecycle of a component but also a variable that is responsible for showing something on the UI . It will show the value that it has currently. It can be an initial value given to the state or it can be any value that is given to it by virtue of user interaction.So, declaring a simple variable in a functional component or in class components does not make it a hook as it is only showing the info on the UI but it will not respond to the changes to it made by the user interaction. So, normal variables and state variables are different and hence, functional components were earlier stateless and because of the "state" variables they have become stateful
Respect your opinion, can you share some document supporting that !!
x=10 is a state, but not a react-powered state. So it's a feature.
This is what you can a perfect video on react🔥🔥 Loved the way you explained each concept. Looking forward to more quality content.
Thank you Rochak
pure components was eyes opening, there is so much more I don't know I am getting excited to know more
Glad it helped Ashutosh
@@careerwithvasanth Actually I had interview for UI role and this video helped me a lot, also the mock interview ones
A componet rerenders when:
- state changes
- prop changes
- parent component rerenders
Pure component doesn't re-render in the third case.
Correct !! when parent re-renders and no state or prop of child component changes !
@@careerwithvasanth great contents. Absolutely loved the examples.
Part 2, 3, 4... Whatever you fill important.
Please keep on the videos with these type of explainable examples.
Planning to add more such videos !
First time I have seen Pure Component functional representation.
Liked and Subscribed!
Welcome aboard! please share the channel with your friends
Awesome video, This is what i am searching for. Thank you so much
Glad it was helpful! please share channel details with your friends
Liked, Subscribed just after listening to your way of explanation.. please keep posting good content..
Welcome aboard! thank you.
Not commenting here , because it will reach more people, increases my competition . Great explanation. , Can you please do more live examples because your examples are quite simple and it clears the concept.
I will surely do, thanks for your comments
Best video on React... Thank you so much❤... Please cover other topics too it will be really helpful
Sure 😊
Custom Hooks , Pure and HOC Components Explaination & Examples are very Simple and Rare . Thanks
Thanks for commenting Abhijeet. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos.
Great video! Great insights and code snippet examples. Suggestion:- Please add how to convert a class component code to functional component code. Answer to your question about stateful or stateless question would be if we declare const variable x = 10 it won't change or update after re-render that is why it would be stateless.
Hi, thanks for commenting, please share channel details with your friends !! your answer for state is partially right. To justify the answer you need to find official documentation that says state is responsible for re-rendering of the component. If you have fount if, please share.
😮
Thanks! This is the first video I'm watching on your channel. Sir, you're doing a great work, do keep it up. Will definitely watch your other videos.
Thank you Kartik, please share channel details with your friends.
very helpful❤ , simple explanation. please make second part. and also make video on redux interview questions for beginner react developer.
Sure Krishna Prasad, thanks for your suggestion
Yes!
Thank you Vasanth...for the wonderful video.. on React JS. I really admire the way you have explained all the topics...with simple examples on each topic... Eagerly waiting for your next video... Keep Going ☺👍
THanks Subhransu
You gave great example for pure component
setTimeout can be considered as an HOC as setTimeout is a function which asccepts another function
Definitely it can be said so !! appreciate your comments
x=10, is a state, but it does not have react power, which can help to re-render the component, on it's update.
So hooks attach the state to lifecycle of component. Hope I am 90% right
Thanks So much, @Vasanth Sir just now watched all the UA-cam videos each concept is very well explained really appreciate your effort definitely more helpful for us preparing the interview , One more thing We are waiting for the Redux series because I searched on UA-cam no one explained it properly on UA-cam plz make more videos on only redux with the middleware using saga or thunk
Hi Mahalingappa, thanks for commenting. In case if you not subscribed to my channel please subscribe and watch all my videos. Answering your question surely will try to explain the redux concepts with most simplest explanation as possible and update you.
Superlike. Can you please create one ReactJs learning video. Pure component ans HOC defn was very simply put. You explained such complex topics in lay man terms with perfect examples. Thank you.
Thanks for commenting. In case if you not subscribed to my channel please subscribe and watch all my videos. Surely will plan to create such series and update you.
generally i do not comment on videos. but you're teaching all these concept so kindly and effectively . i couldn't hold myself. :) 👍😀
Thank you so much for your comments, means a lot. Please share channel details to your friends !!
simple explanation and understandable examples , keep going man
Thanks !! please share channel details with you're friends and colleagues
these kind of videos are very good bro keep it work.
Thanks, will do!
Well explained, this video has good Code examples, which helped a lot
Glad it helped! Please share channel details with you're friends !!
Liked your video, very good qualtiy, Please create more videos on React interview for rest of the topics.
Thanks for the comments !! planning for the same thing, I will try upload more videos at the earliest.
Thank you so much sir for making such a great video! Really helped me to understand the topics
You are most welcome
Thank you so much for making such a great video! Really helped me to understand the topics clearly 😊
Glad it was helpful! please share channel details with you're friends !
Thank you so much for this detailed and well explained video.
Glad it was helpful! Please share channel details with your friends !!
18:30 The const variable is not a state, and the functional component is still considered a stateless functional component even if it has a const x = 10; variable.
Please attach some official documentation to prove this
@@careerwithvasanth I got the answer from chatGPT, Can't find oficial document,
very nice presentation, thanks for sharing
Great insightful video, will help alot in preparation.
Thank you
Thank you Vasanth, pumped for this content.
Thanks for watching the video, if you have not liked it, please like it and share it with your friends.
Probably your StrictMode is on, with react rendering every 2 times. You need to clearinterval.
Very helpful.
Waiting for more upcoming videos 😊
Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos.
Amazing video , eagerly waiting for part II 😀
Thanks for commenting Sudhanshu. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos. Answering your question, I might not make part 2 soon, but when I do, surely will update it here.
Thankyou so much Sir.
Your videos are just amazing.
great video.learnt a lot
Glad it was helpful!
examples are really simple and spot on!
Thank you
One suggestion I'd like to offer is to include a mention in the thumbnail about the intended audience or the skill level this content is tailored for
Thanks for the suggestion !! I will surely consider it in upcoming videos
Amzing video learnt so much❤
Thank you Sanyam !!
eagerly waiting for part 2.
Make part 2 ASAP thank you for this video✍🙌
Thanks for the comments !! yes I'm planning o to do it asap.
Great explanation Sir 👌👏👏👏👏🎊🎊🎊🙏
Thank you
Hi man, nice content. I just have a quick question: what is the use of the pinky nail?
Hi, thanks for the comments !! from the beginning I have a habbit of growing long pinky nail !! nobody had pointed it out so far !!
@Uncommon Geeks I used to grow it as well. Just wanted to see if you do it from the same reason xD
To update value of x there is no any function was available before 16.8.
Only have to use class components.
Also hoks introduce because class components inernally also converted into function components and then rendered into Dom.
So react team also wants us to write more functional components than class components.
I guess I have answered correct.
Please give me feedback.
Thanks for watching the video Sarvesh and answering the question that I asked. if you have not liked it, please like it and share it with your friends. In case if you have not subscribed to my channel, please subscribe. Now giving my feedback, your answer is right. But to be precise, functional components were stateful even before hooks, but hooks gave a capability of re-rendering and life cycle methods for the functional components which was not present before. Let me know if you have any other queries.
@@careerwithvasanth In class vs functional comparrison, you have mentioned functional components are stateless without hooks. But here, you say functional components were stateful even before hooks. Can you please elaborate ?
@Drake Phillips not sure where I said it. But generally people think hooks gave states to functional components, which is wrong. Hooks didn't give states to functional components, they were stateful. Why I say so is because "What is state ?? " definition of state is "Memory of a component". As long as the component is active, its states will also be active. Considering this definition, normal variables created inside a functional component also contains states. Thing that hooks providing is re-rendering capability after a state change and life cycle methods. Hope that answers your question.
Thanks for the upload. Really useful
Glad it was helpful! please share channel details with your friends !
Excellent explaination. It is really helping in interview prepration. Thank you.
Nice explanation with simple examples 👍🏻
Glad you liked it. In case if you not subscribed to my channel please subscribe and watch all my videos.
Wow this was really awesome.. It really give confidence to me for applying to premium companies 😍.
Thank you Satyapraksh, please share the channel details with your friends.
Hi Vasanth,
Could you please make a video on how to use tools like profilers, to find out problems and enhance the performance of React application.
There are very less content available currently regarding those features.
Sure Manoj, will add it to list of backlog items. Please share channel details with your friends.
Yes please add react optimization tools
Crisp and Clear
Thanks for commenting Vikings. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
Its very useful, thank you...😇
Thanks for commenting Karthick. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
Thank you , I have interview tomorrow
You can do it! All the best share your feedback here !! Also Join our 2300+ member uncommon geeks telegram group here, you will get a community to discuss questions and build projects. t.me/uncommongeek
Please cover more topics.. This is really helpful ❤❤
We will!, Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
Came here after seeing your linkdin post, looks like gem of a channel for FE devs
Thanks for commenting. In case if you not subscribed to my channel please subscribe and watch all my videos.
@@careerwithvasanth I subscribed, and I would like if you upload DSA related content for frontend developers
@@sayansahoo4746 here you go: ua-cam.com/video/DkarkyD-LkQ/v-deo.html please spread the word about my channel with your friends.
@@careerwithvasanth hi, wanted to know one thing. There are very less resources for datastructure in javascript. Most tutors don't cover the memory management part when teaching DSA. Also there's this fact that in javascript we are not interacting with memory directly but in other languages we do. So will it be wise to learn a new language like Java/ c++ to learn DSA?
@@sayansahoo4746 If your looking for very premium companies with 2/3 rounds of DS/Algo I would advise learning new language is worth, because of all the reasons you mentioned above. If companies your aspiring has just one round of DS/Algo then you can manage it with JS.
Hello sir. A part 2 for this video will be really helpful. If you are too busy to make it, can you just reply me what other topics i need to learn to complete my preparation? Currently i have completed your javascript playlist and this react video.
Will upload soon
That was a nice and clear explanation vasant, thanks for the content 😊
Thank you !! glad it was useful !
Great Content 👍
Glad you think so!
Great! looking forward for next part.
Coming soon!
I like your videos
Thank you, please share channel details with your friends
@@careerwithvasanth yeah sure
Please make videos like it's very useful please make one question per video so it will be small and understanble more .thank you 👍
Thanks for watching the video Sathosh, if you have not liked it, please like it and share it with your friends. In case if you have not subscribed to my channel, please subscribe. Now answering you're question here is a detailed JavaScript video series that I have prepared on a topic basis: ua-cam.com/video/qcixpy3HQ9s/v-deo.html
On reactJs also I will try to make similar one. This video is for those who know the concepts and need to brush up before the interview.
tq sir...really helpful
waiting for dsa series
Thanks for watching the video, if you have not liked it, please like it and share it with your friends. I have already started DSA series, you can watch it here: ua-cam.com/video/DkarkyD-LkQ/v-deo.html
@@careerwithvasanth i mean...need complete dsa series sir
Great video😊
Thanks for the visit !
Amazing knowledgeable Contents..Thank you Sir
Most welcome, please share the channel details with your friends.
@
Uncommon Geeks, This video covered all common questions were being asked in React interviews. Thanks for considering my request Vasanth .
Thanks for watching the video, if you have not liked it, please like it and share it with your friends.
@@careerwithvasanth I click like before i start watching your video. i know you will produce great content. Thanks a lot man.
very well explained 💕💕💕💕💕💕
Thank you so much 🙂
@@careerwithvasanth 😍
Love the video 😀
Thanks! 😁
Nice explanations
Thanks for commenting Devendra. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
great stuff 👏
Thanks for commenting Sangeeta. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
Started liking your videos😅
Thank you !
I have a request, can you please make a playlist for the backend side of the MERN stack.
Not having any plan soon Aniket, but will surely try.
It is a great video.
I would definitely like to watch the second part and also about redux.
Thank you very much
Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos. Soon, will plan to make part 2 or at least redux separately.
good and simple examples
Very great
Thank you Serge !!
Thank you so much for the video 🙏
Glad it was helpful!
Thanks brother
Welcome
Great Work
today was my interview I am a fresher I was completely blank and the interviewer was not at all happy I knew things but i was so nervous that I didn't spit even a single word
Arya, I suggest take mock interviews which will reduce your nervousness.
@@careerwithvasanth Will you help me with a mock interview and how much do you charge for the mock interview
Thankyou❤
You're welcome 😊
Amazing
Most welcome, please share the channel details with your friends.
very informative video thanks a lot.
Glad it was helpful! please share channel details with you're friends !!
Why we need class components . As there is hooks available. Any thoughts on that ?
Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos and share the channel with your friends.
Answering your question why still "objective c" exists even though swift is introduced ? why languages like Cobol and Pascal exists ? it's simple because there will be legacy systems and to support them old frameworks are necessary.
super good content.
Thanks Jitu8614, if you have not liked it, please like it and share it with your friends. In case if you have not subscribed to my channel, please subscribe.
It's very helpful. Thanks
Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos.
Can u please answer that const x= 10 is state or not?
Hi Omi, thanks for commenting. In case if you not subscribed to my channel please subscribe and watch all my videos. Answering your question, can you guess what you think ??
Ans. Is - No, brother Omi
As State is used for variables, i.e some change in value can happen. But the moment we use 'const' its value is defined. And can't be changed.
Hope this ans is not late buddy🥳
@@sanketchaudhary3723 Thanks :)
Hi! thanks for the tutorial! can you explain why does the change you made in the useEffect hook (removing the empty dependency array) in 29:15 , solve the problem?
Thanks for commenting. In case if you not subscribed to my channel please subscribe and press the bell icon and watch all my videos. Actually we needed continuous re-endering, useeffect without any params was giving it. So, I changed it.You can use any other approach too, for continuous re-redenring.
@@careerwithvasanth hello ! Nice explanation… but instead of removing dependency array won’t it be good if you would have given ID as dependency? So it gets renders every one second ?
@@rv264 the most ideal solution would be:
1. returning a cleanup function inside useEffect hook to clear that interval
2. using the callback for useState hook like: setId(currentId => currentId + 1)
3. keeping the empty dependency array
this would solve all the problems he was having on video while using react as intended
we need to return the cleanup function on useEffect everytime we run a continuous effect, otherwise we should see unexpected behavior
Waiting for part 2 :)
I have a long list of videos that I'm planning. Soon, I will create and add more videos.
GG bro
Your are doing wrong way to increment id , setId(Id + 1) this is the correct way setId((prevId) => prevId + 1) try this .... your render issue fix
Both are right way but that way you are saying is best because it uses previous value to preform opration and React useState takes a little bit time in milliseconds to update value.
Sir please bring the part 2 of this video!!!
Noted, please share channel details with your friends !! You can watch more mock videos here:
ua-cam.com/play/PLmcRO0ZwQv4QMslGJQg7N8AzaHkC5pJ4t.html
nice one
Thanks for the visit
pls make a video which covers all the hooks in react js
Good suggestion frontEnd-cafe, let me consider it and try to make a detailed video.
Hi! Thank you so much for this video! I have a doubt..why did you change bracket in HOC example? What is the logic behind it working after making the change? Thanks again!
Need more videos on React Interview
Thanks 😊
Can you do one on angular as well please
Thanks for watching the video, if you have not liked it, please like it and share it with your friends. In case if you have not subscribed to my channel, please subscribe. To answer your question, yes, soon I will try to make video about Angular Interview preparation and update here.