Top 100 React JS Interview Questions and Answers | 2024

[@vinkrins]

*** What is UST Hook :> Pointers* - 58:52 :> useEffect -- 1:00:42 :> dataFetching example -- 1:03:44 :> managing loading state -- 1:04:04 > concept prop drilling ---------------------------------------------------------------------------------- -- 1:06:21 :> ContextAPI > solution to prop drilling -- 1:08:45 :> Context API > useContext -- 1:10:10 :> Context API > updating context values -- 1:11:53 :> Context API > Multiple context -- 1:13:13 :> Context API advantages over prop drilling ---------------------------------------------------------------------------------- - 1:14:38 :> useReducer -- 1:18:32 :> useReducer : Complex example -- 1:19:34 :> useReducer : additional argument {type:"type", payload:{}} -- 1:21:06 :> useReducer : handle sideEffect ---------------------------------------------------------------------------------- - 1:22:55 :> useRef -- 1:25:05 :> useRef > store mutable -- 1:26:06 :> forwardRef - 1:28:23 :> Forms in React ---------------------------------------------------------------------------------- - 1:31:26 :> Custom Hook -- 1:33:37 :> useFetch -- 1:35:40 :> useWindowResize ---------------------------------------------------------------------------------- - 1:37:32 :> React Router Dom -- 1:38:30 :> Basic Routing -- 1:41:59 :> Link Component -- 1:43:07 :> Params in route / path -- 1:45:25 :> Navigate Component -- 1:46:30 :> Routes -- 1:47:27 :> Nested Route -- 1:49:39 :> " * " (all / any route) mapping aka NotFound ---------------------------------------------------------------------------------- - 1:50:34 :> useNavigate, navigate via code progmatically - 1:52:09 :> useCallback - 1:54:21 :> useMemo - 1:56:52 :> React.Memo - 1:58:15 :> Explain the Reconciliation process in React - 1:59:32 :> PureComponent - 2:00:40 :> Explain HOC ---------------------------------------------------------------------------------- - 2:02:06 : > Redux -- 2:03:24 :> Redux : what is action in redux -- 2:04:33 :> Redux : explain reducer in Redux -- 2:05:26 :> Redux : Role of redux -- 2:06:41 :> Redux: react-redux > connect ( mapStateToProps, mapDispatchToProps)(Component) > old way to use redux -- 2:08:30 :> Redux: react-redux > useSelector & useDispatch > latest way to use redux -- 2:10:07 :> Redux Toolkit -- 2:10:43 :> Redux Toolkit > How to configure -- 2:12:00 :> Redux Toolkit > createSlice ({name:"xxx", initialSlicer:"xxx", reducers:{ ... }}) ---------------------------------------------------------------------------------- - 2:13:36 :> Controlled Components - 2:14:30 :> UnControlled Components ---------------------------------------------------------------------------------- - 2:15:34 :> Optimising performance in React Apps - 2:16:31 :> Code splitting > lazy() & suspense() - 2:17:50 :> Render props in React > Example - 2:18:40 :> Portals in React - 2:22:05 :> Suspense & Lazy Loading ---------------------------------------------------------------------------------- TypeScript with React - 2:20:44 :> props in functional component - 2:21:42 :> useState hook - 2:22:18 :> specifying type for event handler > developer.mozilla.org/en-US/docs/Web/API/HTMLElement - 2:23:19 :> optional props - 2:24:03 :> useReducer - 2:25:11 :> ContextAPI ---------------------------------------------------------------------------------- Jest / React Testing Library - 2:26:10 :> Simple test case - 2:27:46 :> Rendering component in test case - 2:28:28 :> Finding element in Jest DOM > screen.{ getByText, getByTestId , getByRole } - 2:29:53 :> Simulating user event in test case > fireEvent.click / userEvent.click - 2:31:08 :> Testing props in test case ---------------------------------------------------------------------------------- HANDS ON QUESTIONS :> TRY YOURSELF - 2:31:53 :> Controlled Input Component - 2:32:43 :> Toggle Visibility of a component - 2:32:21 :> Fetch Data from an API & Display in component - 2:33:53 :> Create a reusable Button Component - 2:35:05 :> Component that have useEffect with cleanup - 2:35:47 :> ContextAPI + useReducer + global state management - 2:36:11 :> Conditional rendering based on props - 2:27:17 :> Implement a simple form component along with error handling ---------------------------------------------------------------------------------- - - - - - - T H A N K Y O U - - - - - -

[@solarsystem9156]

All timestamps below : 1:36 = What is react js? 2:18 = What are the major features of react? 4:29 = What is virtual DOM and how it works? 6:00 = What are the components in react? -> 6:54 = Explain Class components with example. -> 8:15 = Explain Functional components with example. 9:58 = What is JSX? 12:04 = How to export and import components? 13:20 = How to use nested components? 15:02 = What is state in react? -> 17:20 = Example 19:33 = How to update state in react? 22:26 = What is setState callback? 23:56 = Why you should not update state directly, explain with example? 25:10 = What are props in react? 27:05 = What is difference between state and props? 28:48 = What is lifting state up in react? 32:02 = What is children prop in react? 33:26 = What is defaultProps in react? 34:58 = What are fragments in react and its advantages? 36:07 = How to use styling in react js? 40:30 = How can you conditionally render components in react? 42:29 = How to render list of data in react? 44:08 = What is key prop? 45:24 = Why indexes for keys are not recommended? 48:00 = How to handle buttons in react? 49:25 = How to handle inputs in react? 51:36 = Explain lifecycle methods in react. 54:13 = What are the popular hooks in react and explain it's usage? 56:22 = What is useState and how to manage state using it? 58:52 = What is useEffect hook and how to manage side effects? 1:00:41 = How to implement data fetching in reactjs? -> 1:02:44 = How to manage loading state? 1:04:04 = What is prop drilling and how to avoid it? (OR) What is Context API and why we need Context API? 1:06:22 = What is the Context API in react and why is it used? 1:08:45 = How do you consume context using the useContext hook? 1:10:10 = How can you update context values? 1:11:54 = How do you use multiple Contexts in a single component? 1:13:14 = What are the advantages of using the Context API over prop drilling? 1:14:39 = What is the useReducer hook, and when should you use it? 'useReducer' is basically an alternative of 'useState'. 'useState' basically used for state management. 'dispatch' will dispatch a method. It has 'type' property. 1:18:32 = Can you use useReducer with complex state objects? 1:19:35 = How do you pass additional arguments to the reducer function? // Intermediate level of interviews 1:21:07 = How do you handle side effects with useReducer? 1:22:55 = What is useRef hook? 1:25:07 = How can useRef be used to store mutable values? 1:26:07 = What is forwardRef and when would you use it? 1:28:24 = How to manage forms in react? 1:31:27 = What are Custom Hooks and Why do we need them? 1:33:37 = Implement useFetch custom hook/ Custom hook example? // Intermediate level of interviews 1:35:41 = Implement useWindowResize custom hook 1:37:33 = What is React Router DOM and why is it used? 1:38:32 = How do you create a basic route in React Router DOM? 1:39:35 = How to implement basic routing using react router dom? 1:41:59 = How to create a link to another route using React Router DOM? 1:43:09 = How do you use URL parameters / Dynamic routing in React Router DOM? 1:45:27 = How can you perform a redirect in React Router DOM? 1:46:31 = What is a Routes component in React Router DOM? 1:47:29 = How do you handle nested routes in React Router DOM? 1:49:40 = How can you handle 404 errors(not found) in React Router DOM? 1:50:35 = How do you programmatically navigate using React Router DOM? 1:52:09 = Explain useCallback hook with example 1:54:21 = Explain useMemo hook with example 1:56:52 = Explain React.memo with example 1:58:15 = Explain the reconciliation process in React and how it works. 1:59:33 = What are Pure components? 2:00:40 = Explain higher order component with example. 2:02:11 = What is redux, explain core principles. 2:03:24 = What are actions in Redux, explain with example? 2:04:34 = Explain reducers in Redux with an example. 2:05:25 = What is the role of the Redux store? 2:06:42 = How do you connect React components to Redux store using connect? 2:08:30 = How do you use the useSelector and useDispatch hooks in a function React component? 2:10:09 = What is Redux Toolkit? 2:10:41 = How to configure store in redux toolkit? 2:12:00 = Explain createSlice in Redux Toolkit with an example. 2:13:37 = What are controlled components in React? 2:14:31 = What are uncontrolled components in React? 2:15:28 = How do you optimize performance in React applications? 2:16:22 = What is code splitting in React? 2:17:50 = What are render props in React? Give an example 2:18:39 = What are portals in React? 2:20:05 = How do you implement lazy loading in React? 2:20:45 = How do you define props for a functional component in TypeScript? 2:21:41 = How do you use the useState hook with TypeScript? 2:22:18 = How do you type event handlers in React with TypeScript? 2:23:19 = How do you handle optional props in React components with TypeScript? 2:24:02 = How do you use the useReducer hook with TypeScript? 2:25:10 = How do you type the context API in React with TypeScript? 2:26:06 = How do you write a simple test in Jest 2:27:44 = How do you render a component for testing using React Testing Library 2:28:27 = How can you find elements in the DOM using React Testing Library? 2:29:51 = How do you simulate user events in React Testing Library? 2:31:05 = How can you test component props with React Testing Library? // Hands-on Questions 2:31:53 = Create a Controlled Input Component 2:32:42 = Implement toggle Visibility of a Component 2:33:20 = Fetch Data from an API and Display it, along with loading state. 2:33:52 = Create a Reusable Button Component with Props 2:35:05 = Build a Component that Uses an Effect to Perform Cleanup 2:35:48 = Implement a Context with a Reducer for Global State Management 2:36:11 = Build a Component with Conditional Rendering Based on Props 2:37:17 = Implement a simple form component

[@OsteenOmega]

hello. how did you do this?

[@solarsystem9156]

@@OsteenOmega while i was going through video, i was also making a note of it for my revision. Just posted it ;)

[@ms_anirudh]

Thanks a lot man :) Really helpful

[@solarsystem9156]

@@ms_anirudh happy to help :)

[@prashant4843]

can someone like my comment so i keep revising this till i switch my job😅

[@rahularora1079]

Can you please create video for JS interview questions also?

[@yogeshgadhewal9840]

bade bhaiya ek ho toh Dil h kitne baar jitoge... 😍😍😍😍

[@PallabChatterjee-n7x]

Hey Sangam can you make all these in a pdf so that after learning from your video I can just take a look before interview once please. You have done great

[@brokegod5871]

Another good practice to do if you are asked questions related to data fetching or managing loading states hands on is use try-catch-finally, this is a very good practice and you can impress your interviewers Use try block to do the actual fetch, catch for any errors returned by the api and finally for loading states as even if you get error you need to stop the loading eventually

[@HenokGebresenbet]

the way this guy explain is wonderfull

[@Amanbhaskar16]

Can you also prepare similar video for backend in nodejs interview questions

[@manuvashisht9376]

Best explanation On KZbin Dude!!

[@harjyotsinghgulati6603]

Please make like this video for javascript also

[@farzankhan1721]

Another Day Another Beast Video Thanks Sangam , Make Video on TypeScript

[@dipanshusabharwal]

Good effort

[@Tarun8336]

Nice explanation. Keep it up.

[@ArkaKundu-f2m]

please create video on node js express js plss🙏🙏

[@prajnayogish9450]

Thank you for creating such amazing content with clear explanations! I recently had an interview and, after reviewing the React and JavaScript concepts, I watched your React and JavaScript (Part 1) interview questions video. I'm thrilled to say that I cleared the interview and received a job offer! Your video played a crucial role in my preparation, and I truly appreciate the effort you put into it. I’m excited to continue learning more from you in the future. Thank you once again!

[@shivangdwivedi8817]

please share notes which have been used the video

[@RAJVEERKUMAR-cf7nb]

Awesome video! Could you please share the PDF if it's available? I’d really appreciate it!

[@shifaak9734]

Please start a mern stack series you teach really well ❤

[@hardiksingh8344]

really amazing. helpful

[@ManishGupta-nv5by]

34:48 defaultprops? does it still need to know? why not use this fn({prop1='value1',prop2='value2'}){}

[@BytesRush]

Sir i love your teachings i really wanna develop e learning platform like udemy with payment integration like stripe using mern and the way you explain things is exceptional btw thanks alot for your efforts ❤❤

[@Wasim4690]

Thank you for your efforts ❤❤

[@growuptips]

bro please make one video on advanced css like how u use min h max h and many other things we dont understand that

[@kattamurinagabhushan9879]

Can you please share the presentation link or pdf link.. Your explaination is awesome.

[@sangammukherjee]

@@kattamurinagabhushan9879 check in my channel community tab. Its there

[@tsdineshjai8565]

you did great !!

[@AvinashSahni]

Great Work Good effort bade bhaiya ek ho toh Dil h kitne baar jitoge... Another Day Another Beast Video Thanks Sangam , Make Video on TypeScript

[@TechMonkKapil]

Thanks a ton Sangam! ❤ Keep creating awesome content!🎉

[@company2605]

Hello Kapi bhaiya, I just want to know what makes you different that other youtubers ? I know, you want to share your valuable experience with everyone, but I think this creates a little confusion for students as there are too many influencers in this field. So just a small suggestion: try doing something unique (content creation itself is unique, so good luck for that bhaiya). I want to see diverse channels rather than many channels covering 1 topic. Thank you. didn't mean to demotivate, but rather promote diversification. Learning different skills is what will make india a true software hub :)

[@TechMonkKapil]

@@company2605 thanks for suggestions bro! I am in early phase of content creation, definitely my plan is to make videos in diverse topics going forward, so stay tuned and keep your support until then!

[@hungnguyentuan1989]

Thank you for the best video, i hope you create video about reactjs-typescript and project demo

[@Spmdiamond]

Bro how I will give thank you,this is the best vdo on interview react with best explanation ever ❤❤❤❤❤❤

[@NikhilSharma-no6vt]

​@sangammukherjee Provide the Pdf also. I have watched the video. I want pdf for revision it will be a great help.

[@gaurangagrawal9008]

Very Great Video , Please share Pdf

[@manasbarik-m5r]

Hello bro can you please next js 15 and node.js 100 playlist when can expect , it very use every developer

[@MohammedHasmi577]

U r just 🔥🔥

[@shaikh-i6k]

you are just amazing just great ♥♥♥

[@mdsahilraj2306]

Bro please provide the notes in pdf to revise it

[@solarsystem9156]

hello bhaiya, can u also create videos of dev related ques. asked in interviews ? i havent watched the video yet... will watch it soon.. also nextjs related ques. (if possible) banana bhaiya

[@anmolchandra8370]

Can we expect backend too from you?

[@muhammadsaud5986]

thanksyou so much sir can you please share the ppt file of interview vedio

[@vinayak7425]

can you please provide this ppt or pdf it will be great for revision perspective

[@Spmdiamond]

Brother can you please provide this documention link to download

[@Harry03122]

Hi bro, can you explain about react auntocation, please reply 🙏

[@shifaak9734]

Bro what happened to your bootcamp program?

[@PrashantChitale-s5l]

Please give the questions pdf 🙏

[@RockyAnsari-d6w]

This video is helpful for those people whose experience is 2 years

[@-Manasabhimadolu]

For 3 yrs experience too?

[@rdnexta]

I don't care whatever say to you, I selected 3 month ago as an full-stack engineer at thailand based company. It is remote job. I did watch Your 25 projects video to practice❤❤ thank a lot❤❤ Edit :youtube deleting my comment so I Cant ans. So I am giving you here. In my company, we dont have any position currently and recently fired one employee. I applied from linkedin. It's more than enough. And third, I applied on 1100 applications. In that I got one. So keep applying untill you get job offer. Not an interview. Edit 2: I dont care about My english Edit3: I copied projects from youtube. I didn't have time to build. Just put Mern stack good project. And it should be unique.

[@solarsystem9156]

hi sir, can you please tell me the name of that company and how did you apply? thank you

[@rdnexta]

@@solarsystem9156 company name : westride, but we dont have position currently. Recently fired one🙂. if noone wants to hire, hire self.

[@niklausmikaelson7332]

Hey bro can you give referral seeking for frontend role

[@rdnexta]

@@niklausmikaelson7332 we dont have any vacancy currently and recently fired one.🙂

[@rajkirankelangi5751]

Hi bro

[@mohammedarhammohammed3424]

Can you please make a react router tutorial

[@bilal5488]

Now mern project😍

[@harshayyy9]

fullstack next js +aws deployement plz

[@amanrajbhar3970]

4:00

[@saikumar7247]

bro what is the strict mode in react js

[@johnnywalker5108]

It's used for safety purposes in react it also helps in react to provide better debugging.

[@fThAapkaAbhishek]

share notes

[@Jyoti_3012]

Is this 100 question are good for interview? means for freshers

[@Tier69_guy]

Yupp definitely

[@sangammukherjee]

yes

[@NikhilSharma-no6vt]

​@@sangammukherjeeProvide the Pdf also. I have watched the video. I want pdf for revision it will be a great help.

[@React_Dev_YT]

bro please upload react interview video in hindi please

[@vishwajeetyadav4480]

Do you have job currently?

[@hemanthhungama2784]

Sir please provide pdf..!!

[@xylas766]

dada ppt ta pawa jabe?

[@sangammukherjee]

sure, will share

[@PallabChatterjee-n7x]

@@sangammukherjee Yes please dada

[@NikhilSharma-no6vt]

​@@sangammukherjee Share pdf

[@santhosh6634]

Please share notes

[@ManishGupta-nv5by]

17.41 i dont even know how to write class based how to give example.

[@kunalsin]

Mern project next start to end

[@harjyotsinghgulati6603]

You react video is better then hitesh choudhary

[@supplymeweed]

Obviously, he is anytime better, most of under-rated channels are too good on youtube..

[@TravellingEaters]

Which one I want to learn react

[@kasyapkasyap2902]

time stamps please

[@kuldeepdawar7496]

Hello brother

[@Arfajsheru]

Please send pdf bro ☺️

[@NikhilSharma-no6vt]

Please Give the pdf

[@tathagatabasu4326]

Boss bhalo toh?

[@virajkale322]

Thank

[@fThAapkaAbhishek]

share notes

[@ravichandra183]

Share notes