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

#interview #react #reactjs #frontend #javascript
‪@careerwithvasanth‬ is a RUclips 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/vasanth_bhat
Link to questions: github.com/coolvasanth/reactj... (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 !

[@sambose8243]

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

[@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

[@mahalingappabirajdar5285]

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

[@as_if]

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

[@shubhamkakad10x]

thank you for this

[@omgupta777]

Thankyou so much🎉

[@SandeepMaraboina]

Q8 use value in dependency array

[@khanapeena2191]

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

[@mayurwankhade7447]

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

[@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 !

[@ankushladani496]

Thanks for this awesome knowledge...❤😊

[@careerwithvasanth]

My pleasure 😊

[@madhanravi4365]

Thanks a lot for this, need more like this ❤

[@careerwithvasanth]

You're welcome 😊

[@SunilKumar-cq8gu]

Q8-using prevState=>prevState+1 would work

[@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 !!

[@Zaheer__zk40]

"Great questions."

[@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

[@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

[@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 !

[@ankushladani496]

Please explain exercise 3.

[@ankushladani496]

2) React

[@ankushmudgil9352]

In excercise -4 how 4 zeros are consoled??

[@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 !

[@mohammadabbas1623]

Amazing

[@careerwithvasanth]

Thank you !

[@Abhi_Thakur01]

Keep vs code and browser in dark mode 📳

[@careerwithvasanth]

Noted !

[@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

[@bishalkar5614]

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

[@careerwithvasanth]

I wish!

[@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]

😂😂😂😂😂