React JS Interview Questions for Experienced – 5 yrs

1. Explain strict mode in React?

Strict Mode is a tool for highlighting potential problems in an application. It does not render any visible UI. It activates additional checks and warnings for its descendants.

2. Difference between controlled and uncontrolled components?

In a controlled component, form data is handled by a React component which allows validation control whereas in uncontrolled components, form data is handled by the DOM itself and use a ref to get form values from the DOM.

3. How to prevent re-renders in React?

React shouldComponentUpdate is a performance optimization method that helps to avoid re-rendering a component, even if state or prop values may have changed which returns a boolean value.

4. What will happen if you use props in the initial state?

If the props on the component are changed without the component being refreshed, the new prop value will never be displayed because the constructor function will never update the current state of the component. The initialization of state from props only runs when the component is first created.

5. How to use innerHTML in React?

The dangerouslySetInnerHTML attribute is React’s replacement for using innerHTML in the browser DOM. It is risky to use this attribute considering cross-site scripting (XSS) attacks, pass a __html object as key and HTML text as value.

6. What are the Pointer Events supported in React?

Pointer Events provide a unified way of handling all input events. Many devices are used nowadays that don’t correlate with a mouse, like phones with touch surfaces or pens. So we need to remember that these events will only work in browsers that support the Pointer Events specification.

7. What is the difference between setState() and replaceState() methods?

The current and previous states are merged when we use setState() . replaceState() throws out the current state, and replaces it with only what you provide. Usually setState() is used unless you really need to remove all previous keys for some reason. You can also set state to false/null in setState() instead of using replaceState().

8. Why is a component constructor called only once?

React’s reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it’s the same component as before, so reuses the previous instance rather than creating a new one.

9. Is it possible to use async/await in plain React?

If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.

10. What are the popular packages for animation?

React Transition Group and React Motion are popular animation packages in the React ecosystem.

11. What is the benefit of style modules?

It is recommended to avoid hard coding style values in components. Any values that are likely to be used across different UI components should be extracted into their own modules.

12. What are the popular React-specific linters?

ESLint is a popular JavaScript linter. One of the most common for React is an npm package called eslint-plugin-react. By default, it will check a number of best practices, with rules checking things from keys in iterators to a complete set of prop types.

13. How is React Router different from a history library?

React Router is a wrapper around the history library which handles interaction with the browser’s window.history with its browser and hash histories. It also provides memory history which is useful for environments that don’t have global history, such as mobile app development and unit testing with Node.

14. What is the purpose of push () and replace() methods of history?

Push (), replace() are the methods for navigation purpose in the history instance. Push () will add a new location to the array and replace() will replace the current location in the array with the new one.

15. How to get query parameters in React Router v4?

The ability to parse query strings was taken out of React Router v4 because there have been user requests over the years to support different implementation. So the decision has been given to users to choose the implementation they like.

16. How to pass params to history.push method in React Router v4?

While navigating you can pass props to the history object using push method by specifying the path name and get the response through state. The search property is used to pass query params in push() method.

17. What are the two ways of formatting in React Intl?

The library provides two ways to format strings, numbers, and dates:

Using react components
Using an API

18. How to format dates using React Intl?

The injectIntl() higher-order component will give access to the formatDate() method via the props in the component. It is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

19. What is the TestRenderer package in React?

This package provides a renderer that can be used to render components to pure JavaScript objects, without depending on the DOM or a native mobile environment. This package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a ReactDOM or React Native without using a browser or jsdom.

20. Can I dispatch an action in the reducer?

Dispatching an action within a reducer is an anti-pattern. Your reducer should be without side effects, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

21. How to use FormattedMessage as placeholder using React Intl?

The Formatted… components from react-intl return elements, not plain text, so they can’t be used for placeholders, alt text, etc. In that case, you should use lower level API formatMessage(). You can inject the intl object into your component using injectIntl() higher-order component and then format the message using formatMessage() available on that object.

22. What is the purpose of the ReactTestUtils package?

ReactTestUtils are provided in the with-addons package and allow to perform actions against a simulated DOM for the purpose of unit testing.

23. How to store outside a component?

To access the Redux store, export the store from the module where it was created with createStore().

store = createStore(myReducer) export default store

24. What are the drawbacks of the MVW pattern?

DOM manipulation is very expensive which causes applications to behave slow and inefficient. Due to circular dependencies, a complicated model was created around models and views.

25. What is the proper way to access the Redux store?

The best way to access Redux stores in a component is to use the connect() function, that creates a new component that wraps around the existing one. This pattern is called Higher-Order Components, and is generally the preferred way of extending a component’s functionality in React.

26. What is the difference between component and container in React Redux?

Component is a class or function component that describes the presentational part of the application whereas container is an informal term for a component that is connected to a Redux store and subscribes to Redux state updates and dispatch actions.

27. What are the advantages of React over Vue.js?

Easier to test with more flexibility in large apps developing.
Suitable for mobile apps creating.
More information and solutions available.

28. Can Redux only be used with React?

Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.

29. In which scenarios error boundaries do not catch errors?

The cases in which error boundaries doesn’t work are,

Inside Event handlers
Asynchronous code using setTimeout or requestAnimationFrame callbacks
During Server side rendering
When errors thrown in the error boundary code itself

30. What is the behavior of uncaught errors in react 16?

In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.

31. What is the required method to be defined for a class component?

The render() method is the only required method in a class component. i.e, All methods other than render method are optional for a class component.

32. What are the methods invoked during error handling?

Below methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

static getDerivedStateFromError()

componentDidCatch()

33. What is the browser support for react applications?

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10. If you use es5-shim and es5-sham polyfill then it even support old browsers that doesn’t support ES5 methods.

34. What is the benefit of strict mode?

Identifying components with unsafe lifecycle methods.
Warning about legacy string ref API usage.
Detecting unexpected side effects.
Detecting legacy context API.

35. What is NextJS and major features of it?

Next.js is a popular and lightweight framework for static and serverrendered applications built with React. It also provides styling and routing solutions. Below are the major features provided by NextJS.

Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)

36. How React Uses the Virtual DOM

When a component’s state or props change, React creates a new virtual DOM tree.
It then compares this new virtual DOM with the previous one using a process called reconciliation.
This comparison finds the minimal number of changes needed to update the real DOM (this process is called diffing).
After the differences are identified, React applies only the necessary updates to the real DOM, making the UI updates efficient.

37. What is React memo function?

If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways,

Throttling
Debouncing
RequestAnimationFrame throttling

38. What are the conditions to safely use the index as a key?

There are three conditions to make sure, it is safe use the index as a key.

The list and items are static– they are not computed and do not change.
The items in the list have no ids.
The list is never reordered or filter.

39. What are the advantages of formik over redux form library?

The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary.
Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps.
Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB.

40. Explain the concept of middleware in Redux and how it can be used to handle asynchronous actions.

Middleware in Redux provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It allows you to add custom logic to the dispatch process. The most common use case is handling asynchronous actions, such as API calls.

Asynchronous Actions: By default, Redux actions are synchronous, meaning they cannot handle API requests or other async operations. To handle async operations, we use middleware like redux-thunk or redux-saga.

Redux-Thunk allows action creators to return a function instead of an action object. This function gets the dispatch and getState methods as arguments, enabling async logic.

41. What is the purpose of the connect function in Redux?

The connect function is a higher-order function provided by react-redux that connects a React component to the Redux store. It allows a component to access the Redux store’s state and dispatch actions without passing props through every component in the hierarchy.

connect works by taking two arguments:

mapStateToProps: Maps the state from the Redux store to props for the component.

mapDispatchToProps: Maps dispatchable actions to the component’s props.

42. What is the difference between useSelector and connect in Redux, and when would you use one over the other?

useSelector and connect are both ways to access the Redux store in React, but they differ in usage and philosophy.

connect: A higher-order function that wraps a component and provides the necessary state and dispatch as props. It is the older, more traditional way to integrate Redux with React and is used in class components or functional components.

useSelector: A hook introduced in React-Redux v7.1 that allows you to access the Redux store directly in functional components. It’s used within React function components to subscribe to a part of the Redux state.

Key differences:

useSelector provides a simpler syntax and is used primarily with functional components. It also allows you to extract specific pieces of state in a more granular way, potentially improving performance.

connect can perform optimizations by preventing unnecessary re-renders, but it’s more verbose and better suited for class-based components.

const items = useSelector((state) => state.items);

43. How would you optimize a React-Redux app where many components re-render unnecessarily when the Redux store updates?

Optimizing unnecessary re-renders in a React-Redux app involves several strategies:

Use connect and mapStateToProps smartly: Ensure that mapStateToProps only returns the minimal part of the state that the component needs. Avoid passing the entire state to the component unless necessary.
Use useSelector with shallow comparison: By default, useSelector uses strict reference equality to determine if a re-render is necessary. If the part of the state you’re selecting is a complex object, you can use memoization or custom equality functions.
Memoize selectors: Use a library like reselect to memoize computed values in selectors. This prevents unnecessary re-computation of derived data.
Use React.memo: This will memoize functional components and prevent re-renders unless the props change. It works well with connect as well as useSelector.
Component splitting: Break down large components into smaller components. This helps isolate re-renders to only the parts of the UI that need to be updated.

44. Can you explain how Redux’s combineReducers works?

combineReducers is a utility function in Redux that allows you to combine multiple reducers into a single reducer function. This is crucial in large applications where state is divided into multiple, logically separate parts.

For example, instead of writing a single massive reducer to handle every piece of state, you can break down your reducers based on different slices of state (e.g., user, posts, comments). Each reducer manages a specific slice of the state tree, and combineReducers merges them into a single state object.

const rootReducer = combineReducers({ user: userReducer, posts: postsReducer, comments: commentsReducer, });

45. How does Redux manage asynchronous actions?

Redux handles synchronous actions by default, but for asynchronous actions (like API calls), middlewares are needed. redux-thunk is a popular middleware that allows action creators to return functions instead of plain objects. This function receives the dispatch and getState functions as arguments, allowing it to dispatch actions after asynchronous operations.

For example:

export function fetchData() { return (dispatch) => { dispatch({ type: ‘FETCH_START’ }); fetch(‘/api/data’) .then(response => response.json()) .then(data => dispatch({ type: ‘FETCH_SUCCESS’, payload: data })) .catch(error => dispatch({ type: ‘FETCH_ERROR’, error })); }; }

46. What is the purpose of the reselect library in Redux?

reselect is a library for creating memoized selectors, which allows efficient extraction of data from the Redux store. Without reselect, every time the store changes, selectors might re-run unnecessarily, even if the data hasn’t changed, leading to performance issues.

47. Explain how to structure a large-scale Redux application.

In large-scale Redux applications, maintaining a clean and modular structure is crucial. One of the common patterns is the ducks pattern, where actions, action creators, and reducers are kept in the same file to make each module self-contained. It is important to split reducers based on features or domains to prevent a monolithic store.

48. What are the key differences between Redux Toolkit and traditional Redux?

Redux Toolkit (RTK) is an opinionated set of tools that simplifies the development process in Redux by providing best practices and reducing boilerplate code. Some key differences include:

Reducers: In traditional Redux, reducers are written with immutable patterns using switch statements, which can lead to verbose and error-prone code. RTK’s createSlice allows you to write reducers with mutable patterns thanks to the use of immer, simplifying the code.

Thunks: RTK includes createAsyncThunk, which makes it easier to handle async logic without manually managing loading, success, and error states.

Boilerplate Reduction: RTK automatically configures the store with sensible defaults (like including redux-thunk and redux-devtools).

Development Tools: RTK has built-in development tools like createEntityAdapter for managing normalized state.

Redux Toolkit is preferred in modern applications because it abstracts complex configurations and reduces the amount of code needed, improving developer productivity and reducing errors.

49. How can you handle state normalization in Redux?

State normalization refers to storing data in a flat, relational-like structure to avoid deep nesting and duplication of entities in the Redux store. Normalizing the state makes it easier to update, retrieve, and manage data. You can normalize state using libraries like normalizr, or with manual object maps where entities are stored by their IDs.

50. What are the benefits of state normalisation?

Benefits of state normalization:

Easier updates: When data is normalized, updating an entity can be done in one place without risking inconsistencies across the app.

Efficient lookups: Data can be accessed quickly using IDs.

Consistency: Normalization prevents data duplication, reducing errors caused by out-of-sync state.

Request more information

React JS Interview Questions for Experienced – 5 yrs