Advance React Interview Question and Answer

1. controlled vs uncontrolled component

In React, there are two types of form inputs: Controlled Components and Uncontrolled Components.

Controlled Components:
In a controlled component, the form data is handled by the state within the component. The state within the component serves as the "single source of truth" for the input elements.

Uncontrolled Components:
In an uncontrolled component, the form data is handled by the DOM itself. This means that instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

Here's an example of an uncontrolled component in React:

   const UncontrolledForm {
       const input = React.createRef();

     handleSubmit(event) {
       alert('A name was submitted: ' + input.current.value);
       event.preventDefault();
     }


       return (
         <form onSubmit={handleSubmit}>
           <label>
             Name:
             <input type="text" ref={input} />
           </label>
           <input type="submit" value="Submit" />
         </form>
       );
   }

2. useReducer, Why we need it?
Ans:-

lets say we have lots of state we need to manage,in this scenario rather than polluting our code base we can use the useReducer.
Alternatively we can use custom hooks to have the logics in separate file.
context API

Example :-

const [state, dispatch] = useReducer(reducer, initialState);

// How we can change something,

dispatch({type: 'ADD', payload: 100});

// reducer file

export const reducer = (state = initialState, action) => {
switch(action.type) {
  case 'ADD':
   // ... Do your Operation
   break;
 case 'MUL':
   // ... Do your Operation
   break;
default:
return state;
}
}

3. In Which scenarios Error Boundaries don't reach Error?

Ans:-

Inside Event Handler
Asyn code
During server-side rendering
When Error Yhrough in the error Boundary code it self.

4. Drawback of Context
Ans:- Added a separate article on the same
https://dev.to/ashutoshsarangi/performance-impact-using-context-api-2eka

5. Redux toolkit
Ans:- We can refer to the Official document, it is self-sufficient
https://redux-toolkit.js.org/tutorials/quick-start

6. Why we need thunk / any middleware

Ans:-

Thunk allows action creators to handle asynchronous operations, and dispatch actions when those operations are completed.

function fetchUser(id) {
    return (dispatch) => {
        dispatch(fetchUserRequest(id));

        return fetch(`/api/users/${id}`)
            .then(response => response.json())
            .then(
                user => dispatch(fetchUserSuccess(id, user)),
                error => dispatch(fetchUserFailure(id, error))
            );
    };
}

7. Slice, in redux toolkit

https://redux-toolkit.js.org/api/createAsyncThunk
https://redux-toolkit.js.org/api/combineSlices
https://redux-toolkit.js.org/api/createSlice

8. How JSX Prevents Injection Attack?
Ans:-

React dom escapes any value embedded in jsx, before rendering them.
Thus it ensures that you can never inject anything that's not explicitly written in your application.
Everything is converted to a string before being rendered.

9. <></> vs React.Fragment

Ans:- as we see above we can pass key attribute in Fragment not <>.

10. Axios Request and response interceptor

Ans:-

In Axios, interceptors are functions that Axios calls for every request. You can use interceptors to modify the request before it is sent, or to handle the response data before it is returned to the caller.

Example

import axios from 'axios';

// Create a custom axios instance
const instance = axios.create({
    baseURL: 'https://your-api-url.com'
});

// Add a request interceptor
instance.interceptors.request.use((config) => {
    // Do something before request is sent
    // For example, add your auth token to the request
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
}, (error) => {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use((response) => {
    // Do something with response data
    // For example, you can extract and return only the needed data
    return response.data;
}, (error) => {
    // Do something with response error
    // For example, you can handle specific HTTP error codes
    if (error.response.status === 401) {
        console.log('Unauthorized, logging out ...');
        // Logout or redirect to login page
    }
    return Promise.reject(error);
});

Blog

Advance React Interview Question and Answer

Ashutosh Sarangi

Join Our Newsletter. No Spam, Only the good stuff.

Related