Top 100 React JS Interview Questions and Answers | 2024

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 103

  • @vinkrins
    @vinkrins 4 месяца назад +26

    *** 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
    @solarsystem9156 4 месяца назад +29

    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
      @OsteenOmega 4 месяца назад +1

      hello. how did you do this?

    • @solarsystem9156
      @solarsystem9156 4 месяца назад +2

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

    • @ms_anirudh
      @ms_anirudh 3 месяца назад +2

      Thanks a lot man :)
      Really helpful

    • @solarsystem9156
      @solarsystem9156 3 месяца назад +1

      @@ms_anirudh happy to help :)

    • @prashant4843
      @prashant4843 2 месяца назад +3

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

  • @rahularora1079
    @rahularora1079 4 месяца назад +10

    Can you please create video for JS interview questions also?

  • @yogeshgadhewal9840
    @yogeshgadhewal9840 5 месяцев назад +2

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

  • @changamestarted3850
    @changamestarted3850 17 дней назад

    Really appreciate your work...👏👏...Thanks for covering all the concepts.......🙏

  • @DhruvGupta-ilmv
    @DhruvGupta-ilmv 11 дней назад

    Top notch content bro!!

  • @brokegod5871
    @brokegod5871 3 месяца назад

    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

  • @PallabChatterjee-n7x
    @PallabChatterjee-n7x 5 месяцев назад +3

    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

  • @farzankhan1721
    @farzankhan1721 5 месяцев назад +3

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

  • @HenokGebresenbet
    @HenokGebresenbet 5 месяцев назад +1

    the way this guy explain is wonderfull

  • @Amanbhaskar16
    @Amanbhaskar16 Месяц назад +2

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

  • @manuvashisht9376
    @manuvashisht9376 4 месяца назад

    Best explanation On RUclips Dude!!

  • @Tarun8336
    @Tarun8336 Месяц назад

    Nice explanation.
    Keep it up.

  • @dipanshusabharwal
    @dipanshusabharwal 5 месяцев назад +2

    Good effort

  • @prajnayogish9450
    @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!

  • @harjyotsinghgulati6603
    @harjyotsinghgulati6603 5 месяцев назад +2

    Please make like this video for javascript also

  • @TechMonkKapil
    @TechMonkKapil 4 месяца назад +1

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

    • @company2605
      @company2605 4 месяца назад

      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
      @TechMonkKapil 4 месяца назад +1

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

  • @AvinashSahni
    @AvinashSahni 5 месяцев назад

    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

  • @shifaak9734
    @shifaak9734 4 месяца назад

    Please start a mern stack series you teach really well ❤

  • @ArkaKundu-f2m
    @ArkaKundu-f2m 5 месяцев назад +3

    please create video on node js express js plss🙏🙏

  • @hardiksingh8344
    @hardiksingh8344 4 месяца назад

    really amazing. helpful

  • @BytesRush
    @BytesRush 4 месяца назад +1

    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
    @Wasim4690 5 месяцев назад

    Thank you for your efforts ❤❤

  • @tsdineshjai8565
    @tsdineshjai8565 4 месяца назад

    you did great !!

  • @MohammedHasmi577
    @MohammedHasmi577 4 месяца назад

    U r just 🔥🔥

  • @shaikh-i6k
    @shaikh-i6k 5 месяцев назад

    you are just amazing just great ♥♥♥

  • @hungnguyentuan1989
    @hungnguyentuan1989 5 месяцев назад

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

  • @Spmdiamond
    @Spmdiamond 4 месяца назад

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

  • @growuptips
    @growuptips 4 месяца назад +1

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

  • @RAJVEERKUMAR-cf7nb
    @RAJVEERKUMAR-cf7nb 3 месяца назад

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

  • @ManishGupta-nv5by
    @ManishGupta-nv5by Месяц назад

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

  • @shivangdwivedi8817
    @shivangdwivedi8817 4 месяца назад +2

    please share notes which have been used the video

  • @gaurangagrawal9008
    @gaurangagrawal9008 4 месяца назад

    Very Great Video , Please share Pdf

  • @kattamurinagabhushan9879
    @kattamurinagabhushan9879 3 месяца назад

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

    • @sangammukherjee
      @sangammukherjee  3 месяца назад

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

  • @rdnexta
    @rdnexta 5 месяцев назад +34

    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
      @solarsystem9156 4 месяца назад +2

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

    • @rdnexta
      @rdnexta 4 месяца назад

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

    • @niklausmikaelson7332
      @niklausmikaelson7332 4 месяца назад +1

      Hey bro can you give referral seeking for frontend role

    • @rdnexta
      @rdnexta 4 месяца назад

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

    • @rajkirankelangi5751
      @rajkirankelangi5751 4 месяца назад +1

      Hi bro

  • @RockyAnsari-d6w
    @RockyAnsari-d6w 2 месяца назад

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

  • @manasbarik-m5r
    @manasbarik-m5r 2 месяца назад

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

  • @solarsystem9156
    @solarsystem9156 4 месяца назад

    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

  • @virajkale322
    @virajkale322 4 месяца назад

    Thank

  • @muhammadsaud5986
    @muhammadsaud5986 4 месяца назад

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

  • @Harry03122
    @Harry03122 4 месяца назад

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

  • @NikhilSharma-no6vt
    @NikhilSharma-no6vt 4 месяца назад

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

  • @mohammedarhammohammed3424
    @mohammedarhammohammed3424 4 месяца назад

    Can you please make a react router tutorial

  • @mdsahilraj2306
    @mdsahilraj2306 4 месяца назад +1

    Bro please provide the notes in pdf to revise it

  • @Spmdiamond
    @Spmdiamond 4 месяца назад

    Brother can you please provide this documention link to download

  • @bilal5488
    @bilal5488 5 месяцев назад

    Now mern project😍

  • @vinayak7425
    @vinayak7425 4 месяца назад

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

  • @saikumar7247
    @saikumar7247 5 месяцев назад +1

    bro what is the strict mode in react js

    • @johnnywalker5108
      @johnnywalker5108 4 месяца назад

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

  • @shifaak9734
    @shifaak9734 4 месяца назад

    Bro what happened to your bootcamp program?

  • @anmolchandra8370
    @anmolchandra8370 4 месяца назад

    Can we expect backend too from you?

  • @PrashantChitale-s5l
    @PrashantChitale-s5l 4 месяца назад +1

    Please give the questions pdf 🙏

  • @fThAapkaAbhishek
    @fThAapkaAbhishek 4 месяца назад +2

    share notes

  • @harshayyy9
    @harshayyy9 5 месяцев назад

    fullstack next js +aws deployement plz

  • @Jyoti_3012
    @Jyoti_3012 4 месяца назад

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

    • @Tier69_guy
      @Tier69_guy 4 месяца назад

      Yupp definitely

    • @sangammukherjee
      @sangammukherjee  4 месяца назад

      yes

    • @NikhilSharma-no6vt
      @NikhilSharma-no6vt 4 месяца назад

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

  • @santhosh6634
    @santhosh6634 4 месяца назад

    Please share notes

  • @xylas766
    @xylas766 5 месяцев назад +1

    dada ppt ta pawa jabe?

  • @React_Dev_YT
    @React_Dev_YT 4 месяца назад

    bro please upload react interview video in hindi please

  • @hemanthhungama2784
    @hemanthhungama2784 4 месяца назад

    Sir please provide pdf..!!

  • @amanrajbhar3970
    @amanrajbhar3970 4 месяца назад

    4:00

  • @vishwajeetyadav4480
    @vishwajeetyadav4480 4 месяца назад

    Do you have job currently?

  • @ManishGupta-nv5by
    @ManishGupta-nv5by Месяц назад

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

  • @kasyapkasyap2902
    @kasyapkasyap2902 4 месяца назад

    time stamps please

  • @kuldeepdawar7496
    @kuldeepdawar7496 4 месяца назад

    Hello brother

  • @kunalsin
    @kunalsin 5 месяцев назад

    Mern project next start to end

  • @Arfajsheru
    @Arfajsheru 4 месяца назад

    Please send pdf bro ☺️

  • @harjyotsinghgulati6603
    @harjyotsinghgulati6603 5 месяцев назад

    You react video is better then hitesh choudhary

    • @supplymeweed
      @supplymeweed 5 месяцев назад

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

    • @TravellingEaters
      @TravellingEaters 4 месяца назад

      Which one I want to learn react

  • @NikhilSharma-no6vt
    @NikhilSharma-no6vt 4 месяца назад

    Please Give the pdf

  • @tathagatabasu4326
    @tathagatabasu4326 5 месяцев назад

    Boss bhalo toh?

  • @fThAapkaAbhishek
    @fThAapkaAbhishek 4 месяца назад +2

    share notes

  • @ravichandra183
    @ravichandra183 4 месяца назад +10

    Share notes