React & Redux Interview Questions. Answered by me.

Hello 🙂

I am a graduate of Microverse and during my interview they provided me with a spreadsheet of interview questions to practice on.

I will share some of these questions and answer them myself.

NOTE: If you find any errors or possibly wrong answers, let me know in the comments. Thank you:)

ReactJS logo intercrossed with Redux logo

What is 1-React?

React is a JavaScript library for building user interface applications.

2 – virtual DOM

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

React takes a copy of this DOM (we call it V1) and stores it in memory, which is what we call a virtual DOM.

When you make any changes or trigger any actions that will eventually update the view, React creates a new copy of the virtual DOM (we’ll call it V2) and applies the updates to V2.

You now have two virtual DOMS (V1, v2). React will use the Diff algorithm to compare the two, find differences and then update the actual DOM in bulk. In simple terms, you replace the old node with the new node.

This also requires me to explain the importance of using the key attribute. When you provide React with the key attribute, React recognizes elements even if they move their position. Therefore, it may be possible to avoid traversing the entire subtree to check that each element is the same… This will save us time and energy!

This is very useful because

  • The entire DOM is not re-rendered, only the nodes that have changed
  • No performance degradation occurs
  • Changing and creating the virtual DOM is convenient because it’s fast, and it’s never rendered on the screen, which is why it’s used to compare the virtual DOM rather than the real DOM.

The translator’s note:

There is also a memory overhead associated with using the virtual DOM. The creation and comparison of virtual DOM is a performance drain. Therefore, “using the virtual DOM is guaranteed to lead to performance optimization” is not true

3- Purely functional components?

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

A pure function is one that does not have any side effects, meaning that it does not change data outside the scope of the function, and it does not depend on any external state, but only on the input given to it.

A function component is a component declared using the function keyword instead of the class keyword. Also known as stateless components before React hooks were introduced.

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

A purely functional component should mean giving the same inputs (state and props) to output the same component.

4 – Props constraints

React has a package called PropType, which allows you to write type-checking validations and ensure that props is limited to certain types and that they exist.

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

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

PropType link: reactjs.org/docs/typech…

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

By default, the React component rerenders when the state changes.

If you are using external data that is not part of state or props, you have two options:

We can use the useEffect hook and pass the ID to the dependent array to make the component rerender only when the ID changes.

We can also use forceUpdate in class components.

The translator’s note:

UseEffect: reactjs.org/docs/hooks-…

ForceUpdate: reactjs.org/docs/react-…

6 – the React

Based on my own experience, I think React has the following advantages:

  • It’s a library, not a framework, which means it gives you utilities to help you write code, and unlike frameworks, it doesn’t write code for you, which is important to avoid inversion of control.
  • Virtual DOM, which is important to avoid unnecessary re-rendering and redrawing of the entire DOM due to minor changes.
  • Reusable component-based patterns that allow you to organize code efficiently and wire components together in predictable ways.
  • JSX (JavaScript XML) allows us to write HTML in JavaScript.
  • React Hooks and the component lifecycle, which allows us to use various hooks to control how components behave during their lifetime.

7- React limitations

React is a constantly evolving library with new versions and features every time, which is great, but the downsides are:

  • Deprecated features that people are used to.
  • Deprecated documentation for deprecated methods
  • Not enough up-to-date documentation to keep up with new features.

React updates so frequently that users and documents cannot synchronize

8- JSX

JSX = JavaScript XML. It is a syntax extension that lets you write HTML in JavaScript instead of using the old, tedious createElement approach.

9- Why can’t browsers read JSX?

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

Browsers are not compatible with JSX, and React uses Babel to convert code to old JavaScript syntax for use with browsers.

React Everything is a component.

React as a UI (user interface) library relies on components as separate and reusable blocks of code that you can use anywhere in your application.

11 – render ().

It renders the HTML elements contained by the component into the DOM.

12- What is Props?

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

13- What is the state in React and how is it used

State is an object that contains data that exists in the current component, which you can think of as local variables or instance variables.

It is used in a number of ways, but the most common are:

  • Used to render data into the DOM
  • Used as props to pass to child components
  • For integration with methods or functions

14- What are events in React?

React is a javascripts based library, so events in JavaScript are actions that describe something that actually happened in our application, for example, when the user clicked a button.

We can add event listeners (functions) to select the behavior that will occur as a result of an event.

15- What is Redux?

Redux is a state management library that acts as a “centralized store” and gives you access tools to update state according to certain rules to help you keep track of how, when, and why your state changes in a predictable way.

16- How do you understand “One Single Store” in Redux?

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.

The application has only one status module. You can only change the state by dispatching operations.

17- Explain the role of Reducer.

Reducer is an event listener, which is a function that connects to the store.

Every time you send an action to the Store, all the Reducer “listens” to see if the action type is what they are looking for.

18- What is the meaning of Store in Redux?

As the only true source, the Store is the most important part of Redux, because it is where the state of your application resides.

Thank you for reading 🙂