reactjs questions---https://bigfrontend.dev/react-quiz

https://bigfrontend.dev/react-quiz
1. Can you explain a novice the difference between state and props?
2. When will you use state, context, and external state manager?
3. How do you decide when to split a component into subcomponents?
4. How do you handle API and what techniques you'll use when you've call APIs upfront vs when it's called based on user action?
5. What goes in hooks for you? (Intentional open ended question)
6. Why props is needed to be immutable?
7. What is the difference between controlled and uncontrolled component?
-----------------------------------------------------------------------------------------------------------------
I'm a Senior Full Stack Engineer and recently just gave an interview for hiring a new dev on our team 💀 Some example general questions:
11. Are you familiar with the rules of hooks in React?
12. How would one optimise the performance of React contexts to reduce rerenders?
13. How do you ensure that a component can be unit tested?
14. what benefits do functional components provide vs class components?
15. what are the use cases for using useCallback, useMemo and useEffect?
16. How would you reference and interact with a DOM element in React without the use of document functions such as getElementById or querySelector?
17. Explain and tell me the difference between render props, higher order components, prop getters. What problem are they trying to solve?
18. React 18 introduced some changes to strict mode when in development mode, what are they and what is their purpose?
19. how would you set the state in a callback based on the current value of that state, without adding it to a dependency array?
20. How would you ensure that separate state changes are triggered in a synchronous manner?
21. when testing a component, what knowledge should the component have or not have? How do you ensure it's a unit test and not an integration test?
22. What do you think about test coverage as a metric for test quality?
23. How would you split a component to encapsulate business logic and presentation concerns? How would the tests for these look like?
24. Why is lifting state up a bad practice?
25. What can you tell me about composability vs inheritance in React?
26. If you had a Web application written in an old frontend framework for example, what strategy would you take to migrating that application to React?
27. what is the difference between a primitive and non-primitive value in JavaScript, and how would you handle extra rerender caused by having non-primative values in a dependency array in the various hooks React has to offer?
28. what is the difference between useEffect and useLayoutEffect?
29. what reserved prop in React allows you to trigger a rerender in that component?
We also have a React coding assessment that they do beforehand, and we talk about what they did and they screen share their code:
30. if you had more time, what would you improve in your test?
31. How would you approach following SOLID principals to reduce the complexity of the god component you created?
32. what steps would you take to incorporate exception handling in your data fetching logic?
33. If a new requitement came in to implement a new type of modal, what changes would you make to you modal implementation to cater for it?
34. How would you eliminate memory leaks when dealing with your debounce function?
35. What approach would you take to avoid prop drilling down the component hierarchy to some deeply nested component?
36. If a new requirement came in to improve the performance of the list of data returned by the API, what approach would you take to alleviate pressure on the DOM?

----------------------------------------------3---------------------------------------------------------
FE conducting technical interviews here. If a candidate is proficient with React, I'm always looking for:

1. Familiarity with optimizing inputs (especially, inputs that transfer data to child components - how to reduce child re-renders).
2. Understanding when a component re-renders, and what are the ways to reduce re-rendering.
3. How to avoid memory leaks when working with asynchronous code (especially timeouts).
4. How useEffect works - in-depth, when it triggers, how it performs the equality check, which dependencies can be omitted, and why (this is often related to in-depth knowledge of react hooks such as useState).
5. Which fields (including hooks, and functions) change their memory reference once a component re-renders, and how to keep the initial reference using React core mechanisms.
6. Which fields (including hooks, and functions) change their memory reference once a component re-renders, and how to keep the initial reference using React core mechanisms.
7. Understanding throttling and debouncing. How could you implement debouncing using React hooks, and a callback approach? Differences between these two approaches? How could you utilize one of them to optimize code?

This can be summarized as I know you can code. I want to verify if you understand your tool well.
All of these areas are verified during the live coding exercise.
We don't do freshers' interviews often, but I'd ask for the same expecting much smaller input on their end.

--------------------------------------------4--------------------------------------------------------------
1 What is a synthetic event?
2 What is React fiber? Describe the idea of reconciliation.
3 is there anything you can do in class components that you cant do in functional ones?
4 how do you keep your apps performance on high level? What techniques can you use?
Some of the questions I received on my interviews :)

---------------------------------------------5--------------------------------------------------------------




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