What is JSX, and why is it used?

JSX (JavaScript XML) is a syntax extension that provides a declarative way to describe  what the UI should look like. Theoretically, it serves as an abstraction over the React. createElement() API.

Declarative UI: Instead of imperatively manipulating the DOM (e.g., document createElement), developers describe the desired end state of the UI.

Compilation: JSX is not understood by browsers; it is transpiled (usually by Babel or SWC) into standard JavaScript objects known as "React Elements."

Virtual DOM Integration: These objects form the Virtual DOM, which React uses to    calculate the most efficient way to update the actual browser DOM.

State vs. Props

The distinction between State and Props lies in the Source of Truth and Ownership.

Props (Properties): These represent the external configuration of a component. They are passed down from a parent component and are immutable from the perspective of therec eiver. This enforces a "Pure Function" philosophy where a component's output is predictable based on its inputs.

State: This represents the internal, private data of a component. It is mutable but only through specific updater functions. State allows components to be dynamic and  interactive by holding data that changes over time in response to user actions or system events.

The useState Hook

useState is a hook that allows functional components to hook into React's internal state management engine.

Preservation: React preserves the state value between re-renders, even though the   function itself is re-executed.

The Dispatcher: When the state update function is invoked, it triggers a re-render  cycle. React compares the new state value with the old one (using Object.is equality);if they differ, the component and its children are scheduled for an update.

Asynchronous Nature: State updates are often batched for performance, meaning the UI reflects the change after the current execution context finishes.

Sharing State Between Components

React follows a Unidirectional Data Flow, meaning data moves in one direction   (downwards). Sharing state requires strategic architectural patterns:

Lifting State Up: Moving the state to the nearest common ancestor of the components that need the data. The ancestor then distributes the data via props.

Prop Drilling: The process of passing data through several layers of components to  reach a deeply nested child.

Context API: A mechanism to provide data to a broad subtree of components without manual prop passing at every level. It utilizes a "Provider" and "Consumer" model to bypass the  component hierarchy.

Event Handling

Event handling in React is managed through a system called Synthetic Events.

Normalization: React wraps native browser events in a cross-browser wrapper. This   ensures that the event object behaves identically across Chrome, Safari, Firefox, and Edge.

Event Delegation: Instead of attaching event listeners to individual DOM nodes, React attaches a single listener to the root of the document. When an event occurs, React maps it back to the specific component, which improves memory efficiency and performance.

Declarative Mapping: Event handlers are passed as function references directly in the component's markup, linking UI interactions directly to the component's logic.