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.

======= 

  1. I take 2-3 interviews per week on average for react devs. The most common one I ask my candidates is this:
  2. Explain how react works under the hood to me like I'm 5 yr old
  3. What problem did react come to solve?
  4. What are composable components?
  5. How do you separate logic and style?
  6. What are the security measures to be taken to avoid data leak in frontend TYPESCRIPT specific
  7. How do you validate form input data 
  8. How do you design typesafe components GENERAL
  9. what are accessible components, how do you design them ?
  10. 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

  1. How do you make API calls in a React application and handle the response data?
  2. What is the best practice for calling multiple APIs and manipulating the data before displaying it to the user?
  3. How do you handle asynchronous data fetching in React components?
  4. What is the purpose of the useEffect hook and how do you use it to fetch data from an API?
  5. API Design and Architecture
  6. What are some common architectural styles for creating web APIs?
  7. How do you design a RESTful API and what are the key principles of REST?
  8. What is the difference between a web API and a web service?
  9. How do you handle versioning in a web API?
  10. API Documentation and Testing
  11. What is the purpose of API documentation and what are some common templates used?
  12. How do you write unit tests for API endpoints using a testing framework like Jest or Supertest?
  13. How do you handle authentication and authorization in a web API?
  14. What are some common security vulnerabilities in web APIs and how do you mitigate them?
  15. API Consumption and Integration
  16. How do you consume a web API in a React application and handle errors?
  17. What is the difference between using relative and absolute URLs when making API calls?
  18. How do you handle rate limiting and throttling when consuming a web API?
  19. What is the purpose of API keys and how do you manage them in a React application?
  20. Promises and Async/Await
  21. How do you implement a promise-based API in JavaScript?
  22. What is the purpose of the Promise.all() method and how do you use it?
  23. How do you handle errors and exceptions when using promises?
  24. What is the difference between process.nextTick() and setImmediate() in Node.js?
  25. Remember to practice explaining your answers clearly and concisely, and be prepared to discuss real-world examples and best practices. Good luck with your interview!
--------------3---------------------

 Here are some key React.js interview questions for a developer with 3 years of experience, covering the topics you mentioned and more:


Basics

  1. What is the purpose of React and its core concepts?
  2. Explain the virtual DOM and how it works in React.

  4. What are the different lifecycle methods in React and when are they called?
  5. Explain the difference between functional and class components.

  7. What is JSX and how does it work in React?
  8. State Management
  9. How do you manage state in React? Explain the useState hook.

  11. What is the difference between state and props in React?
  12. How do you pass data between components in React?
  13. What is the purpose of the useEffect hook and when should you use it?
  14. Routing
  15. How do you implement routing in a React application?
  16. What is the difference between BrowserRouter and HashRouter in React Router?
  17. How do you pass parameters to routes in React Router?
  18. Performance Optimization
  19. How do you optimize the performance of a React application?
  20. What is the purpose of memoization in React and how do you use it?
  21. How do you implement code splitting in a React application?
  22. What is the purpose of the shouldComponentUpdate lifecycle method and how do you use it?
  23. Testing
  24. How do you write unit tests for React components using a testing framework like Jest or Enzyme?
  25. What is the purpose of snapshot testing in React and how do you implement it?
  26. How do you test user interactions and events in React components?
  27. Cross-Browser Compatibility
  28. How do you ensure that your React application is compatible across different browsers?
  29. What are some common issues that arise when developing for different browsers and how do you address them?
  30. How do you handle vendor prefixes and polyfills in a React application?
  31. Event Handling
  32. How do you handle events in React components?
  33. What is the purpose of the synthetic event object in React and how do you use it?
  34. How do you bind event handlers in React components?
  35. Security
  36. How do you prevent cross-site scripting (XSS) attacks in a React application?
  37. What is the purpose of the dangerouslySetInnerHTML prop in React and how do you use it safely?
  38. How do you handle user input and prevent injection attacks in React forms?
  39. Additional Questions
  40. How do you handle asynchronous data fetching in React components?
  41. What is the purpose of the context API in React and how do you use it?
  42. How do you implement server-side rendering (SSR) in a React application?
  43. What is the purpose of the React.memo higher-order component and how do you use it?
  44. How do you handle errors in a React application and what is the purpose of the ErrorBoundary component?
  45. Remember to practice explaining your answers clearly and concisely, and be prepared to discuss real-world examples and best practices. Good luck with your interview!
------------------4------------------------
Here is my own checklist I'm using when interviewing candidates, perhaps will be helpful for you to structure the subject. Then I suggest you to make a written notes. After all you might not know something, but the core stuff and ability to think is a must.

General
When do components re-render?
When props change, state changes, or the parent re-renders.
How are key attributes used in reconciliation?
Elements of the same type with the same key attributes in an element subtree are assumed to be unchanged.
What is StrictMode?
Works only in development, shows deprecated APIs, runs effects twice.
How does React.SyntheticEvent differ from a browser event?
React SyntheticEvent provides a consistent interface for handling events across different browsers, improves performance through event pooling and event delegation, and simplifies event handling with automatic binding.
What is event delegation?
Follow-up question related to React SyntheticEvent.

Context
What are the differences between Context and Redux?
How to consume multiple contexts?
Context vs Redux
Pros: Lighter bundle, easier setup, can be migrated to Redux.
Cons: Less features out of the box, no selector API, performance, and security issues (context ref is passed to every dependent object).
JSX
What is JSX fundamentally?
React.createElement(component, props, children).
Is it closer to JavaScript or HTML?
Can one write React without JSX?

Components 
How to declare a React component?
Why does one need to use a capital first letter when naming a component?
All React components must act like pure functions with respect to their props.

Code-splitting
How to dynamically import modules?
What are the limitations of Suspense and React.Lazy?
  No SSR, only default exports.

Performance Optimization
Long lists virtualization
Avoid reconciliation
Two components of different types produce different trees, key attributes are used to preserve unmodified components.
Pure components, React.memo
Memoization

Portals
What is it? Used for?
Does it support event bubbling?

Profiling
What is Profiler?
What happens in prod build?

Refs
When do we need refs?
How to pass a ref through a component to one of its children?
Using forwardRef.

Render Props 
What is it?
Technique to share code between components using a prop whose value is a function.
Use cases
renderHeader, renderItem, renderRow.

Strict Mode
What is it used for?
Unsafe lifecycles, deprecated APIs, unexpected side effects.
What happens in prod build?

Uncontrolled Components
What is it?
Form data handled by the DOM, not by React.
How to specify the initial value to uncontrolled input?
defaultValue attribute.

Web Components
How to use WC in React?
How to use React in WC?

Hooks
How to emulate lifecycle methods in FC?
How to store complex state with hook?
When to use useCallback?
When to use useLayoutEffect?
Custom hooks: Do two components using the same hook share the state?

New React Features
Concurrency
Transition API
Batched updates

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

  • Soft questions:

    • How do you deal with conflicts?

    • What role(s) do you take in a team?

    • Strengths/weaknesses (in some form)

    • Tell me about a stressful situation you experienced, what did you learn from it?

    React questions (junior to senior):

    • Describe how to use useState.

    • What happens with a component when it receives new props?

    • How can you share a state between multiple components?

    • Do you have to use React with JSX?

    • What is the difference between a controlled and uncontrolled component/input/element/form?

    • What is the VDOM (Virtual DOM)?

    • What are some common pitfalls when doing data fetching?

    • Describe the usage and pitfalls of useEffect (open discussion).

    JS Questions (junior to senior):

    • What is the difference between let and const?

    • What is a callback, when would you use one?

    • What is the difference between == and ===?

    • What is hoisting?

    • What is a closure?

    • What is the event loop?

    • When is it a good idea to use a class (open discussion).

    These are some from the top of my head, questions I have been asked or asked candidates during interview

Comments

Post a Comment

Popular posts from this blog

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