React Native Interview Questions

What is RxJS?

Lets you create asynchronous, event-based programs with observables

Describe (1) Mounting in the component lifecycle

- Mounting means putting elements into the DOM. - React has four built-in methods that gets called, in this order, when mounting a component: 1) constructor() - The constructor() method is called before anything else, when the component is initiated, and it is the natural 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). 2) getDerivedStateFromProps() -The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM. This is the natural 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. 3) render() - The render() method is required, and is the method that actual outputs HTML to the DOM. 4) componentDidMount() - The componentDidMount() method is called after the component is rendered. - This is where you run statements that requires that the component is already placed in the DOM.

What are Pure Components?

- PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you. - When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called. Shallow Comparison: - When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.

What is the difference between React Native and Native script?

- React Native uses only a single core development language- JavaScript while Native Script can use any of these languages- Angular, Vuejs, TypeScript, and JavaScript. React Native has faster development speed than Native Script. React Native exists with reusable components that developed at once can be used at different mobile platforms and accelerates mobile app development while Native Script exists with a less number of plugins among which some pass improper verification. - React Native performs high as compared to Native Script. React Native is React based and uses virtual Dom for faster UI updation while Native Script uses slower Angular, Vuejs, and TypeScript. - Native Script exists with a box of various themes that shorten the gap between the different platform UIs while React Native doesn't live with predefined themes; you get default look and feel by the devices.

Describe (3) Unmounting in the component lifecycle

- React has only one built-in method that gets called when a component is unmounted: 1. componentWillUnmount() - The componentWillUnmount method is called when the component is about to be removed from the DOM.

What is the difference between React and React Native?

- React is a JavaScript library while React native is a framework based on React. - js used for building UI and web applications while React Native is used for creating cross-platform native mobile apps. - Both uses synonymous tags such as <div> <h1> <h2> are the tags in React.js and <View> <Text> are the tags in React native. - js uses DOM for path rendering of HTML tags while React Native uses AppRegistry for app registration.

How to optimize an app?

- React lazy load (React.lazy) - Maybe apis are slow, server bottleneck - Slowly loading assets, maybe too large or stored in odd location

What is React Native?

- React, at its core, is a library for "diffing" a virtual DOM and rendering this DOM to a screen with minimal operations. React, by default, does not have an opinion about which nodes are in its virtual DOM tree. Instead, it simply has algorithms that can determine changes in the tree and re-render. React on the web provides its own node primitives (<div>, <span>, etc), which are the building blocks for web applications. But new node primitives can be defined, as React Native has done. - React Native defines its own primitives (<View>, <Image>, etc) which do not render HTML elements but instead map to native views, like UIView and UIImageView. It implements a bridge that allows the JavaScript runtime to communicate asynchronously with the native runtime. React itself provides the tree diffing and rendering infrastructure that allows React Native to work. -It is based on the JavaScriptCore runtime and Babel transformers. With this setup react native supports new JavaScript (ES6+) features, e.g. arrow functions, async/await etc.

What is Redux Middleware?

- Redux-Saga and Redux-thunk are examples - Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. - Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.

What are the similarities between React and React Native

- Same life cycle methods like componentDidMount - Same state and prop variables - Same component architecture - Similar management libraries like Redux

What is a Shadow DOM and Shadow Tree?

- Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more. Shadow tree: - A DOM element can have two types of DOM subtrees: 1. Light tree - a regular DOM subtree, made of HTML children. All subtrees that we've seen in previous chapters were "light". 2. Shadow tree - a hidden DOM subtree, not reflected in HTML, hidden from prying eyes.

What is the DOM?

- The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. - The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. - The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. - Uses document or window to access DOM features, such as window.alert()

What is Virtual DOM and how does it work?

- Virtual Dom is an in-memory tree representation of the real DOM with lightweight elements. It provides a declarative way of DOM representation for an app and allows to update UI whenever the state changes. - Virtual DOM lists elements and their attributes and content. It renders the entire UI whenever any underlying data changes in React Native. Due to which React differentiates it with the previous DOM and a real DOM gets updated. - Updates as little as possible

Class Components vs Stateless Components

- When react renders our stateless component all what it needs to do is just call MyStatelessComponent function and pass props there. That's it. - Component class is a bit more complicated. It has a state, lifecycle hooks and it is a javascript class which means that React creates instances of it. React should initialise the component class in order to call lifecycle hooks, call a constructor, initialise state and more. - Stateless component is good for rendering props - Speed?

Why can't you change state without a setState()

- setState() triggers a re-render which is necessary for when the state is updated in order to ensure all affected components are updated

What is babel?

Babel converts ecmascript 2015+ into a backwards compatible version

What are prototypes?

Every object has a prototype, it holds functions and attributes of a class

What is JSX?

JSX is a syntax notation for JavaScript XML(XML-like syntax extension to ECMAScript). It stands for JavaScript XML. It provides expressiveness of JavaScript along with HTML like template syntax.

What is "Lifting up the state?"

Moving data higher up/earlier in the pipeline so there is greater access to it for the components below

Can you set the state in the "render" function?

No, this would cause an infinite re-render

When would you use a class component over a functional component?

We use class component if our component has state or a life-cycle method(s). Otherwise, we use a Functional component.

What is the benefit of a React Native app?

Hybrid applications are the web applications developed through HTML, CSS, JavaScript web standards and wrapped in a native container using a mobile WebView object. These apps are easier to maintain.

What is a hybrid app?

Hybrid apps, like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device's browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.

What is the point of StyleSheet.create() in react native?

In React Native, StyleSheet.create() send the style only once through the bridge to avoid passing new style object and ensures that values are immutable and opaque.

What is the point of using keys in React?

It allows for more efficient rendering of lists, so that React can reuse DOM elements without having to destroy + recreate them when lists change (slightly) in the UI.

What is the benefit of a Native app?

It can use device-specific hardware and software as built on a particular device and its OS. It uses the latest technology such as GPS and provides optimized performance.

What are props?

- "Props" and "state" are both plain JavaScript objects used to control data inside the components. - short for "properties." - Immutable parameters -> Unchangeable inside the component. - Set by their parent and fixed for the whole lifetime of a component. - Get passed to the Presentational component.

List the essential components of React Native.

- "View" is the basic built-in component used to build UI. - "Text" component displays text in the app. - "Image" component displays images in the app. - "TextInput" is used to input text into the app via the keypad. - "ScrollView" is a scrolling container used to host multiple views.

What is a React Component?

- A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render function).

What is the difference between Controlled and Uncontrolled Components

- In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. - Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components. - Uncontrolled requires a ref - Controlled provides: 1. Instant field validation 2. Conditionally disabling submit button 3. Enforcing input format 4. Several inputs for one piece of data 5. Dynamic inputs

Best Lifecycle methods for API calls?

componentDidMount()

What is a React Element?

- A React Element is what gets returned from components. It's an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. - With a class component, the element is the object that the component's render function returns. React elements are not what we see in the browser. They are just objects in memory and we can't change anything about them. - React internally creates, updates, and destroys instances to figure out the DOM elements tree that needs to be rendered to the browser. When working with class components, it's common to refer to their browser-rendered DOM elements as component instances. You can render many instances of the same component. The instance is the "this" keyword that you use inside class-based components. You would not need to create an instance from a class manually. You just need to remember that it's there somewhere in React's memory. - Function-based React elements do not have instances. A function component can still be rendered multiple times but React just does not associate a local instance with each render. It just uses the invocation of the function to determine what DOM element to render for the function.

What are React Fragments?

- A common pattern in React is for a component to return multiple elements. - Fragments let you group a list of children without adding extra nodes to the DOM.

Describe (2) Updating in the component lifecycle

- A component is updated whenever there is a change in the component's state or props. - React has five built-in methods that gets called, in this order, when a component is updated: 1. getDerivedStateFromProps() - 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 natural place to set the state object based on the initial props. 2. shouldComponentUpdate() - In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not. - The default value is true. 3. render() - Called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes. - The render() method is required and will always be called, the others are optional and will be called if you define them. 4. getSnapshotBeforeUpdate() - 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. 5. componentDidUpdate() - The componentDidUpdate method is called after the component is updated in the DOM.

DOM vs Virtual DOM?

- A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing's power to directly change what's on the screen. - Manipulating the DOM is slow. - Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house. How it helps: - When you render a JSX element, every single virtual DOM object gets updated. - This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly. Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update. - By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called "diffing." - Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM.

What are the differences between a standard function and an arrow function?

- An arrow function does not have its own "this". The "this" value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in the current scope, an arrow function ends up finding the this from its enclosing scope. - A standard function will need a defined "this"

What is State?

- An object holding information that may change over the lifetime of a component - "Props" and "state" are both plain JavaScript objects used to control data inside the components. - Mutable parameters -> Changeable inside the component. - Get handled within the container component. - Can't be accessed and modified outside the component.

What is Redux?

- Application state management that is easy to reason about, maintain and manage in an asynchronous web application environment. - A standalone state management library that React Native uses to simplify data flow within an app. - Has a "Store" to hold memory needed for the app --> createStore() - Can bind reducers --> combineReducers()

When would you use ScrollView over FlatList or vice-versa?

- Do you need to render a list of similar items from an array or the data is very big? Use FlatList - Do you need to render generic content in a scrollable container and the data is small? Use ScrollView

How do you test React Native apps?

- For deploying to a phone, you can use Xcode or Android Studio, or you can use Expo - For testing, you can use Jest

Functional Components vs Class-Components

- Function-based React elements do not have instances. A function component can still be rendered multiple times but React just does not associate a local instance with each render. It just uses the invocation of the function to determine what DOM element to render for the function. (A React Element is what gets returned from components. It's an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns.)

Which node_modules will run in React Native? How to test for this?

- In React Native, node_modules as any pure JavaScript library that does not rely on Node.js run-time modules, and does not rely on web-specific concepts like window.location.pathname will run fine. - But be conscious as there exists no way to test for this with Babel- it doesn't scan these libraries for offending dependencies. A module that uses window.location.pathname may fail at run-time in a different unexpected place.

What is the component lifecycle?

1. Mounting 2. Updating 3. Unmounting

1. How to stop a user from modifying an object? 2. How to allow a user to modify properties of an object, but not allow new properties? 3. How to lock certain properties?

1. Object.freeze(x) 2. Object.seal(x) lets you modify, but not add new properties 3. Object.defineProperty(x, 'age', { value:3, writable: false })

Data types of variables in Js?

All variables in the JavaScript are object data types. Sub-types include String, number, and boolean

What happens when you call "setState"?

1. The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state. 2. To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree. 3. By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

React Hooks

?

Can a component update its props?

A component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children.

What is the difference between the React component and the React element?

React component is a class or function that accepts input and returns a React element while React element displays the look of React Component Instance to be created.

What is the InteractionManager?

The InteractionManager is a native module in react native, which helps animations run smoothly in reactive native.

Does ReactDOM render components in the browser?

The bottom line is that ReactDOM does not render components in the browser, and it does not render elements either (in the sense of keeping the term element to represent the result of React.createElement). It also does not render instances. It renders DOM elements.

What is Flux?

Unidrectional application flow paradigm popular a few years back in React; mostly superceded by Redux these days.

What is the difference between the "call" and "apply" functions?

call() and apply() serve the exact same purpose. The only difference between how they work is that call() expects all parameters to be passed in individually, whereas apply() expects an array of all of our parameters.

Var vs Let for declaring variables

var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. It can be said that a variable declared with var is defined throughout the program as compared to let.