So you're preparing for your next mobile development interview? Assuming that the company is working with the popular mobile app development framework, React Native, you are in the right place.
The interviewer is going to test your React Native knowledge, so let's make sure you're prepared for any questions coming your way. In this article, I'll go through some of the most common React Native interview questions and provide the answers so you can confidently demonstrate your knowledge of the framework.
1. Why use React Native over other frameworks?
React Native is a cross-platform framework. The use of a single codebase for two platforms (iOS and Android) saves time and money, which is perhaps the most obvious reason to go with React Native. However, it’s not React Native’s only specialty.
You can demonstrate your in-depth knowledge of React Native by explaining the following reasons.
Native Experience
The Native experience provision is the best feature of React Native, as opposed to the mobile framework Ionic. Because Ionic is built on top of the web browser, application code cannot easily access native functionalities. Ionic uses HTML/CSS, allowing you to call native apps; however, the smoothness of basic functions such as the keyboard, maps, navigation, camera, and so on cannot be guaranteed. React Native, on the other hand, interacts directly with native UI widgets rather than using Web View Component or making calls to pre-existing native apps via HTML code or creating replicas of native apps.
Flexibility
React Native does not bind you to its code alone. React Native allows you to generate platform-specific code in Xcode if you want to code natively in Swift. You can use React Native to compile a native iOS app and then program features directly in iOS using Swift or Objective-C to implement features that aren’t available in React Native or are easier to implement within iOS.
React Native is also compatible with third-party plugins, making it even more flexible. You can accelerate the development process even further by using open-source libraries of pre-built components. Because cross-bridge linking is not required and most of the code is used during run-time, it also doesn’t consume much memory space.
Perform Live Updates without the App Store Approval
Waiting for App Store approvals for updates can take a long time. React Native allows you to remotely update your application codebase via CodePush from Microsoft App Center, rather than going through the entire process of submitting the updated version of your app to the App Store and then waiting for it to be approved, as you would with frameworks like Flutter.
2. What are the Basic Components used in a React Native app?
Most React Native apps will use at least one of the following basic components, which every React Native developer will come across.
View — The most basic component for creating a React Native UI. VIew supports layout with flexbox, style, some touch handling, and accessibility controls.
Text — A React component for displaying text that also supports nesting, styling, and touch handling.
Image — A React component for displaying various types of images, including camera roll images.
ScrollView — A scrolling container that can hold multiple components and views.
TextInput — The basic component for entering text into the app using a keyboard.
StyleSheet — StyleSheet is an abstraction similar to CSS StyleSheets that allows you to define styles for various containers.
3. What's the difference between ScrollView and FlatList?
ScrollView and FlatList are both used to display a list of components in a React Native app. However, ScrollView has a performance disadvantage.
ScrollView will load all of the items as soon as the component is loaded. As a result, all data is stored in RAM, and the more data there is, the slower the performance.
FlatList, on the other hand, renders items lazily; by default, it will mount 10 items to the screen, and as the user scrolls the view, additional items will mount.
You can use ScrollView for a small number of items and FlatList for a larger number of items.
4. Class Components vs Functional Components, what to use?
Components in React can be created using either classes or functions. Previously, only class components could have states, but with the introduction of Hooks, you can now use state in function components as well.
We write fewer lines of code with functional components, and it’s much easier to read and test. So, do Class Components still need to be used?
Yes, there may be times when we need to use Class Components in modern React Native apps, such as when handling JavaScript errors with Error Boundaries because there is no Error Boundaries Hook introduced yet.
Aside from that, it is preferable to use functional components when developing your apps.
5. What is the use of the useEffect hook?
We can perform side effects in function components by using the useEffect Hook. Fetch requests, direct DOM manipulations, and the use of timer functions such as setTimeout() are examples of side effects.
Previously, these side effects were accomplished through the use of lifecycle methods such as componentDidMount(), componentDidUpdate() and componentWillUnmount(). useEffect Hook is a combination of all these methods. It accepts a callback function that is called whenever a render occurs.
By default, useEffect Hook runs after the first render as well as after each update. The useEffect Hook helps to avoid redundant code and group related code.
Consider the following example to better understand the useEffect Hook for the replacement of the componentDidMount() lifecycle method.
import React, { useState, useEffect } from "react";
function Time() {
const [date, setDate] = useState(new Date());
useEffect(() => {
setInterval(() => {
setDate(new Date());
}, 1000);
}, []);
return <div>Time: {date.toLocaleTimeString()}</div>;}
6. What is Props Drilling and how to avoid it?
Props drilling is the process of passing props from one part of a tree to another by passing them through other parts that do not require the data but only assist in passing it through the tree.
For example, if we want to change the theme of the app, we may pass a theme prop through every part of the component tree, including parts that do not require the prop.
Although there is nothing inherently wrong with props drilling, it complicates your application unnecessarily.
One of the best ways to avoid props drilling is to use the Context API. Context allows us to pass data directly to the required components. We can use React Context for props like UI theme, currently authenticated user, or language.
7. How to implement Networking in React Native?
For our networking requirements, React Native includes the Fetch API and the XMLHttpRequest API. Fetch API is a more modern and developer-friendly native JS implementation that makes it easier to make asynchronous requests and handle responses.
fetch(request)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong!');
}
})
.catch((error) => {
console.error(error);
});
Fetch also accepts an optional second argument, which allows us to customize the HTTP request. For example, we can use it to specify additional headers or to make a POST request.
fetch(request, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
});
Furthermore, we can use third-party libraries like axios or frisbee to implement networking in React Native as well.
8. What is Async Storage and when should it be used?
Async Storage is a React Native community-maintained module that provides an asynchronous, unencrypted key-value store. It’s essentially React Native’s version of web-based Local Storage.
Async Storage is useful when we need to store global app-wide variables, persisting GraphQL or Redux states, or any other non-sensitive data that we want to keep even after the user closes the app.
Because Async Storage can only store string data, object data must be serialized before it can be stored.
Furthermore, we should not store sensitive data, such as tokens, in Async storage, nor should we store large amounts of data.
Github — Async storage react native
9. Why are the animations in React Native so smooth?
React Native’s Animated API was designed to be serializable, allowing users to send animations to native without having to go through the bridge on every frame.
Once the animation begins, the JS thread can be blocked, and because the code is converted into native views before rendering, the animations will continue to run smoothly.
Before being executed, certain types of animation, such as Animated.timing and Animated.spring, can be serialized and sent across the asynchronous bridge.
10. How to debug React Native applications?
Many debugging tools are available to debug our React Native apps thanks to a large number of React Native contributors.
Chrome DevTools is the simplest way to debug your code without installing any additional apps. React Native by default supports ChromeDev tools via its remote debugging capability.
When debugging with React DevTools, you can debug the component hierarchy as well as select and edit the component’s current props or state.
If you’re using Redux in your React Native app, the best debugger to use is React Native Debugger. It is a desktop application that runs on Mac, Windows, and Linux and combines Redux and React DevTools into a single app. You can use React Native Debugger to log or delete Async Storage content, inspect network requests, and detect and diagnose performance problems.
Final Thoughts
Although there are a lot of different interview questions you could be asked about React Native, I think these ten mentioned above cover the most common topics. So read through the answers again and make sure prepared for your upcoming React Native interview.
If you found these questions helpful, let me know and I can put together another list of more advanced questions! In the meantime, keep learning and paving the way to your dream.
Thank you for reading, and happy coding!
