2.5 Years Experienced React JS Interview | Chakde Frontend Interview EP - 21

"Chakde Frontend Interview" series will contain frontend interviews for all rounds - #Javascript, #React, Machine Coding, System Design, etc.
Trust me, this series will be one of the best resources on the internet to prepare for #frontendwebdevelopment #interviews ✅
Also, I would like to thank you all for the support you have given to this series throughout. Keep pouring your love and support to this series and I'll keep bringing in the quality content for you.
please share this series with your friend and on Linkedin as well to keep me motivated .
Connect to learn & grow together in our career❤️:
✅ Linkedin: / engineerchirag
✅ Twitter: / engineerchirag
✅ Instagram: / engineerchirag
Music track: Wanderer by walen
Source: freetouse.com/...
No Copyright Background Music
#interview #react #javascript #chakdeinterviews #frontenddevelopment #mockinterview

[@aniketsharma7941]

Hi Chirag,
Thank you once again for the opportunity. The interview was very insightful and helped me understand my current level of knowledge and the areas I can improve.
You’re doing great work by providing this kind of content to the community.
Thanks,
Aniket

[@mahekjariwala3560]

The difference between keyup and onChange is that
onChange is trigger when there is something change in an input value, keyup trigger when user release currently pressed key. The keyup is trigger even if there is no change in an input value like Enter key release, Arrow up, Arrow down etc.
Also, keyup, keydown,keypress are device specific event meaning it will only fire in desktop.

[@zebaroohi8888]

Thank you so much for coming up with new coding challenges every week. This is really helpful and great for learners. Keep going, Chirag!

[@jagadeshvarmasvpkh7860]

Very good mock interview best question.

[@ArpitSingh-wp6yx]

Bring more experienced React developer interview

[@satyanarayana480]

Hai Sir Please make a video on Agile methodologies and Jira Tool for Developers (Fresher to Experienced)
Want's to hear this from you 🙏
must cover --->
Sprint Backlogs
Retrospective Sessions
Business Refinement sessions
How many types of methods
Iterations
Agile sprint methodology
Waterfall model

[@CKsisodia]

Thank you so much sir for the valuable content 💐💐

[@DeepLajpal]

Nice Experience for me like how to approach a problem statement.

[@ArpitSingh-wp6yx]

And give your own expressive feedback also ...
How we can give feedback ..
We r here to learn...

[@UmeshSoni-c6d]

onChange in input, makes trigger function on every change or we can say on every character input function will be called.
This makes nothing good in this scenario, function should be invoked when we key Enter.

[@tarun29061990]

Mai to chirag bhai ka fan hu :D

[@arunaditya665]

This is my approach sir
import React from 'react'
import { useState } from "react"
function Lights() {
let lightsList = [
{
name: "Red",
time: 2,
index: 0
},
{
name: "Yellow",
time: 2,
index: 1
},
{
name: "Green",
time: 2,
index: 2
}
]
const [currentLight, setcurrentLight] = useState(lightsList[0])
const [isConditional, setIsConditional] = useState(false)
const [showInput, setShowInput] = useState(false)
let customTimeRef=null
function handleCustomTimer(){
setTimeout(customTimeRef)
setIsConditional(prev => {
return !prev
})
setShowInput(prev => {
return !prev
})
setcurrentLight(lightsList[0])
}
function handleCustomTime(p){
let input = Number(document.getElementById("num").value)
customTimeRef = setTimeout(handleCustomTimer, input *1000)
}
function customHandle(p) {
setIsConditional(prev => {
return !prev
})
setShowInput(prev=>{
return !prev
})
clearInterval(timeRef)
setcurrentLight(lightsList[p])
}
function handleLight() {
if (currentLight.index == 2) {
clearInterval(timeRef)
setcurrentLight(lightsList[0])
}
else {
clearInterval(timeRef)
setcurrentLight(prev => {
return lightsList[prev.index + 1]
})
}
}
let timeRef = null;
if (!isConditional) {
timeRef = setInterval(handleLight, currentLight.time * 1000);
}
return (


{
customHandle(0)
}}>Red
{
customHandle(1)
}}>Yellow
{
customHandle(2)
}}>Green

{showInput &&

Click
}






)
}