React Interview Guide: Learn all you need to know to ace any React interview and land your dream job

React Interview Guide

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Nitin Nainani

Book Project Manager: Aishwarya Mohan

Senior Content Development Editor: Debolina Acharyya

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Vijay Kamble

DevRel Marketing Coordinators: Nivedita Pandey, Namita Velgekar, and Anamika Singh

First published: November 2023

Production reference: 1181023

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-80324-151-7

www.packtpub.com

To my wife, Poojitha, and my son, Viraj; without their support, this book would not have been completed as early as it has.

– Sudheer Jonna

To the programming tech community, for all the support and motivation; you are the innovators shaping the future. This book is a tribute to your outstanding dedication to making a living from working in tech. I hope this book serves to inspire the next generation of programmers to join this remarkable journey.

– Andrew Baisden

Contributors

About the authors

Sudheer Jonna is a lead software developer, writer, and solution architect within JavaScript and Java programming languages. Sudheer has worked on many large-scale applications, prioritizing robust architecture and high performance. He has extensive knowledge of single-page applications (ReactJS/VueJS/Angular), backend API development, SQL, and cloud and containerization technologies, enabling him to assist many developers in advancing their careers. He is also the author of four other books, and a blogger, speaker, and trainer.

Andrew Baisden is a software developer and technical writer skilled in using the JavaScript and Python programming languages. Andrew has worked for a variety of companies in various industries throughout his career. His skills and knowledge as a technical writer have helped and inspired many developers to start their careers in tech and advance their existing skills. He has an audience on social media of over 30K and actively contributes to the community.

About the reviewers

Anthony Kharioki Wagura is a software engineer with years of experience building across web, mobile, and blockchain teams, primarily in early-stage start-ups. With expertise in Javascript, React, React Native, GraphQL, NodeJS, and TypeScript, Anthony has built numerous web and mobile projects, including ticket management apps, ride-sharing platforms, e-commerce solutions, and fitness applications. Anthony is an active contributor to open source projects and has done a few talks on developing mobile applications with React Native. Most recently, Kharioki has been venturing into start-ups and has recently launched a start-up in the travel and tourism industry. His hobbies are woodworking and swimming.

Emmanuel Demey works with the JavaScript ecosystem on a daily basis. He spends his time sharing his knowledge with anyone and everyone, with his first goal at work being to help the people he works with. He has spoken at French conferences (such as Devfest Nantes, Devfest Toulouse, Sunny Tech, and Devoxx France) about topics related to the web platform, such as JavaScript frameworks (Angular, React.js, and Vue.js), accessibility, and Nest.js. He has been a trainer for 10 years at Worldline and Zenika (two French consulting companies). He is also the co-leader of the Google Developer of Lille group and the co-organizer of the Devfest Lille conference.

Venkat Rohith Saripalli is an experienced frontend developer with a strong grasp of various technologies such as React, Redux, Redux Saga, JavaScript, CSS, Sass, styled-components, responsive design, and web components. Rohith is also skilled in using Jest and Testing Library for testing applications. He also has a sound knowledge of TypeScript, Redux Toolkit, and Node.js, which he has utilized in his development projects.

Kirill Ezhemenskii is an experienced software engineer, a frontend and mobile developer, a solution architect, and the CTO at a healthcare company. He’s a functional programming advocate and an expert in the React stack, GraphQL, and TypeScript. He’s also a React Native mentor.

Table of Contents

Preface

Part 1: Getting Ready for Interviews

1

Bracing Yourself for Interview Preparation

Preparing your resume and cover letter

Differentiating between a resume and a cover letter

The significance of having an excellent resume and cover letter

Exploring types of resumes

Key elements of a good resume

Key elements of a good cover letter

Examining job descriptions

Identifying key skills and accomplishments

Common resume mistakes to avoid

Researching the company

Common cover letter mistakes to avoid

Building your GitHub profile or website portfolio

Benefits of building a GitHub profile or website portfolio for finding work

How to make your GitHub profile or website portfolio stand out from the rest

What kind of content you should include in your portfolio

Examples of innovative portfolio pieces and how they can help you land a job

Pros and cons of using a third-party portfolio building website versus DIY

Finding jobs to apply for

Understanding your career goals and targeting specific job postings

Utilizing job boards to search for relevant opportunities

Networking offline and online

Researching companies and learning about their current job openings

Using online resources such as Indeed to research salaries and more

Understanding the role of meetups and referrals

What meetups are and why they are important for job seekers

Tips on how to find the right meetup group for you

Benefits of attending meetups

How to get the most out of a meetup

The importance of referrals in getting a job

Tips on how to get referrals

Exploring interview tips

Preparing for a potential technical interview

Researching the company

Practicing your questions and answers

Dressing appropriately

Being confident

Following up after the interview

Summary

Part 2: Mastering the Core React Technical Interview

2

Understanding ReactJS Fundamentals and Its Features

Prerequisites to ReactJS

Introduction to ReactJS

What is React?

What are the reasons for choosing React for programming?

What are the major features of React?

Understanding JSX

What is JSX?

Why can’t browsers understand JSX?

What are the advantages of JSX?

Building views with elements and components

What are components?

What are the different ways to create components?

What is the difference between an element and a component?

What are pure components?

What is a higher-order component?

What are fragments and where do you use them?

Controlling component data using props and state

What are props in React?

Can you describe state in React?

What are the main differences between props and state?

How does React batch multiple state updates?

Can you prevent automatic batching?

How do you update objects inside the state?

How do you update nested state objects?

Understanding the importance of key props

What is a key prop and what is the purpose of it?

Learning about event handling

What are synthetic events?

How do you differentiate between React event handling and HTML event handling?

How do you bind event handlers in class components?

Understanding virtual DOM

What is virtual DOM?

How does virtual DOM work?

What is Shadow DOM?

What is the difference between Real DOM, virtual DOM, and Shadow DOM?

What is React Fiber?

Data flow and communication in React applications

Can you describe unidirectional data flow in React?

What are the advantages of unidirectional data flow?

How do you access DOM?

What are refs? How do you create refs?

What is the main purpose of refs?

How do you compare refs with state?

What are forward refs?

Managing state globally using the context API

What is prop drilling?

Can you describe context?

What is the purpose of context?

Understanding the server-side rendering technique

What is server-side rendering?

What is the main difference between server-side rendering and client-side rendering?

When do you need to use server-side rendering?

Summary

3

Hooks: Bring State and Other Features into Function Components

Introduction to Hooks and their purpose

What are Hooks?

What is the motivation behind Hooks?

Can you describe the rules of Hook usage?

Can I use Hooks inside class components?

Local state management using Hooks

What is the useState Hook?

Is it always recommended to use an updater function?

What is a useReducer Hook? How do you use it?

When should you use the useReducer Hook over the useState Hook?

Global state management using Hooks

How do you override context for a specific part of the component tree?

What would the context value be for no matching provider?

Performing side effects in React applications

How do reactive dependencies impact the logic inside the useEffect Hook?

How often are setup and cleanup functions invoked inside the useEffect Hook?

When should you remove an object or a function from dependencies?

What is the useLayoutEffect Hook? How does it work?

Optimizing the application performance

What is memoization? How can it be implemented in React?

Can you describe the useMemo() Hook?

What are the possible use cases of the useMemo() Hook?

What are common mistakes with the usage of useMemo? How do you rectify them?

When should you use the useCallback Hook instead of the useMemo Hook?

Accessing DOM nodes using ref Hooks

How do you avoid recreating the Ref contents?

Is it possible to access a ref in the render method?

How do you expose a subset of methods from a ref instance?

Learning about popular third-party Hooks

What is the useImmer Hook? What is its purpose?

Building your own Hooks

What are custom Hooks? How do you create them?

What are the benefits of custom Hooks?

Should you still consider using render props and HOCs?

Do you recommend moving effects into custom Hooks?

Troubleshooting and debugging Hooks

How do you debug custom Hooks?

Summary

4

Handling Routing and Internationalization

Technical requirements

Navigating screens and an introduction to React Router

What is the purpose of the React Router library?

How does navigating between screens work in React Router?

Routes, types of routes, and links

What types of routes can we use?

How do you create a route and a link?

Adding routes

Accessing URL parameters

Nesting routes

Dynamic routes

Error pages

Internationalization and localization

What is internationalization?

What is localization?

Adding translations and formatted messages

What are translations?

What are formatted messages?

Passing arguments and placeholders

How do we pass arguments?

How do we use placeholders?

Summary

5

Advanced Concepts of ReactJS

Exploring portals

What are portals? How do you create them?

What are the common use cases of portals?

How does event bubbling work inside portals?

What accessibility precautions are taken care of in portals?

Understanding error boundaries

What are error boundaries?

Is it possible to create an error boundary as a function component?

When do error boundaries not work?

Managing asynchronous actions with the Suspense API

What is the Suspense API? How do you use it?

Can I use the suspense component for any kind of data fetching?

How do you prevent unnecessary fallbacks during an update?

Optimizing rendering performance using concurrent rendering

How do you enable concurrent rendering in React?

Debugging React applications with the Profiler API

How do you measure rendering performance?

Strict mode

How do you enable strict mode?

Can you describe the list of development-only checks enabled by strict mode?

What functions are called twice in the double rendering process of strict mode?

Static type checking

What are the benefits of static type checking?

How do you implement static type checking in React applications?

React in mobile environments and its features

What is React Native?

What are the differences between React and React Native?

Can you describe the React Native architecture based on the threading model?

How do you perform navigations in React Native?

What are the benefits of the new architecture?

What is view flattening?

Summary

Part 3: Going Beyond React and Advanced Topics

6

Redux: The Best State Management Solution

Understanding the Flux pattern and Redux

What is the Flux pattern? Can you explain the data flow?

What are the advantages of Flux?

How do you differentiate Flux from MVC?

What is Redux?

What are the differences between Flux and Redux?

When do you need to use Redux?

Core principles of Redux, components, and APIs

What are the core principles of Redux?

How does Redux work? What are the main components of Redux?

Can I use Redux with non-React UI libraries?

What are the rules followed by reducers?

What is the difference between the mapStateToProps() and mapDispatchToProps() methods?

What is a store enhancer?

Redux middleware – Saga and Thunk

What is Redux middleware? How do you create middleware?

How do you handle asynchronous tasks in Redux?

What are the use cases of Redux Thunk?

What is Redux Saga?

How do you choose between Redux Saga and Redux Thunk?

Standardizing Redux logic using RTK

What is RTK?

What are the problems solved by RTK?

What is RTK Query? How do you use it?

Debugging applications using Redux DevTools

What is Redux DevTools?

What are the major features of Redux DevTools?

Summary

7

Different Approaches to Apply CSS in ReactJS

Technical requirements

Different ways to apply CSS

How do we import external style sheets?

How do we use inline styles?

How do we use Atomic CSS?

Exploring processors and CSS Modules

What are CSS processors?

How do we use CSS processors?

What are CSS Modules?

How do we use CSS Modules?

CSS-in-JS approach and styled-components and its usage

What is CSS-in-JS?

What are styled-components and how are they used in React projects?

How to use styled components in React applications

How do we use styled components?

Summary

8

Testing and Debugging the React Application

Technical requirements

Introducing React testing helpers

What is testing in software development?

How do we do testing in React applications?

How do you set up a test environment for a React application?

How do you choose a testing framework or library?

What are the fundamentals of React Testing Library?

Testing our software

How do we write tests for components, props, and events?

Managing data in our applications

How do we mock data for tests?

Why should we use mock data in tests?

Code execution using events and timers

What are events?

What are timers?

Using React DevTools for debugging and analysis

Summary

9

Rapid Development with Next.js, Gatsby, and Remix Frameworks

Using React as a full stack framework

What is Next.js?

What is Gatsby?

What is Remix?

Static site generation

Why should you care about SSG?

What are the advantages of using a static site generator?

Why are speed and performance so good in static websites?

Server-side rendering

What is SSR and why is it important?

How does SSR work? The fundamentals of SSR page loading

What are the advantages of SSR?

What are the disadvantages of SSR?

Adding page metadata

What is page metadata and why is it important for SEO?

What types of page metadata can be used for SSG?

SEO best practices

Summary

Part 4: Hands-On with Programming Tasks

10

Cracking Any Real-World Programming Task

Technical requirements

Preparing your development environment

Why do you need a good development environment?

What is the difference between an IDE and a text editor/code editor?

How do you set up a React development environment?

Choosing the right scaffolding tools or templates

What is scaffolding in programming?

How do you determine which project factors to take into account when creating a project?

Deciding on the application architecture

What do we need to think about when choosing an application architecture?

Testing your code

Why should you use version control while testing your code?

Which testing and change-tracking tools you should utilize for your code base?

Creating a Git repository with a README and sharing it

Why is creating a code repository with good documentation crucial?

How do you create a Git repository?

Summary

11

Building an App Based on React, Redux, Styled Components, and the Firebase Backend

Technical requirements

Scaffolding and configuring the project

Introducing Firebase services and configuring the application

What are the main features of Firebase?

How do you set up and configure Firebase for authentication and data storage?

Where do you put Firebase configuration securely in the project?

Implementing Firebase Authentication and its backend

How do you implement Firebase authentication for sign-in, sign-up, and sign-out scenarios?

How do you implement cloud store data operations? Can you explain data operations with any collection?

Building the Redux components for state management

How do you work with multiple reducers in a Redux application?

Building the presentation layer

How do you implement a custom button using styled-components?

Implementing business-specific UI components

Implementing application pages using UI components

Supporting internationalization

How do you achieve internationalization through an imperative API?

Implementing testing using the Vitest framework

Creating a Git repository with README documentation

Deploying the application for public access

Summary

12

Building an App Based on the Next.js Toolkit, Authentication, SWR, GraphQL, and Deployment

Technical requirements

Quick introduction to REST APIs

What tools can we use for testing our APIs?

Which features are available in a REST API?

What is the difference between requests and responses when making requests to a REST API?

Why is authentication important when using a REST API?

How can we use error handling when integrating with a REST API?

What is the difference between a REST API and GraphQL?

How do we fetch data using REST APIs and GraphQL?

Planning the application architecture including authentication, SWR, GraphQL, and deployment

Why are serverless frameworks such as Next.js a brilliant choice for building modern applications?

What authentication is available in Next.js applications?

How does SWR allow fast data retrieval?

How can GraphQL integration optimize our data fetching?

How do we deploy our Next.js applications online?

What strategies can we use for scaling and maintaining our application architecture as it grows?

Working on our coffee restaurant project

Building the business logic

Configuration files setup

Building the app

Building the presentation layer

Implementing testing

Creating a Git repository with README documentation

Deploying the application for public access

Summary

Index

Other Books You May Enjoy

Preface

Hello there! The Complete ReactJS Interview Guide is a book that will assist developers in getting ready for a React interview in order to land a job. You will discover several tactics and ideas to ace your upcoming React interview in this book.

This book will cover all the different steps when getting ready for a React interview, starting from the preparation phase and going all the way to building some real-world projects, where you will gain insight to help you complete the take-home programming assignments in the final chapters.

The React ecosystem is quite vast, so many topics will be discussed throughout so that you get a fairly broad understanding of many of the most talked-about features and concepts related to React. Some of the topics we will touch on include state, components, Hooks, and testing.

Who this book is for

Aspiring web developers, programmers, and React developers can gain practical knowledge on how to perform well in React interviews.

The three main personas who are the target audience of this book are as follows:

Aspiring web developers: Developers who are new to programming and want to learn React from the ground up and wish to crack React interviews

Programmers: Any programmer who wishes to expand their knowledge and skillset by learning about React and how to do well in interviews

React developers: They will gain insight into upgrading their existing React skills, leading to further career progression as a React developer

What this book covers

Chapter 1, Brace Yourself for Interview Preparation, provides an introduction to how to best prepare for upcoming React-based interviews. It will cover preparing a résumé and cover letter, as well as tips on creating a GitHub profile or website. The chapter will also discuss how to find work on job boards and LinkedIn and how meetups and referrals can assist with job searches. Additional interview tips are recommended.

Chapter 2, Understanding ReactJS Fundamentals and Its Major Features, provides an overview of some of the core fundamentals of ReactJS, covering many of the main topics, which include the JSX language, state, and props, as well as class and functional components. The chapter will also explain event handling, the virtual DOM, data flow, the context API, and how to do server-side rendering.

Chapter 3, Hooks: Bring State and Other Features into Functional Components, provides an overview of the various hooks that are available to use in ReactJS alongside their use cases. At the end of the chapter, you will learn how to create your own custom hooks.

Chapter 4, Handling Routing and Internationalization, provides an overview of how to handle routing and internationalization. The chapter primarily covers the React Router library and how to do page routing within a React application. Numerous topics are covered, including routes, links, parameters, translation, and how to pass arguments and placeholders.

Chapter 5, Advanced Concepts of ReactJS, provides an overview of advanced concepts in ReactJS. This chapter goes into detail on how to use error boundaries, portals, debugging with the Profiler API, strict mode, and concurrent rendering. The chapter also covers code splitting in addition to using React when in a mobile environment.

Chapter 6, Redux: The Best State Management Solution, provides an overview of how we can use Redux inside of our React applications. The chapter discusses the Flux pattern and Redux, going over their core principles and how to use them to manage the state within an application. With the help of this chapter, you will also learn about Redux middleware, Saga, Thunk, DevTools, and testing.

Chapter 7, Different Approaches to Apply CSS in ReactJS, provides an overview of how we can incorporate CSS into our React applications. There are different implementations, such as using processors, CSS Modules, CSS-in-JS, and styled-components, all of which will be discussed.

Chapter 8, Testing and Debugging the React Application, provides an overview of the concepts of testing and debugging within a React application. The chapter will go into detail on using React testing helpers, as well as the steps to perform a setup and teardown. Setups and teardowns are done while writing tests because we frequently need to do configurations before the tests run, and also at the end after the tests have finished running.

As well as data fetching and mocking, you will also gain knowledge on how to create events and timers and how we can use the React DevTools to do our debugging and analysis.

Chapter 9, Rapid Development with Next.js, Gatsby, and Remix Frameworks, provides an overview of how it’s possible to use React to build full stack applications. The chapter aims to give an insight into using frameworks such as Next.js, Remix, and Gatshy to develop their React applications. You will also learn how to do static site generation, server-side rendering, and add page metadata.

Chapter 10, Cracking Any Real-World Programming Task, provides an overview of how to prepare for upcoming programming take-home assignments or code challenges when going through an interview process. You will learn how to set up a development environment and about the right tools and templates for a project. It is also important for you to learn about the benefits of choosing the right architecture, the reasons for good code testing, and how to share the project on GitHub, which will be covered here.

Chapter 11, Building an App Based on React, Redux, Styled Components, and the Firebase Backend, provides an overview of how to build a React application that connects to a Firebase database. The chapter will go into detail about how to best plan the architecture for the application, how to create the business logic and presentation layer, and how to set up the testing layer. When everything has been completed, you will learn how to deploy the application to GitHub so that it can be viewed publicly online.

Chapter 12, Building an App Based on NextJS Toolkit, Authentication, SWR, GraphQL, and Deployment, provides an overview of how to build a React application that has an authentication layer. The chapter will go into detail about how to best plan the architecture for the application and, in this case, use SWR and GraphQL, followed by the creation of the business logic and presentation layer, and setting up the testing layer. When everything has been completed, you will learn how to deploy the application to GitHub so that it can be viewed publicly online.

To get the most out of this book

Readers should have knowledge of JavaScript or any similar programming languages, frameworks, or libraries. Prior knowledge of React is welcome but not required. Having a basic understanding of programming concepts and methodologies is recommended.

Readers should have a programming setup with an integrated development environment (IDE), a command-line interface (CLI) application, and any tools, frameworks, libraries, or packages installed, such as NodeJS, npm, and Next.js.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/React-Interview-Guide. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: The child components can consume the context using the useContext hook.

A block of code is set as follows:

import { useContext } from 'react';

import { UserContext } from './context';

function MyChildComponent() {

  const currentUser = useContext(UserContext);

  return {currentUser};

Any command-line input or output is written as follows:

git status

git add .

git commit -m vercel graphql endpoint for uri

git push