Created by Jordan Walke and initially developed and maintained by Facebook, React (also known as React.js) is a JavaScript library to build reusable UI components. Nowadays, most of the websites are built using the MVC (model view controller) architecture, and precisely is the “view” element where React.js stands, while the rest architecture is provided by Redux or Flux.
React is the view layer of applications like Facebook, WhatsApp & Instagram, but since Facebook released it to the public in 2013, has been extensively used as an open-source, component-based front-end library for the view layer of many applications.
Why? Because, unlike other JavaScript frameworks that use the Document Object Model (such as Angular or Node), React allows us to divide an entire application into various components, operating on a virtual DOM rather than manipulating the document in a browser after any change is done. Then, we write virtual components that react and will turn into the DOM whenever is needed, increasing performance and reducing memory wastage.
For all the above, React is a clear winner for front-end developers. It has a quick learning curve, clean abstraction, reusable components, and a constant and steady development. Companies like PayPal or Uber had taken advantage of it, so it is clear that React is here to stay.
If you are looking forward to getting a job related to this Javascript framework, we have selected the most commonly asked React interview questions and the respective answers, at both basic and advanced levels.
We also had included several React Code Challenges that will help you to be more prepared for your interview ahead. So when you had mastered our selection, you will be ready to excel in your React interview.
Multiple job opportunities.
One code challenge.
Get rid of repetitive hiring processes for all the positions you apply to, and access many job offers by taking a single real-world assessment.
Basic React questions
Define React
It is a front-end and open-source JavaScript library, useful in developing user interfaces for applications with a single page. React has proven helpful in building complex and reusable user interface (UI) components of mobile and web applications.
Its main features are:
- React follows unidirectional data binding or data flow
- Server-side rendering.
- Usage of virtual DOM rather than real DOM
- Usage reusable or composable UI components
Explain the advantages of using React
First, React use Virtual DOM to improve efficiency when rendering the view. Therefore, each time the data changes in a react app, a new virtual DOM gets created, which is faster than rendering the UI inside the browser.
React is also easy to learn if compared to other frameworks. It only takes having some Javascript knowledge to build web applications using React.
It is also SEO friendly since the user interfaces created by the framework are easily navigated in various search engines.
The use of component-based architecture for developing applications is another point in favor of React. Those components are independent and reusable bits of code that can be shared across various applications with similar functionality, and therefore increasing the development flowchart.
Also, React has a huge ecosystem of libraries to choose from to fit the project requirements.
What are the limitations of using React?
Among the few limitations of React are:
- It is not a full-blown framework. React is only a library to deal with the UI section of the app.
- Since the large number of components available, it takes some time to gain all the benefits of the library.
- It is necessary to understand the philosophy behind React to use it properly.
- As it will make use of inline templating and JSX, coding in React may be challenging. However, React has lots of documentation, tutorials, and training resources.
What is JSX?
JSX is an acronym for JavaScript XML, a React extension that allows writing JavaScript code similar to HTML, to be easier to understand.
Writing a JSX file makes the React applications robust and increases their performance since we can write XML-like syntax in the same of JavaScript code. Those JSX files cannot be read directly in the browser, since they only understand JavaScript objects, but the JSX is transformed into a JavaScript object by transpilers like Babel.
Anyway, it is a good thing since JSX files are processed faster than regular JavaScript after the translation. JSX contains both markup and logic into the same file rather than having to process two files separately, it is type-safe, most of the errors can be found while compiling, and it makes easier the template creation.
Explain the concept of Virtual DOM
A Virtual DOM is a lightweight JavaScript object that represents in-memory the real DOM. It acts as an intermediary step between the render function and the displaying of elements on the browser.
Virtual DOM is like a node tree that lists the elements, their attributes, and content as objects and their properties. When the render function creates a node tree of the React components, that node is updated in response to the changes in the data model. Those changes may be caused by both the user and by the system.
Basically, Virtual DOM works in three steps:
1. When data changes in the React App, the entire UI is rendered in the Virtual DOM representation.
2. The difference between the previous DOM representation and the new DOM is estimated.
3. The real DOM is updated only with the elements that have been changed.
6. What is the purpose of render() in React?
Each React component has a render() function, used to return the HTML which we want to display in a component. If we need to render more than one HTML element, they will be grouped together inside a single enclosing tag (parent tag). Those parent tags can be <div>, <form>, <group>, etc.
What are Props in React?
Props stand for "Properties", read-only inputs to components. Props are objects that the value of attributes of a tag. They work similar to the HTML attributes and are a way to pass data from the parent to the child components. Props are similar to function arguments, but are immutable: we cannot modify the props from inside the component, but we can add attributes. These attributes are available in the component as this.props and are used to render dynamic data.
What is a State in React?
The state is an updatable structure that contains data and information about the component. It can be changed over the lifetime of the component according to user action or system events. Basically, the state is the heart of the react component that guides the behavior of the component and how it will render.
What is a key in React?
It is a special string attribute, included when using lists of elements. Keys help React to flag which elements were added, changed, or removed, and they should be given to array elements to provide a unique identifier for each element.
Keys are generally used to display a list of data coming from an API and should be unique among siblings (not globally unique).
What is create-react-app?
In React, the create-react app is a command-line interface (CLI) used to build React applications with no specific build configuration. Since all the necessary tools are pre-configured while using the CLI, users may focus on the code rather than the required dependencies to develop the application.
The create-react-app CLI has the following advantages:
- It allows live development servers to debug
- It has a built and ready auto-prefixed CSS
- It supports JSX, ES6, and flow statements
- It uses scripts to handle JSS, CSS, and others
- It works with fast interactive testing components
Advanced React interview questions
What are Higher Order Components in React? What we can do with them?
The Higher Order Component (HOC) is an advanced technique in React to reuse component logic. It is a function that takes a component and returns a new one, which is the same to say that HOC is a function that accepts another function as an argument.
HOC is not the feature part of React API, but a pattern that emerges from React's compositional nature. It is used for code reusability, props manipulation, render highjacking, and state manipulation.
What is conditional rendering in React?
Conditional rendering is the dynamic output of user interface markups based on a condition state. Using conditional rendering, we can toggle do API data rendering, authentication handling, decide permission levels, hide or show elements, run specific application functions, and many more.
We can use many approaches to implement conditional rendering. For instance, we may use if-else conditional logic for smaller and medium-sized applications; use ternary operators; or use element variables to write cleaner code.
Define what are Hooks in React
Hooks are used to be able to use the state and other features of React without having to write a class. The stateful logic can be extracted from a component easily with hooks, alongside testing and reusing it, without changing the component hierarchy.
Mention the advantages of using React Hooks
Hooks allow the extraction and reuse of stateful logic across multiple components without the burden of higher-order components or render props. Then, using Hooks we can manipulate the state of our functional component without converting them into class components. They don’t work inside classes, so we can avoid using lifecycle methods and use only built-in hooks.
What is React Router?
React Router is the standard library used for routing in React. It allows us to build single-page web applications in React without even refreshing the page; changing the browser URL while keeping the user interface in sync and many more.
Mention some techniques to optimize the React app performance
React has lots of optimizing techniques for apps, such as:
Using useMemo( ): this hook is used for caching CPU-Expensive functions, calling it only when is needed.
Using React.PureComponent: this base component class is used to reduce the re-renders of a component.
Maintaining State Colocation: this is a process to move the state as close to where it is needed as possible, making code more readable and easier to maintain.
Lazy Loading: this technique reduces the load time of a React app by delaying the rendering of the DOM elements in the app.
What is the difference between a controlled and an uncontrolled component in React?
A controlled component is one over which React has complete control: the singular point of data for the forms, for instance. On the other hand, an uncontrolled component is one where the form data gets handled by DOM and not the React component.
When we can use React Context instead of a third party global state library for React?
React context is a build-in method to provide and use data in our application without using props. It helps us to prevent the problem of "props drilling" (passing data with props to components that don't need it), giving the data exactly to the component that needs it.
However, React Context is only useful to get or "read" values globally in our application, while Redux and other third-party state libraries let us both read and update the state.
So it must be taken into account that Context is not built for state updates, so when the value provided changes, all of its children will re-render. This can decrease the performance of the app.
What is the useEffect hook used for?
That hook is employed to perform “side effects” in React components. Those are operations performed with something that exists outside the context of our React app. Those operations cannot be done directly within the body of the React component, so the useEffect provides a function to perform side effects and a dependencies array to the external values that the function relies upon.
Some of those so-called side effects are doing a GET or POST request to an external API endpoint or working with a browser API.
Describe the use of the useCallback and useMemo hooks
Both hooks are used to improve the components' performance.
useCallback prevents repeating actions declared within the body of function components on every render.
Meanwhile, useMemo, performs a memoization an expensive operation that we give it. This is a technical term for functions that are able to "remember" past values they have computed if their arguments have not changed.
The difference between those hooks is that useCallback returns a value, while useMemo returns a function.
React Code Challenges
With these challenges, we have reached the end of this article on React Interview Questions. We hope that you feel now more confident and remember: make sure you study and practice as much as possible. Good luck with that interview ahead!
Multi-apply: How to apply to many job opportunities with one single Challenge
We have managed to get most of the companies we collaborate with to adopt our Rviewer challenges in their validation process as an official test.
And here's the bomb: This allows us to offer you, at last, Multi-Apply: with a single technical challenge you will be able to access more than one job offer. Yes, you heard it right: MANY job opportunities by taking a SINGLE code challenge.
