Frequently asked: React Native Interview Questions and Answers
Q1. What is JSX?
It is a syntax extension to JavaScript which stands for JavaScript XML. It is like a template language but with full features of JavaScript. JSX produces React Elements. Instead of separating the UI into HTML and JS files, React separates concerns with loosely coupled units called Components that combine both. A simple example of JSX would be
We can put any valid JavaScript expression inside the curly braces in JSX. Although React does not require JSX, it is a recommended way of writing UI and is followed widely.
Q2. Explain VirtualizedList?
VirtualizedList should only really be used if we need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays. Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.
Q3. What is SafeAreaView?
The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches
Q4. Explain forwardRef in React?
forwardRef is a method that allows parent components to pass down (i.e., “forward”) refs to their children. Using forwardRef in React gives the child component a reference to a DOM element created by its parent component. This then allows the child to read and modify that element anywhere it is being used. Ref forwarding is a technique for automatically passing a ref through a component to one of its children. It’s very useful when building reusable component libraries. forwardRef is a function used to pass the ref to a child component.
Q5. How to use React Hooks with Redux?
React Redux includes its own custom hook APIs, which allow our React components to subscribe to the Redux store and dispatch actions. The useSelector() hook allows us to extract data from the Redux store state, using a selector function. The selector is approximately equivalent to the mapStateToProps argument to connect conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders. Basic usage of useSelector is as follows:
When using useSelector with an inline selector, as shown above, a new instance of the selector is created whenever the component is rendered. When the selector does only depend on the state, simply ensure that it is declared outside of the component so that the same selector instance is used for each render:
Q6. What is useStore hook?
This hook returns a reference to the same Redux store that was passed into the component. This hook should probably not be used frequently. Prefer useSelector() as your primary choice. However, this may be useful for less common scenarios that do require access to the store, such as replacing reducers.
Q7. What is Gesture Responder System?
The gesture responder system manages the lifecycle of gestures in your app. There are three steps that define any gesture. A start event, a series of move events, and a final one, the release event. Every view can keep track of this, which means that each view can ask the gesture responder to act in a certain way when interacting with. To do so, there is a bunch of properties every View component comes with. If we want to make our view respond to the gesture and become interactive, then we should define two of these two responder lifecycle methods: onStartShouldSetResponder and onMoveShouldSetResponder. Then when touching this View, we’ll get all the touch events within it. If the View returns true and attempts to become the responder, one of the following will happen:
• onResponderGrant: (evt) => {} — The View is now responding for touch events. This is the time to highlight and show the user what is happening
• onResponderReject: (evt) => {} — Something else is the responder right now and will not release it If the view is responding, the following handlers can be called:
• onResponderMove: (evt) => {} — The user is moving their finger
• onResponderRelease: (evt) => {} — Fired at the end of the touch, ie “touchUp”
Q8. What is Fast Refresh in React Native?
Fast Refresh is a React Native feature that allows us to get near-instant feedback for changes in our React components. Fast Refresh is enabled by default, and we can toggle “Enable Fast Refresh” in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two. If we make a syntax error during a Fast Refresh session, we can fix it and save the file again. The redbox will disappear. Modules with syntax errors are prevented from running, so we won’t need to reload the app. When possible, Fast Refresh attempts to preserve the state of your component between edits. In particular, useState and useRef preserve their previous values as long as we don't change their arguments or the order of the Hook calls. Hooks with dependencies—such as useEffect, useMemo, and useCallback will always update during Fast Refresh. Their list of dependencies will be ignored while Fast Refresh is happening.
Q9. How to check if a React Native app is in foreground or background?
We can use AppState to check if the app is in the foreground or background, and also detect when the state changes. AppState is frequently used to determine the intent and proper behavior when handling push notifications. To see the current state, we can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.
Q10. How to get the color scheme of the React Native app?
The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
There are three possible values:
• "light": The user prefers a light color theme.
• "dark": The user prefers a dark color theme.
• null: The user has not indicated a preferred color theme.
Q11. What is props in React Native?
props (pronounced as the properties of React Native Components) are the immutable parameters passed from a Parent component to provide data. These properties are used to customize the components. For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.
This will help us to create one component and use it in many places with different properties.
Q12. What is React Hooks?
Hooks are the new feature introduced in the React 16.8 version. It allows us to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes. Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace our knowledge of React concepts. If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component. There are some rules while using React Hooks:
1. Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.
2. We cannot call Hooks from regular JavaScript functions. Instead, we can call Hooks from React function components. Hooks can also be called from custom Hooks. React provides some built-in hooks that are divided into two groups:
Basic and Additional:
- Basic Hooks : useState, useEffect and useContext
- Additional Hooks: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect and useDebugValue
To read more Interview Questions and answer download our Android App from play store:
https://play.google.com/store/apps/details?id=com.vigowebs.interviewquestions
Our app contains 1400+ Interview Questions and answers with clear code examples from frontend to backend technologies.
