Web / React native Interview questions
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: bun...
2. Mention a few core components in React-native?
Core Component include,
3. What is JSX?
React and React Native use JSX, a syntax that lets you write elements inside JavaScript like so:
4. What are Props in React-native?
Props is short for "properties". Props let you customize React components. For example, here you pass each
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...
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 ...
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 ...
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 Integr...
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 ...
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 ...
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. Functiona...
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,...
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...
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 ma...
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 t...
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 yo...
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. ...
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 re...
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 t...
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...
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...
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 of...
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() ...
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 run...
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....
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...
