react assignment for interview

30 ReactJS Coding Interview Questions for Developers

ReactJS is one of the leading front-end development frameworks in the IT industry. It is part of the open-source development ecosystem and is widely used by many companies. Today we will discuss how to design technical challenges for ReactJS coding interview for developers. Some ReactJS concepts that should be evaluated include React Component Lifecycle, State management, Virtual DOM, Router, JSX and hooks. 

We have divided the coding challenges into three sections based on the experience level of developers; beginner, mid-level and expert. Let’s start with coding challenges for beginner-level developers.

Interview Questions for Beginner ReactJS Developers

When preparing interview questions for beginner-level ReactJS developers, your questions should test basic javascript concepts , props, state, JSX, life cycle methods, routing, and styling. Given below are some of the ReactJS coding interview questions for beginners:

What will be the output of the below code if the button is clicked:

Find the issue in the below code snippet after rendering the list of names.

How would you implement a stateful component that displays a button and a counter? The counter should increment by 1 each time the button is clicked. Write the code for this component.

Develop a currency converter application that allows users to input an amount in one currency and convert it to another. For the sake of this challenge, you can use a hard-coded exchange rate. Take advantage of React state and event handlers to manage the input and conversion calculations.

What will be the output when the user types in the input field:

What is missing in the below code snippet:

Create a stopwatch application through which users can start, pause and reset the timer. Use React state, event handlers and the setTimeout or setInterval functions to manage the timer’s state and actions.

Analyze the below code snippet and advise what will be shown on the screen when the App component is rendered with <App name=”Claire” />.

Find the issue with the form’s input field in the below code snippet:

Question 10

What issue exists in the below code regarding state variable:

Interview Questions for Mid-level ReactJS Developers

When designing ReactJS coding interview questions for intermediate-level developers, you should design challenges that test a deeper understanding of the framework and advanced features of ReactJS . Some of the areas that should be evaluated include advanced react concepts, Redux, Server-Side Rendering, API Integration, Advanced CSS and CI/CD. Find below some of the challenges that test these concepts:

Find the issue in the below code when using the index as a key for list items:

Analyze the below code and advise what will be the value of “Count” when the button is clicked:

Develop a messaging application that allows users to send and receive messages in real-time. The application should display a list of conversations and allow the user to select a specific conversation to view its messages. The messages should be displayed in a chat interface with the most recent message at the top. Users should be able to send new messages and receive push notifications.

Build a weather application that retrieves real-time weather data from any weather API and displays it on the screen. The app should provide a search feature through which users can search for a location by city name or zip code and display the current temperature, humidity, wind speed and other relevant weather data.

What is the issue in the below code regarding useMemo hook:

What will be logged to the console after the button is clicked:

Will the below code throw any error when adding a new item to the list? If yes, what error will that be?

Build a simple drag-and-drop interface that allows users to reorder a list of items through drag-and-drop. Implement a visual cue to indicate the new position of the dragged item. Use React state, components and hooks to manage the list’s data and user interactions.

What is wrong with the below code:

Develop a paginated list view that shows items fetched from an API or a mock dataset. Implement a pagination system through which users can navigate between pages. Also, display the number of items per page. Use React state, components and hooks to manage the data and user interactions.

Interview Questions for Expert ReactJS Developers

When designing ReactJS coding interview questions for expert-level developers, you should evaluate the advanced features of the ReactJS language and the ability to develop applications in a distributed system. Some of the areas to evaluate include architecture and design patterns, performance optimization, testing, advanced react concepts, security and integration with other technologies. Here are some coding challenges which are suitable for expert ReactJS developers:

Find the issue in the below code:

What is the output of the Toolbar component in the below code snippet?

See the below code snippet and advise, will there be any issue making a REST API call in a component’s useEffect hook?

What will be the behavior of useEffect hook in the below code:

Develop a web application of your choice that makes frequent requests to an external REST API. To improve latency and reduce the load on the API, implement a client-side caching strategy that caches responses to API requests and serves them from the client-side cache when the same request is made again.

What is wrong with using async/await in a useEffect hook in reference to the below code snippet?

What will be the behaviour of the useRef and useCallback hooks in the below code snippet?

Develop a file upload component to upload multiple files simultaneously. It should display progress indicators for each file and should display a success or error message after the upload is complete.

How can you optimize the handling of async data promises in the below code?

Develop a dashboard that shows real-time data from multiple sources, including REST APIs and websockets. The data should update in real-time without needing to reload. The dashboard should display gracefully on mobile devices and should have a user-friendly UI/UX.

Today we went through 30 ReactJS coding interview questions and challenges. These coding interview challenges test the knowledge and skills of ReactJS engineers in various areas of ReactJS, ranging from basic ReacJS concepts to advanced concepts like architecture and design patterns. 

By categorizing the coding challenges separately from beginner level to advanced level, we have made it easy for hiring managers to evaluate candidates based on their experience. By completing these challenges, developers can enhance their knowledge of ReactJS and gain valuable experience in solving relevant problems.

Further reading:

• Java Coding Interview Questions
• Python Coding Interview Questions
• JavaScript Coding Interview Questions
• C# Coding Interview Questions
• C++ Coding Interview Questions
• PHP Coding Interview Questions
• 73 Advanced Coding Interview Questions
• Share on Facebook
• Email this Page
• Share on LinkedIn

React Interview Questions – Interview Prep with Answers and Examples

By Joel Olawanle

React is a JavaScript library for creating user interfaces. It's used in over 30,000 live websites and has over 70,000 GitHub stars.

According to the 2021 Stack Overflow developer survey , React has surpassed jQuery as the most popular web framework, and holds approximately 40.14% of the market share. React was also the most sought-after, with one out of every four developers using it.

Over 8,000 industry leaders, including LinkedIn, Twitter, and AirBnB, use React.

A React developer's average annual salary in the United States is $120,000. Many businesses and companies use React, which forces them to constantly look for new talent.

In this article, we will go over some React basics and then look at some interview questions and their proper answers to help you succeed in any React interview you may have.

What is React?

React is an open-source front-end JavaScript library for creating user interfaces. It is declarative, efficient, and flexible, and it adheres to the component-based approach, which allows us to create reusable UI components.

Developer primarily use React to create Single Page Applications and the library focuses solely on the view layer of MVC. It is also extremely fast.

Features of React

React has many features that set it apart, but here are a few highlights:

• React employs the Virtual DOM as opposed to a real/browser DOM.
• React uses unidirectional one-way data binding.
• It is used to develop web applications as well as mobile applications using React Native , which allows us to build cross-platform applications.

How to Start a New Project in React

We can create a React app from scratch by initalizing a project and installing all dependencies. But the easiest way is by using create-react-app via the command below:

Note: my-app is the name of the application we are creating, but you can change it to any name of your choice.

You can read more on how to get started with React in this article .

What Does DOM Stand For?

The term "DOM" stands for D ocument O bject M odel and refers to the representation of the entire user interface of a web application as a tree data structure.

Types of DOM

We have two types of DOM which are the Virual DOM and the Real DOM.

Advantages and Disadvantages of React

Here are some of the advantages and disadvantages of React:

Advantages of React

• It has a shorter learning curve for JavaScript developers and a large number of manuals, tutorials, and training materials are available because of its active community.
• React is search engine friendly
• It makes it easier to create rich UI and custom components.
• React has quick rendering
• The use of JSX allows us to write code that is simpler, more appealing, and easier to understand.

Disadvantages of React

• Because React is a frontend library, other languages and libraries are required to build a complete application.
• It can be difficult for inexperienced programmers to understand because it employs JSX.
• Existing documentation is quickly out of date due to the short development cycles.

What is JSX?

JavaScript XML is abbreviated as JSX. JSX enables and simplifies the creation of HTML in React, resulting in more readable and understandable markup.

For example:

You can read more about JSX in React in this article .

Why can't Browsers Read JSX?

JSX is not a valid JavaScript code, and there is no built-in implementation that allows the browser to read and understand it. We need to transpile the code from JSX into valid JavaScript code that the browser can understand, and we use Babel , a JavaScript compiler/transpiler, to accomplish this.

Note: create-react-app uses Babel internally for the JSX to JavaScript conversion, but you can also set up your own babel configuration using Webpack.

What are Components?

A component is a self-contained, reusable code block that divides the user interface into smaller pieces rather than building the entire UI in a single file.

There are two kinds of components in React: functional and class components.

What is a Class Component?

Class components are ES6 classes that return JSX and necessitate the use of React extensions. Because it was not possible to use state inside functional components in earlier versions of React (16.8), functional components were only used for rendering UI.

Read more about React components and the types of components in this article.

What is a Functional Component?

A JavaScript/ES6 function that returns a React element is referred to as a functional component (JSX).

Since the introduction of React Hooks, we have been able to use states in functional components, which has led to many people adopting them due to their cleaner syntax.

Difference between Functional and Class components

How to use css in react.

There are 3 ways to style a react application with CSS:

• Inline Styles
• External Styling

Read more on how to style a React application in this article .

What is the Use of render() in React?

Render() is used in the class component to return the HTML that will be displayed in the component. It is used to read props and state and return our JSX code to our app's root component.

What are Props?

Props are also referred to as properties. They are used to transfer data from one component to the next (parent component to child component). They are typically used to render dynamically generated data.

Note: A child component can never send props to a parent component since this flow is unidirectional (parent to child).

Read more about how props works in React here .

What is State in React?

State is a built-in React Object that is used to create and manage data within our components. It differs from props in that it is used to store data rather than pass data.

State is mutable (data can change) and accessible through this.state() .

How to Update the State of a Component in React

It is important to know that when we update a state directly it won’t re-render the component – meaning we don’t get to see the update.

If we want it to re-render, then we have to use the setState() method which updates the component’s state object and re-reders the component.

You can learn more here .

How to Differentiate Between State and Props

State and props are JavaScript objects with distinct functions.

Props are used to transfer data from the parent component to the child component, whereas state is a local data storage that is only available to the component and cannot be shared with other components.

What is an Event in React?

In React, an event is an action that can be triggered by a user action or a system generated event. Mouse clicks, web page loading, key press, window resizes, scrolls, and other interactions are examples of events.

How to Handle Events in React

Events in React are handled similarly to DOM elements. One difference we must consider is the naming of our events, which are named in camelCase rather than lowercase.

Class Component

Function component, how to pass parameters to an event handler.

In functional components, we can do this:

And in class components we can do this:

What is Redux?

Redux is a popular open-source JavaScript library for managing and centralizing application state. It is commonly used with React or any other view-library.

Learn more about redux here .

What are React Hooks?

React hooks were added in v16.8 to allow us to use state and other React features without having to write a class.

They do not operate within classes, but rather assist us in hooking into React state and lifecycle features from function components.

When Did We Begin to Use Hooks in React?

The React team first introduced React Hooks to the world in late October 2018, during React Conf, and then in early February 2019, with React v16. 8.0.

Explain the useState() Hook

The useState Hook is a store that enables the use of state variables in functional components. You can pass the initial state to this function, and it will return a variable containing the current state value (not necessarily the initial state) and another function to update this value.

Explain the useEffect() Hook

The useEffect Hook allows you to perform side effects in your components like data fetching, direct DOM updates, timers like setTimeout(), and much more.

This hook accepts two arguments: the callback and the dependencies, which allow you to control when the side effect is executed.

Note: The second argument is optional.

What's the Use of the useMemo() Hook?

The useMemo() hook is used in functional components to memoize expensive functions so that they are only called when a set input changes rather than every render.

This is similar to the useCallback hook, which is used to optimize the rendering behavior of your React function components. useMemo is used to memoize expensive functions so that they do not have to be called on every render.

What Is the useRefs Hook?

The useRefs() hook, also known as the References hook, is used to store mutable values that do not require re-rendering when they are updated. It is also used to store a reference to a specific React element or component, which is useful when we need DOM measurements or to directly add methods to the components.

When we need to do the following, we use useRefs:

• Adjust the focus, and choose between text and media playback.
• Work with third-party DOM libraries.
• Initiate imperative animations

What are Custom Hooks?

Custom Hooks are a JavaScript function that you write to allow you to share logic across multiple components, which was previously impossible with React components.

If you're interested in learning how this works, here is a step by step guide to help you build your own Custom React Hook .

What is Context in React?

Context is intended to share "global" data for a tree of React components by allowing data to be passed down and used (consumed) in whatever component we require in our React app without the use of props. It allows us to share data (state) more easily across our components.

Read more about React Context in this guide .

What is React Router?

React router is a standard library used in React applications to handle routing and allow navigation between views of various components.

Installing this library into your React project is as simple as typing the following command into your terminal:

In this tutorial, we went over some React interview questions to help you prepare for your interviews. All of us at FreeCodeCamp wish you the best of luck and success in your interview.

Instead of attempting to take several courses at once, find a helpful tutorial and complete it if you want to learn more and master React so you can perform well in practical interview sessions. Check out freeCodeCamp's Free React Course for 2022 or Learn React - Full Course for Beginners .

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started