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 in 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 specific 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.
- Inline CSS - Styling React elements using inline CSS allows styles to be completely scoped to an element using a well-understood, standard approach.
- 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.
- 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.
- 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:
- A new type of licence, from now on its MIT, you can use React library for commercial use
- New types returned by render, now you can return string or array of elements
- Portals - it's a new, better way of rendering elements outside the component in which it was created
- Fragments
- Context API
- Lazy
- Hooks
- Better error handling by
error boundaries- components catching and registering errors - Improvement of Server-Side Rendering
- Files size-reduction - modules of React and react-dom has been reduced by 32%
What are Higher Order Components?
Higher-Order Component is an advanced React techniques 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
What are the options to manage state in React?
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. We can use Context API or several libraries like Redux, Recoil, we could also use React Hooks.
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. Difference between these two objects is major. props are passed to a component like an 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 through 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:
- Semantic markup
- Upgrading semantic markup with ARIA (Accessible Rich Internet Applications)
- Using an element's focusing styling
- Keyboard navigation
- Descriptive Alt text for images
- Headings levels
- Labelling forms elements
- Document language
- 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?
Each API call has three base actions associated with it:
- REQUEST
- SUCCESS
- FAIL
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 test React components?
There are two popular approaches to unit testing React components:
1.Enzyme - is an testing library created by Airbnb where we are testing the component using the state and props of the component. It provides useful functions such as shallow, mount or render. With a shift towards functional components many of Enzyme's methods for testing class instances are no longer useful and for that reason React team recommends using React Testing Library.
2.react-testing-library - is an alternative to Enzyme and encourage you to test actual DOM nodes and users interaction with components rather then implementation.
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:
- Official Documentation
- Blog by Dan Abramov
- Tutorials by Lee Robinson:Mastering Next JS and React 2025
- React Accessibility on MDN
- Nader Dabit on YouTube
- React Testing Library Tutorial by Robin Wieruch
Special thanks to Marek and Tomek for reviewing this post.
Photo by Clem Onojeghuo on Unsplash
Top comments (5)
Since you already included jest, you should probably also include testing-library, which is a library that will help you write user-centric unit tests with ease. It also has some useful facilities to test components and hooks.
Did you mean as an another question?
Either that or part of the answer.
I have now modified before the last one question. Let me know if it make sense to you.
That's good, putting it into context.