React JS Interview Questions for Freshers

1. What is React JS?

React JS is a front end JavaScript library for developing complex and interactive web and mobile UI with reusable components by Facebook. It has huge ecosystem of libraries to choose the tools, libraries. architecture based on the requirements.

2. Write the features of React JS?

JSX
Data rendering
One way data binding
Virtual DOM

3. What are the advantages of React?

Reusable components
Easy and effective creation of dynamic web applications
Performance enhancement
Flexible JavaScript library with handy tools

4. What is JASX?

JASX stands for JavaScript XML.JSX is a syntax extension to JavaScript which is similar to XML/HTML like syntax used by React that helps to put HTML into JavaScript.

5. What is virtual DOM?

The virtual DOM is a programming concept where the virtual representation of a UI is kept in memory and synced with the real DOM by a library such as React DOM.

6. Difference between React and angular?

Angular is an open-source JavaScript framework that is written in TypeScript. It uses one way binding and Virtual DOM.

React is an open-source JavaScript library based on JSX and JavaScript. It uses two way binding and real DOM.

7. How to create components in React?

To create a React component, include the extends React.Component statement. It creates an inheritance to React.Component, and gives the component access to React.Component’s functions. The component also requires a render() method, this method returns HTML.

8. What is the difference between element and component?

React Element is a simple object that describes a DOM node and its attributes or properties as per our requirement. It is an immutable description object and any method cannot be applied on it. React Component is a function or class that accepts an input and returns a React element.

9. What is the purpose of render () in React?

The React DOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

10. What is a state in React?

The state is an instance of React Component Class that can be defined as an object of a set of observable properties that control the behavior of the component. It is mutable and accessed via this.state().

11. What is an event?

React can perform actions based on user events. An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizing.

12. What are pure components?

Pure Components are the components which do not re-render when the value of state and props has been updated with the same values. If the value of the previous state or props and the new state or props is the same, the component is not re-rendered.

13. What is the difference between state and props?

The key difference between props and state is that state is internal which means owned locally and controlled, updated by the component itself while props are external, read only, owned by a parent component and controlled by whatever renders the component.

14. What is React fiber?

React Fiber is the new reconciliation algorithm which is an ongoing reimplementation of React’s core algorithm and uses stack internally. The goal is to increase its suitability for areas like animation, layout, and gestures with incremental rendering.

15. What is reconciliation?

Reconciliation is the process through which React updates the DOM. React has to calculate if it is necessary to update the DOM when a component’s state changes. It does this by creating a virtual DOM and comparing it with the current DOM.

16. What are keys in React?

A Key is a special string attribute needed to include when creating lists of elements in React. Keys helps to identify which items in the list are changed, updated, or deleted.

17. What are error boundaries?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. It catches errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

18. What are the different lifecycle methods In React?

Lifecycle methods are called the component’s lifecycle methods and are invoked in a predictable order. It can be split in four phases: initialization, mounting, updating and unmounting.

19. What is Redux and its core principles?

Redux is a predictable state container designed to write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.

Single source of truth which means the global state is stored in an object tree within a single store. State is read-only. Emit an action to change the state. Changes are made with pure functions.

20. How to set state with a dynamic key name?

setState( { event.target.id : event. target. value } ); } where event.target.id is used as the state key to be updated.

21. What are portals in React?

React Portal is a most common use case which helps to render child components into a DOM node outside of the parent DOM hierarchy defined by the component tree hierarchy.

22. What does trend analysis mean?

A trend analysis is an aspect of technical analysis that tries to predict the future movement of a stock based on past data.

23. How to pass data between react components?

Pass data from parent to child using props.
Pass data from child to parent employing callbacks.
Pass data among siblings.

24. Differentiate Redux and Flux?

The primary difference of Flux vs Redux is that Flux includes multiple Stores per app, but Redux includes a single Store per app. Rather than placing state information in multiple Stores across the application, Redux keeps everything in one region of the application.

25. What is a React Router?

React Router is a standard library for routing that enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

26. What is the use of the react DOM package?

The react-DOM package provides DOM-specific methods that can be used at the top level of the applications with methods like render(), hydrate().

27. Differentiate between react routing and conventional routing?

In conventional routing, each view corresponds to a new file with navigation with URL changes using Http request whereas in react routing, only single HTML page is involved with only changes in history attributes.

28. What are the limitations of React?

React is not a full-blown framework
Its library is very large and time taken to understand
It can be little difficult to understand
Coding gets complex as it uses inline templating and JS

29. Why can’t browsers read JSX?

Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. So to enable a browser to read JSX, we need to transform a JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

30. “In React, everything is a component.” Explain?

Components are the building blocks of a React application’s UI which can split up the entire UI into small independent.

31. What is dynamic import?

The dynamic import() syntax is a ECMAScript proposal not currently part of the language standard. It is expected to be accepted in the near future. You can achieve code-splitting into your app using dynamic import.

32. What are loadable components?

If you want to do code-splitting in a server-rendered app, it is recommended to use Loadable Components because React.lazy and Suspense are not yet available for server-side rendering. Loadable lets you render a dynamic import as a regular component.

33. What is render hijacking in react?

The concept of render hijacking is the ability to control what a component will output from another component. It actually means decorating your component by wrapping it into a Higher-Order component. By wrapping you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually enable hijacking, but by using HOC you make your component behave in a different way.

34. What are synthetic events in React?

Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event that combine the behavior of different browsers into one API. This is done to make the events show consistent properties across different browsers.

35. What do you understand by refs in React?

Refs is the short form for References in React which is an attribute which helps to store a reference to a particular React element or component that can be returned by the components render configuration function.

36. How are forms created in React?

React forms are similar to HTML forms but the state is contained in the state property of the component and is only updated via setState(). Thus the updation of the state is done using their submission by a JavaScript function.

37. What are Higher Order Components (HOC)?

Higher Order Component is an advanced way of reusing the component logic. These are custom components which wrap another component within it that can accept any dynamically provided child component.

38. What can you do with HOC?

HOC can be used for many tasks like:

Code reuse, logic and bootstrap abstraction
Render high jacking
State abstraction and manipulation
Props manipulation

39. Explain Flux

Flux is an architectural pattern which enforces the unidirectional data flow that controls derived data and enables communication between multiple components using a central Store.

40. List down the components of Redux.

Action – object that describes what happened.
Reducer – a place to determine how the state will change.
Store – State/ Object tree of the entire application is saved in the Store.
View – Simply displays the data provided by the Store.

41. Explain the role of Reducer.

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. It takes in the previous state and action and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values.

42. What is the significance of the Store in Redux?

A store is a JavaScript object that holds the application’s state and provides a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store.

43. What are the advantages of Redux?

Advantages of Redux are listed below:

Predictability of outcome
Maintainability
Server-side rendering
Developer tools

44. What is prop drilling?

Prop Drilling is the process that helps to pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

45. What is Shallow Renderer in React testing?

Shallow rendering helps to render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. It is useful for writing unit test cases in React.

46. What is the use of refs?

The ref is used to return a reference to the element. It can be useful when you need direct access to the DOM element or an instance of a component. It can be created using React.createRef() method and attached to React elements via the ref attribute.

47. What is Lifting State Up in React?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. If two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

48. What is context?

Context provides a way to pass data through the component tree without having to pass props down manually at every level. const {Provider, Consumer} = React.createContext(defaultValue)

49. What is ReactDOMServer?

The ReactDOMServer object enables rendering components to static markup which is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:

renderToString()
renderToStaticMarkup()

50. What are React Mixins?

Mixins are a way to totally separate components to have a common functionality. It should not be used and can be replaced with higher-order components or decorators. One of the most commonly used mixins is PureRenderMixin.

Request more information

React JS Interview Questions for Freshers