What is the Difference Between .js and .jsx Files?

.js Files Typically used for standard JavaScript files. In the context of React, these files can also include React components written in JavaScript, but without the explicit use of JSX syntax. They can contain plain JavaScript, ES6+, and sometimes React code if JSX is not being used.

.jsx Files files specifically indicate that the file contains JSX syntax, which is an extension of JavaScript used in React to describe the UI structure in a syntax that looks similar to HTML. While React components can be written in .js files, using .jsx helps signal that JSX is being used.

Default & Named Import/Export

Default Export: A file can export one entity (function, class, object, etc.) as the default export. This entity can be imported without using curly braces and can be named anything during the import.

// file: utils.js
export default function add(a, b) {
  return a + b;
}

// file: main.js
import addFunction from "./utils"; // import with any name

Named Export: A file can export multiple entities by name. These entities must be imported using their exact names inside curly braces.

// file: utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// file: main.js
import { add, subtract } from "./utils";

Mixing Exports: You can have both default and named exports in the same file.

Event Handlers in Components

Functions that are called when an event occurs, such as a click, hover, or form submission. In React, event handlers are typically passed as props to components and are named using camelCase (e.g., onClick, onSubmit). These handlers allow components to respond to user interactions.

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

// Usage
<Button onClick={() => alert("Button clicked!")} />;

What are Synthetic Events in React?

React uses a synthetic event system instead of directly binding to the browser’s native events. This system brings consistency and performance benefits, and it allows React to be agnostic of environments like browser, server, or React Native.

The events such as onClick, onSubmit, onFocus, etc. are all camel-cased to be consistent with the naming convention in JavaScript. React event handlers are written inside curly braces:

function activateLasers(e) {
  e.preventDefault();
  console.log("The button was clicked.");
}

<button onClick={activateLasers}>Activate Lasers</button>;

In this case activateLasers is the event handler which will receive a React event object which, also known as a “synthetic event”. It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.

Some React events do not map directly to the browser’s native events. For example in onMouseLeave, e.nativeEvent will point to a mouseout event. If you need the underlying browser event for some reason, read it from e.nativeEvent.

Visit the React documentation for further details.

What are Hooks?

Functions that let you use state and other React features in functional components. Hooks were introduced in React 16.8 to allow developers to use state and lifecycle methods in functional components, which were previously only available in class-based components.

useState Hook

A hook that allows you to add state to a functional component. It returns an array with two elements: the current state value and a function to update that state.

import React, { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, useState(0) initializes the state count to 0, and setCount is used to update the count value.

What is the Reconciliation Algorithm (React Fiber Architecture)?

The process by which React updates the DOM. When the state of a component changes, React compares the new state to the previous state (using the Virtual DOM) to determine the minimal number of changes needed to update the actual DOM. React Fiber is an internal implementation of the reconciliation algorithm that allows React to break rendering work into chunks and prioritize updates, making the UI more responsive, particularly in complex applications.

What is the Virtual DOM?

A lightweight in-memory representation of the real DOM that React uses to optimize UI updates. Instead of directly manipulating the real DOM, React first updates the Virtual DOM and then calculates the most efficient way to apply those changes to the real DOM. This reduces the number of expensive DOM operations and improves the performance of web applications.