Complete ReactJS Interview Prep🔥: Top 10 Questions and Answers for Beginners | Ace Your Interview!

#interview #react #reactjs #frontend #javascript
‪@careerwithvasanth‬ is a TH-cam channel dedicated to helping candidates clear their interview. There are more than 150 videos and new videos will be uploaded every week. If you're seriously preparing for interviews and looking for tips and tricks, please subscribe to my channel and press the bell icon.
To get a dedicated one on one, you can reach out to me here: topmate.io/vas...
Link to questions: github.com/coo... (Don't forget to star the project)
Join CareerwithVasanth community to discuss with other developers: t.me/uncommongeek.
Follow me on LinkedIn - / careerwithvasanth
Join my 3100+ members frontend developer telegram group here: t.me/uncommongeek
Medium Blog: / careerwithvasanth
JavaScript Interview preparation series : • Watch this series and ...
JavaScript Custom implementation/polyfills Series: • Learn Custom implement...
Frontend system design series: • 🔥 What is frontend Sy...
MAANG series for frontend developer: • First ever MAANG serie...
Frontend mock interview series: • ReactJS & JavaScript M...
Shorts for quick access to all frontend resources: • MAANG interview Qstns ...
Tips for freshers: • 🔥 Every Engineering S...

[@sambose8243]

This channel is very underrated. You deserve 1M subscribers, bro. Hopefully you'll reach it soon 😊

[@thelyricsguy3094]

Exactly because of him only I aced my last interview

[@careerwithvasanth]

Thank you so much 😀 both !! hoping for the same !

[@ngayathri1818]

Its really very useful bro. Keep going.
1. 2 as useState schedule the update and useEffect refer the initial value only
2. Hello , when we click the button it changed to "React" due to setState
3. after 1s, It will print 1 and again each 1s interval, count is incremented by 1
4.setState scheudle the update and 1 will be printed
5. if we use prevState, then react will remember and update the previous state.
6.setTimeout form closure with setCount and its not update at that time. so result will be 1 but alert will be 0
7. 5 -> wrong
8. 1,2,3 -> wrong. we can use prevState => prevState + 1
9. 1 because of closure
10. increment by 1

[@careerwithvasanth]

Appreciate your comment

[@pez5491]

Content gold! And props for the white screen mode

[@sambose8243]

For Q8, I think it will work if we use prevState + 1 in the setValue

[@mahalingappabirajdar5285]

Thank you for explaining each and every concept in an easy-to-understand manner

[@careerwithvasanth]

you're welcome

[@MadivadaRavi]

import React, { useEffect, useState } from 'react';
const App = () => {
const [value, setValue] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setValue(prevValue=>prevValue+ 1);
}, 1000);
// Cleanup function to clear the interval
return () => clearInterval(timer);
}, []); // Empty dependency array ensures this runs only once after the initial render
return (

{value}

);
}; this one you asked answer mentioning the prevvalue to take that and adding

[@as_if]

22:15 that could be done adding count in the dependency array too, other than using prevState

[@sivakarthikeyans3519]

i was able to answer 4 out of 10.
and i almost guessed in 2 other excercises.
again thank you vasanth. it's very helpful and interesting.

[@careerwithvasanth]

That's great !!

[@mayurwankhade7447]

Q 8 - setValue(prevValue => prevValue+ 1)

[@daudmir3221]

Const [ value, setValue ] = useState(0);
UseEffect (()=>{
Const timer = setInterval() =>{
SetValue( prev => prev +1 );
}, 1000};
return ( ) => clearInterval ( timer );
}, [ value ];
Changes Made
1- Setting state value to
prev => prev +1
to take previous value and increment it.
2- In useEffect adding the value as dependency, So that whenever value changes it hits UseEffect.

[@khanapeena2191]

I am not sure about it but you can put value in a dependency array.

[@SunilKumar-cq8gu]

Q8-using prevState=>prevState+1 would work

[@abhisheknavgan6829]

I got 8 of them correct in the first 10 seconds also the one with undefined error 😂, great video

[@ankushladani496]

3) initially 0 and after 1 second count will be 1

[@popilarflims5397]

The second snippet is the correct one. Here's why:
### First Snippet:
```javascript
import React, { useState, useEffect } from 'react';
function App() {
const [value, setValue] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
console.log('value is', value);
setValue(value + 1);
}, 1000);
return () => clearInterval(timer);
}, [value]);
return {value};
}
export default App;
```
### Second Snippet:
```javascript
import React, { useState, useEffect } from 'react';
function App() {
const [value, setValue] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
console.log('value is', value);
setValue(value => value + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return {value};
}
export default App;
```
### Explanation:
1. **Dependency Array in `useEffect`:**
- In the first snippet, `useEffect` has `[value]` as its dependency array. This causes the effect to run every time `value` changes. However, this leads to multiple intervals being set up because each time `value` changes, the effect will clean up the old interval and set a new one. This is not the desired behavior for this scenario.
2. **State Update Function:**
- The second snippet correctly uses the functional form of `setValue` (`value => value + 1`). This ensures that `setValue` is called with the latest value of `value` without relying on the closure from the initial render.
3. **Stable Timer Setup:**
- In the second snippet, `useEffect` has an empty dependency array `[]`, which means the effect runs only once after the initial render. This ensures that only one interval is set up, and it correctly updates the state every second.
### Conclusion:
The second snippet correctly sets up the interval only once and updates the state properly using the functional form of the state setter. Therefore, the second snippet is the correct one to use.
For Question No-8

[@careerwithvasanth]

Great explanation., Join our 3100+ member Career with Vasanth telegram group here, you can spend your spare time to help fellow developers t.me/uncommongeek

[@ankushladani496]

Thanks for this awesome knowledge...❤😊

[@careerwithvasanth]

My pleasure 😊

[@bidirectional3619]

React always batch the set State together , that's why need to take setState( (prev)=> prevState +1 ) , if the value directly depended on the state.

[@SandeepMaraboina]

Q8 use value in dependency array

[@Abhi_Thakur01]

Keep vs code and browser in dark mode 📳

[@careerwithvasanth]

Noted !

[@madhanravi4365]

Thanks a lot for this, need more like this ❤

[@careerwithvasanth]

You're welcome 😊

[@SunilKumar-cq8gu]

Your efforts are worth it, learnt a lot from you

[@careerwithvasanth]

Thank you !! new video will be out this Saturday on similar way for JavaScript

[@arpitham8104]

Please continue these series please 🙏

[@careerwithvasanth]

You will see more videos coming week !! recording them tomorrow

[@jyotighali8002]

can you please make more question like this , I will be more help full for preparing interview

[@careerwithvasanth]

Planning for the same ! you will see more content soon !

[@vamshikrishna6001]

Great video! if possible please provide solutions to achieve the desired output.

[@harshadevi982]

Hi Sir,Thanks for the amazing content.
I have 2 years experience in testing but i sn planning to switch to frontend role.Learning html Css and js.Can you please share any road map or path to secure a job as i am not having real time experience in front end.

[@careerwithvasanth]

Hi please join our group here : t.me/uncommongeek and discuss

[@vijrah3600]

Sir, please make card or a scroll to answer the comment , if you tell it 10 times some times its gives a wrong effect, I have a gaming channel it worked bad for me , huge respect sir

[@careerwithvasanth]

Appreciate your comment and feedback taken !

[@abhinavsingh9854]

In question 8 , value of console.log will be always 0 but in UI for a fraction of seconds you will see in ui 0 and then for all the interval you will always see 1 in UI .
Please correct this in your video.
Thanks and happy coding.
@careerwithvasanth.

[@as_if]

So setState works asynchronously, that's why unless passed a callback function, it doesn't consider the last updated value by it's brother setState.
The callback function makes sure to execute the setState in order, they are called, even if they are asynchronous.

[@careerwithvasanth]

Correct !

[@shubhamkakad10x]

thank you for this

[@Zaheer__zk40]

"Great questions."

[@careerwithvasanth]

Thank you !! please share channel details with your friends !!

[@omgupta777]

Thankyou so much🎉

[@mohammadabbas1623]

Amazing

[@careerwithvasanth]

Thank you !

[@ankushmudgil9352]

In excercise -4 how 4 zeros are consoled??

[@ankushladani496]

2) React

[@jackdesparrow4783]

Exe8 count+=1

[@bishalkar5614]

Sir! Buy an iPad! You need. It's expensive but worth it for a content creator like you.

[@careerwithvasanth]

I wish!

[@ankushladani496]

Please explain exercise 3.

[@VivekChavan-ov3pl]

Where is your tg channel link of uncommon geeks

[@careerwithvasanth]

t.me/uncommongeek Here is my telegram group !!

[@VivekChavan-ov3pl]

@@careerwithvasanth it says it's private unable to join, I was part of it

[@VivekChavan-ov3pl]

@@careerwithvasanth why it is private now

[@careerwithvasanth]

@@VivekChavan-ov3pl yes it's a private group I have approved it.

[@VivekChavan-ov3pl]

@@careerwithvasanth any way I can join

[@keshavkagrawal]

Sir, everyone acknowledges your efforts in helping us but using VSCode in light mode is absolutely criminal.

[@careerwithvasanth]

Haha !! one of my senior suggested white background is good for eyes !

[@mayurwankhade7447]

🤣🤣🤣

[@prasadmagi6302]

😂😂😂😂😂