quiz 4 reviewer advanced web

React Event

An action performed by the user or the browser (such as clicking a button, hovering, or typing) that React listens for and responds to by executing a function.

React State

A built-in React object used to store data that may change over time; when state changes, the component automatically re-renders to display the latest data in the UI.

useState Hook

A built-in React Hook that allows functional components to store and update data, preserving state values across component re-renders.

Stateless Component

A component that does not manage its own state; it receives data from its parent component via Props and renders the user interface.

Presentational Component

Another name for a Stateless Component, so-called because its primary role is to present/display information without handling state logic.

onClick

An event handler triggered when a user clicks an element.

onDoubleClick

An event handler triggered when a user double-clicks an element.

onChange

An event handler triggered when the value of an input element changes.

onSubmit

An event handler triggered when a form is submitted.

onMouseEnter

An event handler triggered when the mouse pointer enters the boundary of an element.

onKeyDown

An event handler triggered when a keyboard key is pressed down.

onKeyUp

An event handler triggered when a keyboard key is released.

React Event Naming Convention

React uses camelCase for event names (e.g., onClick instead of standard HTML onclick).

Event Handler Syntax in React

Event handlers are passed inside curly braces as a function reference without parentheses (e.g., onClick={clickMe}) so they execute only when triggered, not upon initial render.

Passing Parameters in React Events

Done by wrapping the function call in an arrow function (e.g., onClick={() => greet("Name")}) to prevent the function from running immediately when rendered.

useState Syntax Breakdown (const [state, setState] = useState(initialValue))

• state: Holds the current state value.

• setState: The function used to update the state value.

• initialValue: The starting value assigned to the state.

setState()

The method used in older React Class Components (this.setState()) to update component state.

setState() vs. useState()

• setState(): Used in Class Components, requires this.setState(), requires more code, and is the older (legacy) approach.

• useState(): Used in Functional Components, uses hooks, requires less code, and is the modern, recommended approach.

Characteristics of Stateless Components

• Do not use useState() or setState().

• Receive data solely via Props.

• Focus strictly on displaying UI.

• Easy to reuse, test, and maintain.

Examples of Stateless Components

Headers, Navigation Bars, Footers, Company Logos, Product Cards, and User Profile Cards.