reactjs question aprt 3

 

I hope this helps:

https://github.com/sudheerj/reactjs-interview-questions

https://github.com/yangshun/tech-interview-handbook

https://github.com/jwasham/coding-interview-university/tree/main

https://github.com/DopplerHQ/awesome-interview-questions#reactjs

https://github.com/enaqx/awesome-react

Thanks everyone!! The interview went awesome. They asked some scenario questions rather than how to code this or that. Some questions they asked were:

  1. state management, what you use and why

  2. CSS framework and could you make it responsive and how

  3. How react interact with DOM

  4. Any library used for forms?? And why

  5. Any library related to tables - I said react-table and why I used it

  6. Git rebase

  7. why typescript

  8. some scenario questions ⁉️

  9. APIs and what you use for it

     ------------------------------------------------------

  10. A question I haven't really seen raised, which I both ask and have seen being asked before:

    • what problem does async/await syntax solve and what other kinds of approaches to async programming exist(this gives me an idea of understanding of the event loop and how they would potentially refactor code or make code more consistent) ------------------------------------------------------



      • what is a closure?

      • what is shallow/deep copy?

      • what is hoisting? how does it work for functions and for variables?

      • what is a pure function?

      • how does reconciliation work?

      • what is lazy loading? when should you use it?

      • sever side rendering / isr / ssg

      • what is the difference between types and interfaces in typescript?

      • when should you use a context to manage state instead of redux/local state

      • higher order components

      • webpack / tree shaking

      • concurrency / event loop / callback queue








    • These are some I overheard from my lead.

      • List of react frameworks you've worked with?

      • Rendering strategies ssr, csr, isr... Does React support ssr out of the box? Why not just use React?

      • State management do you know redux? redux vs context. Pros and cons of redux. When it triggers re-render.

      • Form & form validation...

      That's all I can remember.








    • what is a virtual DOM? what problem does it solve?

    • what is prop drilling and how to avoid it?

    • why do/don't we need 3rd party state management libraries?

    • what is key prop and why do we need it?

    • what is SSR and how does it work?











    • You probably will get lots of questions about JS, so let's start with my favorite: what's the closure and how to use it?











      • Why does infinite re-rendering happen in a useEffect and how do you prevent it

      • Describe a scenario in which you would use useMemo

      • Why is Typescript/TSX used for large applications

      • Provide a large but working component (300-500 lines or so) and ask them to refactor it into reusable components and utility functions











    • Hey there! Sorry to hear about your interview experience, but don't worry - it happens to most of us, but preparation is the key to success. Here are some additional React.js topics you might want to brush up on for your next interview:

      1. State management (Redux, Context API, MobX)

      2. Hooks (useState, useEffect, useContext, custom hooks)

      3. Performance optimization (React.memo, useMemo, useCallback)

      4. Server-side rendering and Next.js

      5. Testing React components (Jest, React Testing Library)

      6. Component lifecycle methods (class components vs. functional components)

      7. React Router for navigation

      8. Error boundaries and error handling

      9. Prop types and TypeScript integration

      10. React portals and refs











    • What are some scenarios where you would return a cleanup function from useEffect?

      Let's say I have a class based component, and it is too large to feasibly refactor into a functional component, but I want to render something inside the component based on a hook. How would I do this?

      What is a pitfall of using React context as a global state manager?














    • • What will happen, if you remove first three items in list of items, where keys are indexes of array?

      Difference between useEffect vs useLayoutEffect? When is forward ref used? How to use useImperativeHandle? What does Error Boundary do?

    • In 5 years as a Frontend Developer I never used useImperativeHandle and forwardRef, maybe used useLayoutEffect once. This is book knowledge about edge cases that are mostly irrelevant in most projects.

      I'd rather ask more behavioral questions to get to know the way how someone's approach to solving a technical problem is instead of asking some stuff that is hidden somewhere deep in some framework documentation.






    • > react hooks basic understanding -> what is HOC and HMR -> how react works with DOM -> when do you work with context and when to use redux -> how use effect works with dependency and all scenario -> implement a global store for the cart system and use redux and explain the flow like how the store is getting data storing data ( could be hard if you have to develop in a few minutes) -> how to optimize the react app and what could be the reason for the high complexity -> how to control re rendering in react -> react lifecycle explain -> what is the better way to avoid prop drilling -> how to use react routing (basic one)




      \\\

  1. What are event boundaries?

  2. What state management system would you use for a given situation and why?

  3. UseMemo vs React.memo?

  4. useMemo vs useState with example.

  5. Creating your own hooks use case.

  6. What are synthetic events and why does react uses them









    • I take 2-3 interviews per week on average for react devs. The most common one I ask my candidates is this:

      1. Explain how react works under the hood to me like I'm 5 yr old

      2. What problem did react come to solve?

      3. What are composable components?

      4. How do you separate logic and style?

      5. What are the security measures to be taken to avoid data leak in frontend TYPESCRIPT specific

      6. How do you validate form input data

      7. How do you design typesafe components GENERAL

      8. what are accessible components, how do you design them ?

      9. State management - redux vs context API.



































































Comments

Post a Comment

Popular posts from this blog

reactjs questions part 4

A prop change does not re-render a component if the prop is stored as a local variable. It only re-renders when the prop is stored as a state variable. =======  I take 2-3 interviews per week on average for react devs. The most common one I ask my candidates is this: Explain how react works under the hood to me like I'm 5 yr old What problem did react come to solve? What are composable components? How do you separate logic and style? What are the security measures to be taken to avoid data leak in frontend TYPESCRIPT specific How do you validate form input data  How do you design typesafe components GENERAL what are accessible components, how do you design them ? State management - redux vs context API.  --------------------------2------------------------------- Here are some key API-related questions to prepare for your React.js interview: API Calls and Data Manipulation How do you make API calls in a React application and handle the response data? What is the best pract...
Read more

ReactJS: How and when to force a React component to re-render

Image
What is force re-rendering? Force re-rendering in React is like pressing the refresh button on a webpage, even when the page seems just fine. In React, it means telling a component to update and redraw itself, even if nothing has really changed in the data (stat/props) it uses. Although React is usually good at knowing when it is time to update a component, there are moments when you want to take the reins and tell it to refresh a certain part of the codebase. In this article, we will explore this in more detail. Understanding React’s rendering behavior Let’s take a closer look at how React’s rendering process works by default. To understand when and why you might need to nudge React into re-rendering, you need to get familiar with its underlying architecture. At the heart of  React’s rendering  magic lies the Virtual DOM. Imagine it as a clone of the actual DOM, the structure of your webpage. React uses this Virtual DOM to figure out what needs to be updated when your data ch...
Read more

Q: Error Boundary in React that catches an error and displays a fallback UI

ErrorBoundary Component : This catches errors in its child components and displays a fallback UI ( Something went wrong. ). MyComponent : This component intentionally throws an error to demonstrate how the error boundary works. App Component : Wraps  MyComponent  with  ErrorBoundary  to catch and handle errors  When you run this code, you'll see "Something went wrong." displayed on the screen because MyComponent throws an error, which is caught by the ErrorBoundary .  CREATING SAMPLE: Let's create a simple example of an error boundary in React that catches an error and displays a fallback UI when an error occurs in a component. 1.ErrorBoundary Component import React , { Component } from " react " ; class ErrorBoundary extends Component {   constructor ( props ) {     super ( props ) ;     this . state = { hasError : false } ;   }   static getDerivedStateFromError ( error ) {     ...
Read more