Prev Next

Web / React native

1. What is React-native framework? 2. Mention a few core components in React-native? 3. What is JSX? 4. What are Props in React-native? 5. What is state in React-native components? 6. Difference between state and props in React. 7. What is REDUX? 8. What is REDUX Ducks pattern? 9. What are hooks in React/React-native? 10. Difference between Flux and Redux. 11. Difference between useEffect hook and useLayoutEffect. 12. What are native apps? 13. Benefits Of Native Mobile App Development. 14. What is an Offline first application? 15. What is Javascript Obfuscator? 16. What is Component-Driven Development? 17. What is the use of watchman for react native? 18. What are Refs used for in React Native? 19. What is the default value of position CSS property in react-native? 20. What are the different ways to create React components? 21. Difference between Functional component and class-based component in React. 22. What is useFocusEffect hook in React navigation? 23. What is react-navigation? 24. What are the 2 axes of flexbox? 25. What is marginVertical CSS property? 26. Differentiate: ScrollView vs FlatList elements. 27. What are the 3 fundamental principles of REDUX? 28. Types of React navigation. 29. Explain stack navigator in React navigation. 30. Difference between React Native and React. 31. What is React native elements library? 32. Common performance issues in React native app development. 33. What is React Native Bridge? 34. Explain different Threads in ReactNative. 35. What is Redux in React Native? 36. Is there any difference between declaring a function inside or outside the component's body? 37. Does useSelector cause a re-render of the component? 38. When do the React components rerender? 39. What is the first file in React applications? 40. How different is React-native from ReactJS? 41. What is a Flexbox? 42. What is State and how is it used in React Native? 43. What is flipper in React-Native? 44. Mention the differences between redux persist and redux offline packages if you have used it. 45. What are the Class component lifecycle methods in React? 46. Explain useFocusEffect hook in React-native. 47. What is Redux middleware? 48. Have you used SafeAreaView in your react-native project? Why did you use it? 49. Difference between useLayoutEffect and useEffect. 50. How do I navigate to a component from middleware/component where there are no navigation props? 51. What is the benefit of using StyleSheet vs a plain object?
Could not find what you were looking for? send us the question and we would be happy to answer your question.

1. What is React-native framework?

React Native is an open-source framework for building Android and iOS applications using React and the app platform's native capabilities. With React Native, you use JavaScript to access your platform's APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code.

The concepts are based on react framework. React Native runs on React, a popular open-source library for building user interfaces with JavaScript.

2. Mention a few core components in React-native?

Core Component include,

  • <View>, a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
  • <Text>, displays, styles, and nests strings of text and even handles touch events.
  • <Image>, displays various types of images.
  • <ScrollView>, a generic scrolling container that can contain multiple components and views.
  • <TextInput>, allows the user to enter text.
3. What is JSX?

React and React Native use JSX, a syntax that lets you write elements inside JavaScript like so: <Text>Hello, I am your cat!</Text>.

JSX is a syntax extension to JavaScript and it produces React elements. It also renders variables and expressions.

4. What are Props in React-native?

Props is short for "properties". Props let you customize React components. For example, here you pass each <Cat> a different name for Cat to render:

import React from 'react';
import { Text, View } from 'react-native';

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

5. What is state in React-native components?

State is useful for handling data that changes over time or that comes from user interaction. The state tracks your component variables and acts as private storage for your component.

Use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.

6. Difference between state and props in React.

Props are passed from a parent component, but the state is managed by the component itself. A component cannot change its props, but it can change its state.

7. What is REDUX?

Redux is a state management tool for JavaScript applications. You can use Redux together with React, or with any other view library.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Redux is made up of the following key parts:

  • actions,
  • reducers,
  • store,
  • dispatch,
  • selector.

8. What is REDUX Ducks pattern?

Ducks is essentially a proposal for bundling reducers, action types, and actions of REDUX into the same file.

9. What are hooks in React/React-native?

Hooks are the new feature introduced in the React 16.8 version. It allows you 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.

useState and useEffect are few examples of React hooks.

10. Difference between Flux and Redux.

The primary difference between Flux and Redux is that Flux uses multiple Stores per app, but Redux uses just one Store per app. Rather than placing state information in multiple Stores across the application, Redux keeps everything in one region of the app.

11. Difference between useEffect hook and useLayoutEffect.

The main difference between useEffect hook and useLayoutEffect hook is in the timing of their invocation. useEffect hook is invoked after the DOM is painted. useLayoutEffect hook on the other hand is invoked synchronously before changes are painted on the screen.

Use useLayoutEffect hook instead of useEffect hook if your effect will mutate the DOM. useEffect hook is called after the screen is painted. Therefore mutating the DOM again immediately after the screen has been painted, will cause a flickering effect if the mutation is visible to the client.

12. What are native apps?

Native mobile apps are the most common type of apps that are built for specific platforms and are written in languages that is platform specific. For example, Swift and Objective-C for native iOS apps and Java or Kotlin for native Android apps.

Native apps are also built using the specific Integrated Development Environment (IDE) for the selected operating systems such as Android Studio and Xcode for IOS.

13. Benefits Of Native Mobile App Development.

  • Native Apps have the best performance.
  • Native Apps are more Secure.
  • Native Apps are more Interactive And Intuitive.
  • Native Apps allow developers to access the full feature set of devices.
  • Native App development tends to have fewer bugs.
14. What is an Offline first application?

Offline first is an application development paradigm where developers ensure that the functionality of an app is unaffected by the intermittent lack of a network connection. In addition to that, "offline first" usually implies the ability to sync data between multiple devices.

15. What is Javascript Obfuscator?

JavaScript Obfuscator converts or encodes the actual source code of JavaScript to an unreadable format by making the code into machine-level language because stealing the code from the unauthorized end user. This process is 100% safe in JavaScript and the best way to protect source code.

16. What is Component-Driven Development?

Component-Driven Development (CDD) is a development methodology that anchors the build process around components. It is a process that builds UIs from the "bottom-up" by starting at the level of components and ending at the level of pages or screens.

In this methodology, we split the complete UI design into several small reusable components and develop them independently, and the complete UI is built by composing these small components.

17. What is the use of watchman for react native?

React Native uses watchman to detect when you've made code changes and then automatically build and push the update your device without you needing to manually refresh it.

The Facebook watchman service is designed to scale to very large filesystem trees and to aggregate watching resources across multiple projects.

18. What are Refs used for in React Native?

Refs provide a way to access DOM nodes or React elements created in the render method.

There are a few good use cases for refs:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

19. What is the default value of position CSS property in react-native?

The default value for position property is relative whereas in browser it is static.

20. What are the different ways to create React components?

There are 2 ways of writing a react component.

Functional component uses a simple function which returns the JSX.

Class based component uses the class keyword introduced in ES6. it implements render lifecycle method which returns the JSX.

21. Difference between Functional component and class-based component in React.

Functional component.Class-based component.
Functional component cannot have state ( before React hooks, now it can have state with React 16.8 or higher). It renders component only based on props that are supplied from the parent.A class-based component can have component level state.
Functional component are simple functions and light weighted. These are functions that accepts props as an argument and returns a React element.A class-based component is a complex structure. It is an instance of a class derived from React. Component class. The class must implement a render() member function which returns a React component to be rendered.
functional component cannot use lifecycle methods.The class-based component use lifecycle methods such as componentDidMount.

Functional component example:

function Hello(props) {
  return <h1>Hello, {props.userName}</h1>;
}

Class based component example:

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.userName}</h1>;
  }
}

22. What is useFocusEffect hook in React navigation?

The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused.

The useFocusEffect hook runs the effect as soon as the screen comes into focus. The effect will run whenever the dependencies passed to React.useCallback change, i.e. it'll run on the initial render (if the screen is focused) as well as on subsequent renders if the dependencies have changed.

23. What is react-navigation?

React Navigation is a standalone library that enables you to implement navigation functionality in a React Native application. It also enables structuring your application using multiple screens.

React Navigation is written in JavaScript and does not directly use the native navigation APIs on iOS and Android.

24. What are the 2 axes of flexbox?

The 2 axes are main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

The main axis is defined by flex-direction, which has four possible values: row, row-reverse, column, column-reverse. For row or row-reverse, your main axis will run along the row in the inline direction (row- left to right, row-reverse-right to left). For column or column-reverse it is block direction.

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. If your main axis is column or column-reverse then the cross axis runs along the rows.

25. What is marginVertical CSS property?

marginVertical is not part of standard CSS but with react-native, setting marginVertical has the same effect as setting both marginTop and marginBottom.

26. Differentiate: ScrollView vs FlatList elements.

ScrollView renders all its react child components at once, but this has a performance downside.

FlatList renders items lazily, when they are about to appear, and removes items that scroll way off-screen to save memory and processing time.

27. What are the 3 fundamental principles of REDUX?

Single source of truth - the global state of your application is stored in an object tree within a single store.

State is read-only - the only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure function - To specify how the state tree is transformed by actions, write pure reducers.

28. Types of React navigation.
  • Stack Navigator,
  • Native Stack Navigator,
  • Drawer Navigator,
  • Bottom Tab Navigator,
  • Material Bottom Tab Navigator,
  • Material Top Tab Navigator.
29. Explain stack navigator in React navigation.

React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.

Stack navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

30. Difference between React Native and React.

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. It follows the concept of reusable components.

React Native is a mobile framework that makes use of the JavaScript engine available on the host, allowing you to build mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build reusable components and communicate with native components.

Both follow the JSX/TSX syntax extension of JavaScript.

31. What is React native elements library?

React native elements is a Cross Platform UI Toolkit for React Native. It is cross-platform across android, IOS and web.

Built completely in Javascript.

32. Common performance issues in React native app development.
  • Slow startup time,
  • Time to first interaction,
  • Animation jagged/slow,
  • and slow response to user action.
33. What is React Native Bridge?

React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread. A custom protocol is used for message passing.

34. Explain different Threads in ReactNative.

React native uses 3 threads,

  • MAIN/UI Thread, main application thread on which your Android/iOS app is running. The UI of the application can be changed by the Main thread.
  • Shadow Thread, layout created using React library in React Native can be calculated by this and it is a background thread.
  • JavaScript Thread, Javascript code is executed by this thread.
35. What is Redux in React Native?

Redux is a predictable state container for JavaScript apps. It helps write applications that run in different environments. This means the entire data flow of the app is handled within a single container while persisting in the previous state.

36. Is there any difference between declaring a function inside or outside the component's body?

Declaring a function outside of the class is like making a static function. If you place the function in the class, it will be created for each instance of the class which in this case would be unnecessary.

37. Does useSelector cause a re-render of the component?

Yes.When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

38. When do the React components rerender?

React components automatically re-render whenever there is a change in their state or props. State modification, passing props, using the Context API, passing references(array, function, and object) causes rerenders.

if the parent component has triggered a rerender all the child component will rerender too, it does not matter if the props are consumed, modified or not (at the child components), the child components will re-render if the parent component has triggered a render.

39. What is the first file in React applications?

index.js is the first file that loads which in turn loads App component.

40. How different is React-native from ReactJS?

ReactJS knowledge can be leveraged for React-native however there few differences.

ReactJS is for developing web applications while React-native developing mobile applications.

We can use HTML tags in ReactJS however react native doesn't understand html tags.

In ReactJS, the virtual DOM renders the browser code, while React-native uses its API to render code for mobile applications.

ReactJS uses React-router for navigating web pages however react-native uses a built-in navigator library (React-navigation) for navigating mobile applications.

41. What is a Flexbox?

It is a layout model that allows elements to align and distribute space within a container. With Flexbox when Using flexible widths and heights, all the inside the main container can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

To achieve the desired layout, flexbox offers three main properties: flexDirection, justifyContent and alignItems. The following table shows the possible options.

PropertyValuesDescription
flexDirection'column', 'row'Used to specify if elements will be aligned vertically or horizontally.
justifyContent 'center', 'flex-start', 'flex-end', 'space-around', 'space-between' Used to determine how should elements be distributed inside the container.
alignItems 'center', 'flex-start', 'flex-end', 'stretched'Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection).
42. What is State and how is it used in React Native?

It is used to control the components. The variable data can be stored in the state. It is mutable means a state can change the value at any time.

const HomeScreen = React.memo(({ navigation }) => {

  console.log('HomeScreen rendered');
  const [myState, setMyState] = useState("Test Value");
const updateState = () => {
setMyState('The state is updated')
}
return (
<View>    
<Text onPress={updateState}> {myState} </Text>    
</View> 
);
});

43. What is flipper in React-Native?

Flipper is a platform for debugging iOS, Android, and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface.

44. Mention the differences between redux persist and redux offline packages if you have used it.

Redux persist provides general redux state persistence, while redux-offline solves the high order problem of managing offline effects.

Both redux persist and redux offline persist state, In addition, redux-offline manages offline effects (retry + commit + rollback)(actions being performed when offline).

Redux Offline uses the redux-persist library.

45. What are the Class component lifecycle methods in React?

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The 3 phases are: Mounting, Updating, and Unmounting.

During Mounting phase, 4 methods gets called in the below order.

  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()

The render() method is mandatory and will be always called, while others are optional.

constructor() method is called before anything else, when the component is initiated, and it is the place to set up the initial state and other initial values.

The constructor() method is called with the props, as arguments, and you should always start by calling the super(props) before anything else, this will initiate the parent's constructor method and allows the component to inherit methods from its parent (React.Component).

The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.It is the place to set the state object based on the initial props.It takes state as an argument, and returns an object with changes to the state.

The render() method is required, and is the method that actually outputs the HTML to the DOM.

componentDidMount is executed after the first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution such as setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods.

Update Phase: A component is updated whenever there is a change in the component's state or props. 5 built-in methods are called in the below order when a component is updated.

  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

All methods except render are optional and will be called if you define it.

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated. This is still the place to set the state object based on the initial props.

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update. If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

shouldComponentUpdate should return a true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn't need to render after state or props are updated, you can return a false value.

componentDidUpdate is called just after rendering.

Deprecated/Unpopular lifecycle methods:

componentWillUnmount is called after the component is unmounted from the dom. We are unmounting our component in main.js.

componentWillMount is executed before rendering, on both the server and the client-side.This method is only called one time, which is before the initial render.

componentWillReceiveProps is invoked as soon as the props are updated before another render is called. We triggered it from setNewNumber when we updated the state.

componentWillUpdate is called just before rendering.

46. Explain useFocusEffect hook in React-native.

We may want to run side-effects when a screen is focused such as adding an event listener, fetching data, updating document title, etc.

useFocusEffect executes every time when the screen is focused. The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused.

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

47. What is Redux middleware?

Redux middleware is a function or a piece of code that sits between action and reducer and can interact with the dispatched action before reaching the reducer function.

A redux middleware can be used for many purposes such as logging (for example, redux-logger), asynchronous API calls, and so on.

Redux Thunk and Redux Saga are some of the popular redux middlewares.

48. Have you used SafeAreaView in your react-native project? Why did you use it?

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.

49. Difference between useLayoutEffect and useEffect.

useLayoutEffect is for sync update and useEffect is for async updates. useEffect runs async while first render being performed, useLayoutEffect runs before first render.

50. How do I navigate to a component from middleware/component where there are no navigation props?

You can dispatch navigation actions from the navigation container where you do not have access to the navigation prop, such as a Redux middleware.

To navigate from inside a component without needing to pass the navigation prop down, you may use useNavigation hook.

51. What is the benefit of using StyleSheet vs a plain object?

Code Quality: By moving styles away from the render function, you're making the code easier to understand. Naming the styles is a good way to add meaning to the low level components in the render function.

Performance: Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. It also allows sending the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

«
»
ES6 Interview questions

Comments & Discussions