Reactjs interview question

Q) Reconciliation?
Reconciliation is the process through which React updates the DOM. When a component’s state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component.
 
 Q) shouldComponentUpdate method return Boolean value ?
shouldComponentUpdate method return Boolean value that specifies whether React should continue with the rendering or not.
By default value is true.
when to use shouldComponentUpdate: when you want that your components do not render when your previous state value is equal to next state value

Q)What is Virtual DOM. Explain its concept.?

Q) lifecycle methods?
Q) which method first between componentdidmount (or) render?

Q) how to define context api and consume it?
Q) how to useEffect for different lifecycle methods?
Q)What are lifecycle methods.?
Q) Functional components and React hooks?

Q) Difference between functional and class component.?

Q) Redux concept?

Q) What are fragments?
fragments! React fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM. So basically we use React.Fragment where we would normally use a wrapper div.
Q) UseMemo and usecallback?
A)Both useCallback and useMemo are react hooks used in functional React components. You probably already know and use the more common hooks like useState and useEffect, but the most common difference between useMemo and useCallback and other hooks is memoization. These two hooks are used to handle performance between renders.
The fundamental difference between React useMemo vs useCallback is simple. useMemo returns a memoized value, and useCallback returns a memoized callback.
Memoization is complicated. It’s similar to a cache for the value returned from a function. When the function is run, it remembers what the results were from when you originally ran it. So, when you need to run the function again with the same arguments, it will give you back the result that was memoized or remembered from the beginning.
Think of it as storing the results from a function in a variable and then using the variable instead of calling the function each and every time.
Why Use useCallback and useMemo?
 
When you have created a function or a variable in your component and it gets rerendered, the values will be lost until you pass it to the next render. This is what useMemo and useCallback do so that the results and functions don’t get called again and again. Using these hooks is much simpler and easier than trying to create your own version of this. That being said, you wouldn’t use this for simple functions. You should also consider the lifespan of your app. Most React applications run every time you refresh your browser, so it’s a very short amount of time. There isn’t much to gain from remembering a simple value.
 
The Difference between useCallback and useMemo
 
Let’s break down the differences between React useCallback vs useMemo. Both hooks accept a function and an array of dependencies. However, useMemo will memoize the value that is returned, but useCallback will memoize the function.
 
If you have a complex and resource-heavy piece of code that takes a long time to run, accepts arguments and returns a value, you need to use useMemo. useMemo will help you reference the value without re-running the code again between renders until the arguments change. Similarly, if you need a function to persist between renders, you will deploy useCallback. useCallback will remember the instance of that function. (It’s similar to creating a function outside the scope of your React component).
 
The benefit of useMemo and useCallback is that you gain a little performance boost, because it eliminates the need to use extra function calls. However, these hooks come with underlying code. Even though your function gets called less, useMemo or useCallback will be called on every render, because you are adding an additional function on your React component. This code needs to run in order to determine whether or not to run your function to arrive at a new value. It could happen that the code needed in memoizing your function/value can be much larger than the code in your own function. You’ll have to make a call each time, but it’s best to avoid using useMemo and useCallback unless you are working with really resource-heavy functions and can’t optimize or reduce the number of times it will be called.
 
Don’t use useMemo or useCallback instead of a bug fix, either. If your component is being rendered more often than it ought to be, you should look for the root cause of the error instead of trying to work around the issue with hooks.
Q) Array dependencies?
Dependency arrays are a concept that is tightly coupled to hooks in React (thus also to function components).

Some hooks, like useEffect and useCallback have 2 arguments. The first one is a callback (a function), and the second one is the dependency array. It takes the form of an array of variables.

In the following example, [counter] is the dependency array of the useEffect hook:
useEffect(() => {
  console.log('Counter has value: ', counter);
}, [counter]);
The React hooks that have dependency arrays are:
useEffect
useLayoutEffect
useCallback
useMemo
useImperativeHandle (which is a super rare hook that you almost never use and shouldn't care too much about)

Q)Explain props drilling in diagrams

Q)Usecontext vs redux

Q)Redux reducer

Q)Redux code?
const initialState = [
  { id: 0, name: "sample", number: 1234567890, email: "sample@gmail.com" }
];
const contactReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_CONTACT":
      state = [...state, action.payload];
      return state;
    case "UPDATE_CONTACT":
      const updateState = state.map((contact) =>
        contact.id === action.payload.id ? action.payload : contact
      );
      state = updateState;
      return state;
    case "DELETE_CONTACT":
      const filerContacts = state.filter(
        (contact) => contact.id !== action.payload && contact
      );
      state = filerContacts;
      return state;
    default:
      return state;
  }
};
export default contactReducer;
React file structure

Q)What is reducer?
Reducers, as the name suggests, take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.
So reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state.

Q) DOM.?

Q) method over loading?

Q) method over lapping?

Q) ref?