reactjs questions part 2

 1 How memoization works, and when/why it should be used


2 The virtual DOM. What it is, and how React uses it to update the actual DOM


3 How keys are used in lists, and why they should be stable and unique


4 Describing the lifecycle of a React component


5 How useEffect actually works, and when you do and don't need to use it


6 How hooks work, and why you would want to encapsulate business logic in a custom hook


7 I would also be prepared to discuss dependency arrays (specifically for hooks that will produce side effect such as useEffect and custom hooks that update some value) and why you need to be very discerning with what you include in these arrays


8 I mention specific hooks because generally speaking, hooks that return a function or a computed value (useCallback/useMemo) should use exhaustive dependencies, whereas hooks that update something without direct user interaction need to be tightly controlled




* how to pass data btwn siblings, know how to fetch data and render to a list, be able to show where u can implement useCallback to improve your app, and be able to work w forms/formData like you know the back of ur hand.




Building on what others have said:


1 make sure you can articulate what instigates a component re-render. You’ll wanna be able to talk to different patterns that cause and can prevent excessive re-renders ie. component composition, memo, use/misuse of contexts, adjusting where state lives


2 have a thought through opinion of state management. Know all the tools of where state can live. At what point would you choose to introduce a context or a state management library. When/why should a particular state live in one place vs another


3 understand how useEffect and useLayoutEffect fit into the component render lifecycle. Know why you would choose one over the other. The official react docs have very good explanations so make sure you’ve read through and groked


4 make sure you understand and can articulate refs vs state. When/why you use one over the other to hold data and how that plays into component lifecycle.



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

It doesn't matter if you think you know the "fundamentals".


Can you demonstrate basic React knowledge and experience in 5 minutes.


Can you create a basic React app, components, props, state, etc. in 5 minutes? So that you can solve the tech interview assignment? While the interviewer is watching?

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

In my interview they asked me difference between pass by value and pass by reference, difference between class component and functional component, tools for debugging, how would i improve their legacy software step by step, dom, hydratation and memoization...

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

For a senior frontend position, I would ask almost no React questions. I would probe your understanding of the browser, cookies, security, DNS, the DOM, web components- and then system design questions relating to middle tier web architecture.. like URL shortener, or something similar with a piece on scaling.


Any position that asks really specific React domain questions isn’t actually looking for a senior dev.

-------x-----------


Q:If you have a parent component that has a useEffect, and it has a child component that also has a useEffect, in which order will the effects be executed ? In other words, which one will fire first, the one in the parent or the one in the child.

A:Child components’ effects fire first because React ensures that the child components are fully mounted and their effects have run before the parent’s effects execute. This makes sure that any effects that the parent relies on from its children are in place before the parent’s useEffect fires.

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


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