Lukasz Pietraszek
HomeProjectsBlog

Interview questions: React

in: #interview #react
Reading time: 5 minutes
Cover Image for Interview questions: React

Intro

Welcome to 3rd post from the Interview series. This time I'd like to focus on questions around React and its ecosystem. Since those are interview questions some answers are rather shorter and focusing on the core concepts since during the interview they will try to gauge if you are familiar with them and will try to ask more questions that cover a wider spectrum of your knowledge to see where would you fit in companies structures. If you need to dive into specific subjects there are plenty of articles that cover those concepts in a more granular and extensive way on dev.to or medium.

Questions:

What is virtual DOM and how does React use it to render to the DOM?

React has its own DOM as an object in memory separated from real DOM. Every operation that we make by React are primarily evaluated in this memory version of DOM. Then ReactDOM checks what differences are between memory DOM and real DOM and then updates real DOM with concrete changes. This approach makes it fast because resources are not wasted for interaction with a real browser's DOM and improving performance considerably.

What is JSX?

JSX allows us to write HTML or XML-like text code alongside ReactJS by providing syntactic sugar for the React.createElement(component, props, ...children) function. It has its own extension .jsx but we can also use it in regular .js files JSX code:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compiles to:

React.createElement(MyButton,{color: 'blue', shadowSize: 2},'Click Me')

What problems does React solves?

React lets us create Single Page Applications that resolve the problem of user experience. SPA gives us a desktop-like application experience. We don't have an annoying reloading effect known from traditional web pages every time data is changing.

What are the pros and cons of using React?

Pros:

  • Performance and speed enhancement
  • Popularity / huge community
  • SEO-friendly
  • Cost-effectiveness / easy to learn / development time
  • Component-Based Architecture
  • One direction flow

Cons:

  • Incompleteness - it is just a view part in MVC model
  • The high pace of development

What is the difference between React and React Native?

React is a library that uses as a default ReactDOM to render content in the browser by changing its DOM. React Native is a cross-platform mobile framework that uses Reactjs for building apps and websites. React Native compiles to native app components enables the programmer to build mobile applications that can run on different platforms such as Windows, Android, iOS in JavaScript.

How do you style components in React?

There are at main 4 ways to style React components.

  1. Inline CSS - Styling React elements using inline CSS allows styles to be completely scoped to an element using a well-understood, standard approach.
  2. CSS & CSS Pre-processors - This involves using separate stylesheets like our conventional way of styling our HTML websites either with CSS or a CSS preprocessor such as SASS, Less or Stylus.
  3. CSS-in-JS - Styled-Components - styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS.
  4. CSS Modules - A CSS Module is a CSS file in which all class names are scoped locally by default.

What features were introduced in React 16.x?

With a new React version we have got a few improvements:

  1. A new type of licence, from now on its MIT, you can use React library for commercial use
  2. New types returned by render, now you can return string or array of elements
  3. Portals - it's a new, better way of rendering elements outside the component in which it was created
  4. Fragments
  5. Context API
  6. Lazy
  7. Hooks
  8. Better error handling by error boundaries - components catching and registering errors
  9. Improvement of Server-Side Rendering
  10. Files size-reduction - modules react and react-dom has been reduced by 32%

What are Higher Order Components?

Higher-Order Component is an advanced React technic used when we need to multiply or reuse a component's logic. Components take one or more components as arguments and return a new upgraded component. We don’t modify or mutate components. We create new ones. A HOC is used to compose components for code reuse. A HOC is a pure function and has no side effects, returning only a new component

State management in React apps: what are the options: pros and cons of each solution

State management is a way to engender communication and sharing data between components. It creates a concrete data structure that you can read and write and which represents your app's state. A state is a JavaScript object that represents part of the component which can be changed by a user action. There are several libraries like Redux, Recoil, Context API, etc which let us work with state management, we can use react Hooks too.

What's the difference between state and props?

Props (properties) and state are just simple JavaScript objects. Both store pieces of information on how to render a component. Different between these two objects is major, props are passed to a component like arguments to the function while the state is managed inside a component just like a variable in the function's body.

What is prop drilling and how can you avoid it?

Prop drilling is when you passing data thru props from top to bottom of the components tree and components don't directly use them. To avoid prop drilling we can use Context API or Render Props.

Why React requires key to render the list?

React needs key while rendering lists because it gives React the possibility to distinguish between similar objects in a similar place. When it's up to changing something react by the key can find the exact element that we want to change instead of changing everything that could lead to worse performance. Also in many cases, lack of distinction could cause bugs because react can start interacting with the first found element instead of this one we want it to.

How can we improve Accessibility in React?

The ways to improve accessibility in React apps are:

  1. Semantic markup
  2. Upgrading semantic markup with ARIA (Accessible Rich Internet Applications)
  3. Using an element's focusing styling
  4. Keyboard navigation
  5. Descriptive Alt text for images
  6. Headings levels
  7. Labelling forms elements
  8. Document language
  9. Fixing contrast ratio

What are hooks and why are they useful?

Hooks are functions that contain in themselves actions responsible for the component's state and component's lifecycle methods. With hooks we can now use in stateless components - methods reserved earlier only for classes. Hooks let us keep components layout clear simultaneously with using component's state.

What is Redux?

Redux is a library used to manage the application state. React or Angular use Redux to build the user interface. It is a predictable state container for JavaScript applications and is used for the entire application’s state management.

What solution would you use to process asynchronous requests with Redux?

First what we can do is splitting asynchronous action into at least three synchronous actions. An action informing that async task:

  • started
  • was successful
  • failed

Each of these actions changes the application state and keeps it in line with what is happening during the asynchronous task execution. Redux-thunk middleware allows creating the action's creator returning functions instead of objects.

What is Next.js?

Next.js is a framework that renders sites structure on Server Side. Next.js uses React, Babel and Webpack. Next.js is used for developing single-page JavaScript applications, provides Server Side Rendering SSR which improves the performance of applications loading.

How do you unit test a React Component?

There are two popular approaches to unit testing React components:

  1. Shallow rendering components using Enzyme
  2. Rendering components “for real” using react-testing-library

What is Jest?

Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing components.

Useful resources:

Special thanks to Marek and Tomek for reviewing this post.

If you liked this article, please share it on Twitter.