React Native is an open-source framework developed by Meta that enables developers to build cross-platform mobile apps using JavaScript and React. It compiles to native components, providing near-native performance.

• ReactJS is for building web apps that run in browsers.
• React Native is for building mobile apps using native components like <View>, <Text>, and <Image> instead of HTML tags.

• Cross-platform development (Android + iOS)
• Hot Reloading / Fast Refresh
• Reusable components
• Strong community support
• Native-like performance

• Hot Reloading: Updates only the changed files while preserving the app state.
• Live Reloading: Reloads the entire app when code changes are saved.

React Native uses a bridge to communicate between JavaScript and native components, ensuring that the UI is rendered using native APIs rather than web views.

JSX (JavaScript XML) allows developers to write UI code in a syntax similar to HTML but under the hood it's compiled into JavaScript function calls.

Metro is the JavaScript bundler for React Native that compiles all JS and asset files into a single bundle the app can use at runtime.

Navigation can be managed with:

• React Navigation (most popular)
• React Native Navigation by Wix — handles stack, tab, and drawer navigations.

Hooks (introduced in React 16.8) let you use state and lifecycle methods in functional components.

Example: useState, useEffect, useContext.

• Use FlatList instead of ScrollView for long lists
• Optimize images
• Avoid unnecessary re-renders
• Use useMemo and useCallback
• Minimize bridge traffic

• Controlled components are managed by React state.
• Uncontrolled components rely on direct DOM or ref manipulation.

You can write native code in Java (Android) or Swift/Objective-C (iOS) and expose it to JavaScript using the Native Modules API.

AsyncStorage is used for local key-value storage in React Native.

Example:

await AsyncStorage.setItem('user', JSON.stringify(userData));

React Native uses JavaScript objects for styling instead of CSS.

Example:

const styles = StyleSheet.create({
  text: { color: 'blue', fontSize: 18 },
});

• Full support for Fabric architecture (new rendering system)
• Improved TurboModules for faster native module access
• Hermes engine is now the default for all builds
• Better developer tools and debugging integration

import React, { useState, useEffect } from 'react';

const DelayedRender = ({ children, delay = 5000 }) => {
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setShouldRender(true), delay);
    return () => clearTimeout(timer);
  }, [delay]);

  if (!shouldRender) return null; // or show a loader
  return children;
};

// Usage:
<DelayedRender>
  <YourComponent />
</DelayedRender>

Short definition: Fabric is the new rendering architecture in React Native that replaces the old bridge-based UI system with a faster, more direct communication layer using JSI (JavaScript Interface). It enables more efficient rendering and supports modern React features like Concurrent Rendering.

Why it exists / Problem it solves: The old architecture used an asynchronous JSON bridge, which added latency and caused UI flickers. Fabric eliminates this by using direct synchronous communication between JS and native layers, resulting in smoother performance and easier layout handling.

State is a mechanism for managing dynamic data within a component. Unlike props, which are passed down from parent to child, state is managed internally by the component itself. Props are immutable, while state can change using the setState method, triggering a re-render.

'Keys' are unique identifiers assigned to elements in a list. They help React Native identify which items have changed, been added, or removed — optimizing re-renders and preventing rendering issues.

A Higher-Order Component (HOC) is a design pattern that allows developers to add reusable logic to components. It takes a component as input and returns an enhanced version of it. HOCs are commonly used for cross-cutting concerns like authentication, analytics, and data fetching.

function removeDuplicates(array) {
  return [...new Set(array)];
  
  // Method 2: Using filter - works for objects too
  // return array.filter((item, index) => array.indexOf(item) === index);
}

const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(removeDuplicates(numbers)); // [1, 2, 3, 4, 5]

The forEach() method does not return anything; it always returns undefined. The forEach method is used to iterate over an array, executing a provided function once for each element. It's meant for performing actions, not for creating or transforming a new array.

A React Native app follows a component-based architecture. It consists of reusable UI components, data management using state and props, navigation using libraries like React Navigation, and potentially global state management using libraries like Redux.

== checks only value and performs type conversion if needed, while === checks both value and type without conversion. Using === is considered best practice to avoid unexpected results.

Undefined variables are variables that the developer has declared but not yet assigned a value.

A null variable is a variable or property that is empty. You use null variables when you want to show that a variable has no values or want to clear the value of a variable.

Immediately invoked function expressions, or IIFEs, run as soon as they're created. It creates a local scope for variables so they don't mess with other parts of the code. You make an IIFE by placing your code inside the parentheses (). Also, adding another set of parentheses () at the function's end will make it run immediately.

// Syntax
(function () {
        // write your code here
}());
// Example
(function () {
  console.log(
    "helps prepare for JavaScript job interview questions"
  );
})();

The rest parameter allows you to represent many arguments in an array. It's useful when you need a function to accept extra arguments beyond what you've listed.

 // Syntax
function functionName(...restParameter) {
// Body of function
}

Hoisting is JavaScript's default behavior of moving variable and function declarations to the top of their scope before code execution. This means you can use certain variables and functions before they are declared in the code.

This video explains hoisting clearly - once you watch it, you'll understand it and never forget it.