React & Redux interview questions. Answered by me.

Hello :)

I am a graduate student from Microverse and during my interview prep, they provided me with a spreadsheet of interview questions to practice.

I am going to share some of these questions and answer them myself.

NOTE: If you find any mistake or a potentially wrong answer, please let me know in the comments. Thanks :)

ReactJS logo intercrossed with Redux logo

1- What is React?

It is a JavaScript library for building User Interface applications.

2- Explain the virtual DOM.

The DOM is a tree of nodes that is constructed by the browser after parsing the HTML during the critical rendering path process.

React takes a copy (let’s call it v1) of this DOM and saves it in the memory, this is what we call the virtual DOM.

When you make any changes or trigger any action that will eventually update the view, React makes a new copy (let’s call it v2) of the virtual DOM and apply the updates to v2.

You have now 2 virtual DOMS (v1, v2), React will make a comparison using the diffing algorithm between the trees and will find the differences and batch the updates to the real DOM, in simple words, replace the old nodes with the new nodes.

This also invites me to expand on the importance of using key props, when you provide React with key props it will be able to recognize the elements even if they moved their position, therefore, it might escape iterating over an entire subtree just to check each element is the same or not…This will save us time and effort!

This is useful because

• It doesn’t re-render the entire DOM, only the changed nodes
• It doesn’t cause a performance drop
• changing and creating the virtual DOM is cheap because it is very fast and it will never be rendered on the screen, this is why it is useful for comparison instead of using the real DOM.

3-What are pure functional Components?

To answer this question, I need first to explain what is a “pure function”.

A pure function is a function that doesn’t have any side effects, which means it doesn’t change data outside of function scope, and it doesn’t depend on any external state but only the inputs given to it.

A functional component is a component declared using function keyword not class keyword. Also was known as the stateless component before React introduced React hooks.

A pure functional component then should mean a component that will render the same output for the same input (state and props).

4- How might React handle or restrict Props to certain types, or require certain Props to exist?

React has a package called PropTypes that allows you to write type-checking validations and to ensure that props are restricted only to certain types and ensure that they exist.

It also includes a method defaultProps that requires certain Props to have a default value.

5- Which feature can we use to cause a component to render only when its ID changes?

By default, React component re-render when the state changes.

If you are using external data that doesn’t belong to state or props, then there are two options:

We can use useEffect hook and pass ID to the dependency array, to cause the component to re-render only when the ID changes.

We can also use forceUpdate in a class component.

6- List some of the major advantages of React.

From my own experience, I believe some of the advantages of React is:

• It’s is a library, not a framework, which means it provides you with utilities to help YOU WRITE THE CODE, unlike frameworks it doesn’t write the code for you, which is important to avoid inversion of control.
• Virtual DOM, which is important to avoid unnecessary re-rendering and re-painting of the entire dom because of minor changes.
• Reusable Component-based pattern, which allows you to efficiently organize your code and connect components together in a predictable way.
• JSX (JavaScript XML) which allows us to write HTML inside of JavaScript.
• React hooks and component lifecycle, which allows us to control how our component should behave during its lifetime using various hooks.

7- What are the limitations of React?

React is an ever-evolving library, every while there is a new release and new features which is great but the downside of it is:

• Deprecated features that people got used to.
• Deprecated documentation about deprecated methods.
• Not enough recent documentation to keep up with the new features.

8- What is JSX?

JSX = JavaScript XML. It is a syntax extension that let’s you write HTML inside of JavaScript, instead of using the old & long & boring createElement way.

9- Why can’t browsers read JSX?

For the same reason they can’t read ES6 features, some browsers still don’t support next-generation features.

browsers are not compatible with JSX and React uses babel to transpile the code into older JavaScript syntax to work with the browsers.

10- What do you understand from “In React, everything is a component.”?

React as UI (user interface) library depends on components as an independent and reusable chunk of code that you can use anywhere in your application.

11- Explain the purpose of render() in React.

It renders the HTML elements that the component contains into the DOM.

12- What is Props?

props is an object that contains data passed down to the child component from the parent component.

13- What is a state in React and how is it used?

state is an object that contains data that lives inside of the current component, you can think of them as local or instance variables.

It is used in many ways but most commonly:

• It is used to render data to the DOM
• It is used to be passed down as props to a child component
• It is used to be integrated with a method or a function

14- What is an event in React?

React is a library based on JavaScript, so an event in JavaScript is an action that describes something that did happen in our application, for e.g a user clicked a button.

We can add event listeners (functions) to choose what kind of behavior to happen due to a certain event occurring.

15- What is Redux?

Redux is a state management library that acts as a “centralized store” and provides you with tools to access and update the state according to certain rules that helps you to keep track of how, when, and why your state changed in a predictable fashion.

16- In Redux, what do you understand by “Single source of truth”?

There is only one single store where all of the application’s state lives in. You can only change the state by dispatching an action to the store.

17- Explain the role of the Reducer.

A reducer is an event (action) listener, it is a function that is connected to the store.

Whenever you dispatch an action to the store, All the reducers “listen” to see if this action type is what they are looking for.

18- What is the significance of Store in Redux?

As the single source of truth, the store is the most important part of Redux because it is where your application state lives.

Thank you for reading :)