It is the second most loved framework according to Stackoverflow Developer Survey (2020).
This makes it a suitable library or framework to make a career in growth and learning.
We have divided the React JS interview questions into the below sections:
- What are the advantages and disadvantages of React.JS?
- What do you understand by an event in React.JS and how to create it?
- Explain the differences between real DOM and virtual DOM in React.JS.
- How can one prevent injection attacks in React?
- Explain the differences between stateful and stateless components in React.JS
- What is a state in React? How can we implement it?
- When would you use a Class Component over a Functional Component?
- Explain the differences between props and state in React.JS.
- Explain the differences between class and functional components in React.JS.
- What is HOC in React.JS?
- What are the methods which create a component lifecycle in React?
- Explain the ways to prevent a function from being called too quickly.
- What are the components of Redux in React.JS?
- What are the differences between Redux and Flux in React.JS?
- What are the advantages of Redux?
- Under what conditions would you consider using Redux with React?
React JS Basic Interview Questions
1. What are the advantages and disadvantages of React.JS?
Advantages of React.JS:
- Good learning curve: React.JS has a good online community and support is available for training and learning.
- Reusable: It is made of components which are combined with other components to provide reusability.
- SEO support: Provides SEO inclusion and hence supports businesses by better rankings.
- Better speed: Provides better speed through virtual DOM.
Disadvantages of React.JS
- Frequent changes: Technology is changing and upgrading at a fast pace, and therefore the programmer has to keep up with the learning process continuously.
- Documentation: There is no proper documentation available for React.JS due to frequent changes and upgrades in the technology. Therefore, the process of maintaining written documentation is a hassle.
- JSX increases complexity: Usage of JSX in React.JS increases the complexity and confusion for the new programmers. Therefore, they need to add this to their training schedule.
2. What do you understand by an event in React.JS and how to create it?
Event means reactions after a user action, e.g. mouse click, mouse hover, double click, keypress, etc. Handling events is similar to handling HTML DOM(Document Object Model) events. The difference is that in React.js we use JSX and pass the function as ‘event handler’. Also, we cannot pass ‘false’ as a return value to stop default behaviour, we specifically need to call ‘preventDefault()’. Find out more about React.JS events.
DOMs and APIs
3. Explain the differences between real DOM and virtual DOM
DOM means Document Object Model in HTML, the elements in HTML are represented as nodes of the DOM. HTML is a text written inside tags, and DOM is a structural representation of those components.
A virtual DOM is a lightweight copy of the real DOM, which can be considered as a tree consisting of nodes. These nodes contain information about elements and their attributes.
Whenever there is a change in the virtual DOM due to a user action React updates the particular node. Then it compares this changed virtual DOM to the previous virtual DOM before the update and gets to know which nodes have to be updated. Now, finally, React will update only those nodes in the real DOM which were updated in virtual DOM. And these changes in real DOM affect the rendering on the screen.
4. How can one prevent injection attacks in React?
JSX used in the react framework prevents injection attacks. By default, react DOM escapes any values embedded in JSX. This helps in ensuring that we cannot inject anything which is not explicitly written in code. Because everything which is being rendered on the screen is first converted to a string. Due to this feature, XSS (cross-site scripting) is prevented by JSX in React.JS.
Components in React JS
5. Explain the differences between stateful and stateless components in React.JS
|Stateful components||Stateless components|
|They have a state, which gets initialised in the constructor.||They do not have any state.|
|Renders both props and states.||Renders props only.|
|Has information about the state change of the component.||Calculates the internal state of the component.|
|They have the authority to change the state of the component.||They don't have the authority to change the state of the component.|
6. What is a state in React? How can we implement it?
A state is an object in React.JS which determines the component behaviour and their rendering. It is a data source containing information about the react component. These are the properties of the component that control the behaviour of the object.
The state of the component can be accessed using this.state() and can be updated using this.setState().
7. When would you use a Class Component over a Functional Component?
If the component which we are using has states(react lifecycle), then we should use Class components otherwise we should use react functional components. Class components are also called Stateful components because they implement state and logic.
An example of a lifecycle method is componentDidUpdate() method.
8. Explain the differences between props and state in React.JS
|They are immutable, i.e. cannot be changed.||They are mutable or changeable.|
|Can be accessed by child components.||Cannot be accessed by child components.|
|Stateless components can have props.||Stateless components cannot have a state.|
|Props make components reusable.||A state in React cannot make components reusable.|
|They are external to components.||They are internal to components.|
|They are used to pass data.||They are used to manage data.|
9. Explain the differences between class and functional components in React.JS.
|Functional component||Class component|
|Known as Stateless components.||Known as Stateful components.|
|They do not implement any logic.||They implement logic before rendering.|
|Cannot use React lifecycle methods.||Uses React lifecycle methods.|
10. What is HOC in React.JS?
Higher Order Components(HOC) is a function that accepts a Component as an argument and returns a Component.
E.g. you can write a HOC to transform its input to lowercase. HOC is especially useful in the scenarios where we find ourselves writing a lot of code in different places that do the same thing, which you can refactor the code into a reusable HOC. It is an advanced technique to enhance reusability in React.JS.
These HOC receive data and return data based on the input data, and to update the HOC we need to change the input data. Interestingly, HOC transforms one component into another component by wrapping it into a container component.
Read more about High Order Components here.
11. What are the methods which create a component lifecycle in React?
The popular component lifecycle methods in React are:
- componentDidMount: It is executed after the first render. It is used to trigger the other lifecycle methods.
- shouldComponentUpdate: It returns true or false value to determine if a component will be updated or not.
- componentDidUpdate: It is called after rendering.
- componentWillUnmount: It is called after the component is unmounted.
12. Explain the ways to prevent a function from being called too quickly
During using event handlers like onClick or onScroll, there could be frequent and too fast calls which we would want to prevent. Below are the ways to prevent it:
- Throttling: Prevents calling of a function repeatedly in a specified time.
- Debouncing: Introduces a delay between two executions of a function.
- requestAnimationFrame throttling: It is a technique where a function to be executed is queued for optimising the rendering of the function.
Refer to the examples with code snippets here.
13. What are the components of Redux in React.JS?
Redux has below components:
- Actions: They are events like user interactions and API calls etc. which help sending data from an application to the Redux store. The actions are sent using store.dispatch() method.
- Reducers: They are pure functions which take a current state of a function as input, perform some action on it and then return the new state. All logic resides in the reducers.
- Store: It stores the application status, and it is recommended that only one store should be used per application. Stores the entire state tree of the application.
- Middleware: They are the interceptors of the action which are sent from components before passing them to the reducer function.
- View: It displays the data sent by the store by combining dumb and intelligent components.
14. What are the differences between Redux and Flux in React.JS?
|Includes multiple stores.||Has only one store.|
|The store handles all the logic.||Reducer handles all the logic.|
|The dispatcher helps in debugging.||A dispatcher is not present, due to single-store, debugging is easy.|
|It has a mutable/ changing state.||It has an immutable state.|
15. What are the advantages of Redux?
- Manageable: State of applications is easily manageable due to centralised global access.
- Debugging: It is easier to debug due to single store and complete error reports are sent to the server.
- Flexible: Provides add-ons to be used in the UI layers, which makes the development easier and flexible.
- Reusable: Promotes reusability due to global accessibility, same code can be tested on the client, server, and native environments.
- Maintenance: Redux has strict guidelines regarding the code structure, hence it becomes easy to maintain.
- Community support: Redux has great community support to help the developers when any issues are faced by them.
16. Under what conditions would you consider using Redux with React?
React Redux is recommended during the below scenarios:
- When the application states are changed frequently using complex logic.
- The application has a large codebase with many people working on it simultaneously.
- When monitoring of the application states is needed.
- When the application has a large number of application states used by different components.
17. What are the advantages of Router in React.JS
- Helps in dynamic route matching.
- Provides a browsing history feature to restore the state of the view.
- It provides a standard application structure for ease of understanding by team members.
- Eases the handling of nested views.
- It has slow code loading.
18. Why do we need a Router in React.JS
We need a router to navigate through the views of different components in a React application. It helps in displaying different views on a single-page application. It is a standard library/API which is used for dynamic routing in React.JS. It uses a component structure to call the components.
Using the react router, we can go forth and back, refresh the page and still maintain the view of the page without white flashes.
Other Backend Technology Interview Questions and Answers
C Programming Language Interview Questions | PHP Interview Questions | .NET Core Interview Questions | NumPy Interview Questions | API Interview Questions | FastAPI Python Web Framework | Java Exception Handling Interview Questions | OOPs Concepts in Java Interview Questions | Java Collections Interview Questions | System Design Interview Questions | Data Structure Concepts | Node.js Interview Questions | Django Interview Questions | Microservices Interview Questions | Key Backend Development Skills | Data Science Interview Questions | Python Interview Questions | Java Spring Framework Interview Questions