In JavaScript, operations can be either synchronous or asynchronous.

• Synchronous JavaScript:
  • Executes code in a sequential manner.
  • Each operation waits for the previous one to complete before executing.
  • Can cause blocking behavior, where long-running tasks prevent subsequent code from running.

console.log('Start');
for (let i = 0; i < 1000000000; i++) {} // Long-running task
console.log('End');
    

• Asynchronous JavaScript:
  • Allows tasks to run independently of the main program flow.
  • Uses callbacks, promises, or async/await to handle tasks that may take time, such as network requests or file I/O.
  • Improves performance by preventing blocking.

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 1000);
console.log('End');
    

console.log('Start');
new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise resolved');
  }, 1000);
}).then((message) => {
  console.log(message);
});
console.log('End');
    

A closure in JavaScript is a function that has access to its own scope, the scope of the outer function, and the global scope. Closures are created when a function is defined within another function, allowing the inner function to access the variables of the outer function even after the outer function has finished executing.

• Scope Chain: The inner function has access to its own variables, the outer function's variables, and global variables.
• Persistence: The inner function "remembers" the environment in which it was created.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');
    

In the example above, innerFunction is a closure that has access to outerVariable even after outerFunction has returned.

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises provide a way to handle asynchronous operations more efficiently and avoid callback hell.

• States of a Promise:
  • Pending: The initial state; neither fulfilled nor rejected.
  • Fulfilled: The operation completed successfully.
  • Rejected: The operation failed.
• Methods:
  • then() : Attaches callbacks for the fulfilled or rejected states.
  • catch() : Attaches a callback for only the rejected state.
  • finally() : Attaches a callback that executes regardless of the promise's outcome.

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operation succeeded');
  } else {
    reject('Operation failed');
  }
});

promise
  .then((message) => {
    console.log(message); // 'Operation succeeded'
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log('Operation complete');
  });
    

The async and await keywords in JavaScript provide a way to handle asynchronous operations more efficiently, making the code easier to read and write.

• async : Declares an asynchronous function. When called, an async function returns a Promise.
• await : Pauses the execution of an async function and waits for the resolution of a Promise. It can only be used inside async functions.

• Benefits:
  • Simplifies the handling of Promises.
  • Makes asynchronous code look and behave more like synchronous code.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();
    

In the example above, fetchData is an async function that uses await to pause execution until the Promise returned by fetch resolves.

The Virtual DOM is an in-memory representation of the real DOM elements generated by a library like React. It is a lightweight copy of the real DOM and helps optimize rendering performance.

• Virtual DOM: A JavaScript object that represents the real DOM structure. Changes are first applied to the Virtual DOM.
• Real DOM: The actual DOM rendered in the browser. Direct manipulation of the real DOM is slower and more resource-intensive.

• How it Works:
  • The Virtual DOM is updated when the state of a component changes.
  • A diffing algorithm compares the new Virtual DOM with the previous version to identify changes.
  • Only the necessary updates are applied to the real DOM, minimizing reflows and repaints.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

        
{this.state.count}
        Increment
      
    );
  }
}
    

In this example, updating the state ( this.setState ) triggers a re-render of the Virtual DOM. React's diffing algorithm then updates only the necessary parts of the real DOM.

CSS Flexbox (Flexible Box Layout) is a layout model designed to provide a more efficient way to distribute space and align items within a container, even when their size is unknown or dynamic. It simplifies complex layouts and offers a flexible and responsive design.

• Key Properties:
  • Container Properties:
    • display: flex; : Defines a flex container and enables flexbox for its children.
    • flex-direction : Specifies the direction of the flex items ( row , row-reverse , column , column-reverse ).
    • justify-content : Aligns flex items along the main axis ( flex-start , flex-end , center , space-between , space-around , space-evenly ).
    • align-items : Aligns flex items along the cross axis ( flex-start , flex-end , center , baseline , stretch ).
    • flex-wrap : Controls whether flex items should wrap or not ( nowrap , wrap , wrap-reverse ).
  • Item Properties:
    • order : Controls the order of flex items (default is 0).
    • flex-grow : Defines the ability of a flex item to grow relative to the rest.
    • flex-shrink : Defines the ability of a flex item to shrink relative to the rest.
    • flex-basis : Specifies the initial size of a flex item before space distribution.
    • align-self : Overrides the align-items value for a specific flex item.

CSS Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts on a grid structure with rows and columns. It provides more control over both horizontal and vertical alignment of items, making it more powerful for creating complex and responsive layouts.

• Advantages over Flexbox:
  • Two-Dimensional: While Flexbox is one-dimensional (either row or column), CSS Grid handles both rows and columns simultaneously.
  • Explicit Placement: Grid provides more control over the placement of items within the layout using grid lines and grid areas.
  • Overlapping Items: Grid allows items to overlap each other, providing more design possibilities.
  • Alignment: Grid provides more options for aligning items along both axes, including aligning tracks and cells.

• Key Properties:
  • Container Properties:
    • display: grid; : Defines a grid container and enables grid layout for its children.
    • grid-template-columns : Defines the columns of the grid.
    • grid-template-rows : Defines the rows of the grid.
    • grid-gap : Specifies the gap between rows and columns.
    • grid-template-areas : Allows you to define named grid areas for layout.
  • Item Properties:
    • grid-column : Specifies the start and end positions of a grid item along the column axis.
    • grid-row : Specifies the start and end positions of a grid item along the row axis.
    • grid-area : Allows an item to be placed in a named grid area.

Higher-Order Components (HOCs) in React are advanced techniques for reusing component logic. An HOC is a function that takes a component and returns a new component with enhanced behavior.

• Reusability: HOCs help in reusing component logic across different parts of an application.
• Abstraction: HOCs abstract away common functionality, making components more focused on their core responsibilities.
• Composition: HOCs can be composed to enhance components with multiple behaviors.

import React from 'react';

// Higher-Order Component that adds logging
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }

    render() {
      return ;
    }
  };
}

// Regular component
class MyComponent extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

// Enhanced component with logging
const MyComponentWithLogging = withLogging(MyComponent);

// Usage
function App() {
  return ;
}

export default App;
    

In this example, withLogging is an HOC that enhances MyComponent by adding logging functionality.

In React, props and state are both used to manage data within components, but they serve different purposes.

• props (Properties):
  • Read-Only: Props are immutable and cannot be modified by the component that receives them.
  • Parent to Child: Props are passed from parent components to child components.
  • Stateless: Props are used to pass data and event handlers to child components, making them purely presentational.

function ChildComponent(props) {
  return 
{props.message}
;
}

function ParentComponent() {
  return ;
}
    

• state:
  • Mutable: State is managed within the component and can be modified using setState .
  • Component-Specific: State is specific to the component and is not passed to child components.
  • Dynamic: State is used to manage dynamic data that can change over time, such as form inputs or user interactions.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}
    

In this example, Counter uses state to manage the count value and update it when the button is clicked.

React Hooks are functions that let you use state and other React features in functional components. They allow you to manage component state, handle side effects, and reuse logic without writing class components.

• Key Hooks:
  • useState : Manages state in functional components.
  • useEffect : Handles side effects like data fetching, subscriptions, and manual DOM manipulations.
  • useContext : Accesses context values without using the Consumer component.
  • useReducer : Manages state with a reducer function, useful for complex state logic.
• Why Use Hooks:
  • Simpler Components: Hooks allow you to write stateful logic in functional components, making the code easier to understand and maintain.
  • Reusability: Hooks enable the reuse of stateful logic across multiple components.
  • Cleaner Code: Hooks reduce the need for lifecycle methods, leading to cleaner and more readable code.

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

export default Counter;
    

In this example, useState is used to manage the count state, and useEffect is used to update the document title whenever the count changes.

Client-side rendering (CSR) and server-side rendering (SSR) are two approaches for rendering web pages, each with its own advantages and use cases.

• Client-Side Rendering (CSR):
  • Rendering: The initial HTML is a minimal shell with JavaScript, which fetches and renders content on the client side.
  • Performance: Faster initial load for the shell, but slower time to interactive as JavaScript needs to load and execute.
  • SEO: Less SEO-friendly out of the box, as search engines might have difficulty indexing content that is rendered on the client side.
  • Interactivity: Richer and more dynamic user experiences as rendering happens in the browser.
• Server-Side Rendering (SSR):
  • Rendering: The server generates the full HTML for a page, which is sent to the client.
  • Performance: Slower initial load but faster time to interactive since the HTML is already rendered.
  • SEO: More SEO-friendly as search engines can index the pre-rendered HTML content.
  • Interactivity: Initial load might be slower, but subsequent interactions can be faster, and the content is immediately visible.

In CSR, bundle.js contains JavaScript that will render the content inside the #app div.

import React from 'react';

// Example with Next.js (a React framework that supports SSR):
// pages/index.js
function HomePage({ data }) {
  return 
{data}
;
}

export async function getServerSideProps() {
  // Fetch data from an API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // Will be passed to the page component as props
  };
}

export default HomePage;
    

In SSR, the HTML is generated on the server and sent to the client, ensuring the content is available immediately.

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like. It allows developers to write HTML-like code within JavaScript.

• Key Differences Between JSX and HTML:
  • Syntax: JSX syntax is similar to HTML but follows JavaScript rules. For example, attributes are camelCase (e.g., className instead of class ).
  • Embedding JavaScript: JSX allows you to embed JavaScript expressions within curly braces ( {} ), making it easy to integrate dynamic content.
  • React Components: JSX can be used to render React components, which are not possible in plain HTML.

// JSX
const element = 
Hello, {name}!
;

// HTML
Hello, John!
    

Usage in React: JSX is transpiled by tools like Babel into JavaScript code that React can understand. For example, the JSX above is transpiled into:

const element = React.createElement('h1', null, `Hello, ${name}!`);
    

"Lifting state up" in React refers to moving state from child components to a common parent component. This is done to share state between multiple child components and ensure they have access to the same state data.

• Why Lift State Up?:
  • State Sharing: When multiple components need to access or update the same state, lifting the state to their common ancestor allows them to share it.
  • Single Source of Truth: Ensures that there is a single source of truth for the state, preventing inconsistencies and making the code easier to debug.

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  return (
    

      
      
    
  );
}

export default ParentComponent;

// ChildComponentA.js
function ChildComponentA({ sharedState, setSharedState }) {
  return (
     setSharedState(e.target.value)}
    />
  );
}

// ChildComponentB.js
function ChildComponentB({ sharedState }) {
  return 
{sharedState}
;
}
    

In this example, the state is lifted to ParentComponent and passed down to ChildComponentA and ChildComponentB .

React class components have several lifecycle methods that allow developers to run code at specific points during a component's life cycle. These methods are categorized into three phases: mounting, updating, and unmounting.

• Mounting:
  • constructor: Called before the component is mounted. Used to initialize state and bind event handlers.
  • static getDerivedStateFromProps: Called right before rendering. Used to update state based on props.
  • render: Renders the component's UI. Pure function without side effects.
  • componentDidMount: Called after the component is mounted. Used for side effects like fetching data or setting up subscriptions.
• Updating:
  • static getDerivedStateFromProps: Called right before rendering due to state or prop changes.
  • shouldComponentUpdate: Determines whether the component should re-render. Used for performance optimization.
  • render: Renders the component's UI.
  • getSnapshotBeforeUpdate: Called right before the DOM updates. Used to capture some information from the DOM (e.g., scroll position).
  • componentDidUpdate: Called after the component updates. Used for side effects that need to occur after the DOM updates.
• Unmounting:
  • componentWillUnmount: Called right before the component unmounts. Used for cleanup, such as cancelling network requests or removing event listeners.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // Update state based on props
    if (nextProps.value !== prevState.value) {
      return { count: nextProps.value };
    }
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Optimize performance
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture some information from the DOM
    return null;
  }

  componentDidMount() {
    // Fetch data or set up subscriptions
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Handle side effects
  }

  componentWillUnmount() {
    // Clean up resources
  }

  render() {
    return 
{this.state.count}
;
  }
}
    

React Fragments are a way to group multiple elements without adding extra nodes to the DOM. They allow you to return multiple elements from a component's render method without needing a wrapper element like a div .

• Benefits of React Fragments:
  • Avoid Unnecessary DOM Nodes: Prevents the addition of unnecessary DOM elements, which can affect CSS styling and performance.
  • Cleaner Markup: Keeps the markup clean and semantic without extra wrapper elements.
• Usage:
  • : The full syntax for using a fragment.
  • Short Syntax: You can use the shorthand <>... instead of ... .

// Using React.Fragment
function List() {
  return (
    
      
Item 1
      
Item 2
      
Item 3
    
  );
}

// Using short syntax
function List() {
  return (
    <>
      
Item 1
      
Item 2
      
Item 3
    
  );
}
    

In this example, List returns multiple