Web Development Tips for Beginners

If you are preparing for a React Native interview, or you simply want to strengthen your mobile app development fundamentals, you have landed on the right page. React Native continues to be one of the most in-demand frameworks for building cross-platform mobile apps, and interviewers love to test candidates on everything from basic JSX syntax to advanced performance optimization techniques.

In this guide, we are going to walk through the most commonly asked React Native questions and answers, step by step, in a simple conversational way — just like you are sitting across the table from a senior developer who is helping you prepare. We will also cover the important commands you will use almost every day while working with React Native, so keep this page bookmarked for quick revision.

Let’s get started.

1. What is React Native, and why is it so popular?

React Native is an open-source framework created by Meta (formerly Facebook) that lets you build mobile applications using JavaScript and React. The biggest advantage is that you write your code once, and it runs on both Android and iOS, which saves a huge amount of development time and cost.

It is popular because it uses native components under the hood instead of web views, which means the apps feel fast and native, not like a website wrapped inside an app. On top of that, it has a massive community, a huge library ecosystem, and hot reloading, which makes the development experience genuinely enjoyable.

2. How is React Native different from React.js?

This is one of the most common questions asked to freshers. React.js is a JavaScript library used to build user interfaces for the web, and it renders HTML elements in the browser using the DOM. React Native, on the other hand, is used to build mobile applications, and instead of rendering HTML tags like div or span, it renders native components like View, Text, and Image, which map directly to native Android and iOS UI elements.

So while both share the same core concepts — components, props, state, and JSX — the rendering target is completely different.

3. What is JSX, and why do we use it in React Native?

JSX stands for JavaScript XML. It allows us to write HTML-like syntax directly inside our JavaScript code, which then gets compiled into regular JavaScript function calls. Instead of writing verbose React.createElement calls, we can simply write something like this:

<View>
  <Text>Hello, world!</Text>
</View>

This makes the code far easier to read and write, and it lets us combine markup and logic in a natural way, which is one of the reasons React and React Native feel so intuitive once you get used to them.

4. What are the core components in React Native?

React Native ships with a set of built-in components that map to native UI elements. The most commonly used ones include:

View — the basic building block, similar to a div in web development, used for layout and grouping.
Text — used to display any text on the screen.
Image — used to display images from local assets or remote URLs.
ScrollView — a scrollable container for content that doesn’t fit on one screen.
FlatList — used for rendering large, scrollable lists efficiently.
TextInput — used to take text input from the user.
TouchableOpacity / Pressable — used to make elements tappable with visual feedback.

Knowing when to use FlatList instead of ScrollView is a favorite interview question, because FlatList renders items lazily, which is much better for performance with long lists.

5. How do you set up a React Native project from scratch?

There are two popular ways to start a React Native project — using the React Native CLI, or using Expo. If you want full control over native code, you go with the CLI. If you want a faster setup with fewer native headaches, Expo is the easier path.

Here are the commands you’ll typically use to get a new project running:

npx react-native init MyAwesomeApp
cd MyAwesomeApp
npx react-native run-android
npx react-native run-ios

If you are using Expo instead, the commands look like this:

npx create-expo-app MyAwesomeApp
cd MyAwesomeApp
npx expo start

6. What is the difference between the React Native CLI and Expo?

This is a question interviewers love to ask because it shows whether you actually understand the ecosystem, not just the syntax. The React Native CLI gives you complete access to native code, so you can add any native module you want, but you need Android Studio and Xcode set up on your machine, and the setup process can be time-consuming.

Expo, on the other hand, provides a managed workflow where a lot of the native configuration is handled for you. It’s faster to get started, works great for most apps, and you can even test on a real device instantly using the Expo Go app. The trade-off is that certain custom native modules may require you to “eject” or use a development build.

7. What are props in React Native?

Props, short for properties, are how we pass data from a parent component to a child component. They are read-only, meaning a child component cannot modify the props it receives — it can only use them. Here’s a quick example:

function Greeting(props) {
  return <Text>Hello, {props.name}</Text>;
}

<Greeting name="Rupesh" />

Props make components reusable and predictable, which is exactly why React’s component model scales so well for large applications.

8. What is state, and how is it different from props?

State is data that belongs to a component itself, and unlike props, it can change over time based on user interaction or other events. When state changes, React automatically re-renders the component to reflect the new data.

The key difference is ownership: props are passed down from a parent and are immutable from the child’s perspective, while state is managed internally by the component and is mutable through specific functions like setState or the useState hook.

9. What are hooks in React Native, and why were they introduced?

Hooks are special functions that let you use state and other React features inside function components, without needing to write a class. Before hooks were introduced, you had to use class components if you wanted local state or lifecycle methods, which often led to bulkier, harder-to-read code.

Hooks solved this by letting you write the same functionality in a much cleaner, more reusable way. They also make it easier to share logic between components using custom hooks.

10. Explain useState with an example.

useState is the most commonly used hook, and it lets you add state to a function component. It returns an array with two elements: the current state value, and a function to update it.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Every time setCount is called, React re-renders the component with the new value of count.

11. Explain useEffect and when you would use it.

useEffect lets you perform side effects in function components, such as fetching data from an API, subscribing to an event, or manually updating something outside of React’s rendering flow. It runs after the component renders, and you can control exactly when it runs by passing a dependency array.

useEffect(() => {
  fetchUserData();
}, []);

In this example, the empty array means the effect runs only once, right after the component mounts — similar to componentDidMount in class components. If you include variables inside the array, the effect will re-run whenever those variables change.

12. What is the difference between useEffect’s dependency array being empty, omitted, or containing values?

This trips up a lot of developers, so let’s break it down clearly:

No dependency array at all — the effect runs after every single render.
An empty array [] — the effect runs only once, after the initial render.
An array with values [count] — the effect runs after the initial render, and again every time any value inside that array changes.

Getting this wrong is one of the most common sources of bugs and infinite loops in React Native apps, so interviewers often probe this topic deeply.

13. What is prop drilling, and how do you avoid it?

Prop drilling happens when you need to pass data through several layers of components just so a deeply nested child can access it, even though the components in between don’t actually need that data themselves. It makes code messy and hard to maintain.

The common ways to avoid prop drilling are the Context API, which lets you share data across the component tree without manually passing props at every level, or a dedicated state management library like Redux or Zustand for larger applications.

14. What is the Context API, and when should you use it?

The Context API is a built-in React feature that allows you to share values, like a logged-in user or a theme, across your component tree without passing props manually at every level. You create a context using createContext, wrap your component tree with a Provider, and then any child component can access that value using the useContext hook.

It’s best suited for relatively simple, low-frequency updates like themes, authentication status, or language preference. For complex state with frequent updates across a large app, a dedicated state management library is usually a better fit.

15. What is Redux, and why do developers still use it?

Redux is a predictable state management library that stores your entire application’s state in a single central store. Components can read from this store and dispatch actions to update it, and the update logic lives in pure functions called reducers.

Even though newer alternatives exist, Redux is still widely used because it’s predictable, has excellent developer tools for debugging state changes, and works extremely well for large applications where many components need to share and update the same data.

16. What are the alternatives to Redux for state management?

Some popular alternatives that come up in interviews include:

Context API + useReducer — good for small to medium apps without adding extra dependencies.
Zustand — a lightweight, minimal-boilerplate state management library.
MobX — uses observable state and reactive updates.
Recoil — designed specifically for React, with a focus on fine-grained state updates.

The right choice really depends on the size of your app and how complex your shared state needs to be.

17. How does navigation work in React Native?

React Native does not come with built-in navigation, so developers typically use a library like React Navigation, which is the most popular choice. It lets you set up different types of navigators, such as:

Stack Navigator — screens are stacked on top of each other, like a typical app flow where you push and pop screens.
Tab Navigator — used for bottom tab bars, common in most consumer apps.
Drawer Navigator — a side menu that slides in from the edge of the screen.

Here’s how you would install and set up basic stack navigation:

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

18. How do you pass data between screens in React Navigation?

You pass data between screens using route params. When navigating to a screen, you pass a second argument with the data you want to send:

navigation.navigate('Profile', { userId: 42 });

And on the receiving screen, you access it like this:

function ProfileScreen({ route }) {
  const { userId } = route.params;
  return <Text>User ID: {userId}</Text>;
}

19. How do you make an API call in React Native?

The most common way is using the built-in fetch API, or a library like Axios if you want extra features like interceptors and easier error handling. Here’s a typical example using fetch inside useEffect:

Uncategorized