Functional Components and Declarative UI

1. What is a React Component?

In modern React, a component is a JavaScript function that accepts arbitrary inputs (called props) and returns a React element (written in JSX) describing how a section of the user interface should appear.

Components allow you to split the UI into independent, reusable pieces, and think about each piece in isolation.

2. Capitalization Convention

In React, component names must always start with an uppercase letter (e.g., CourseCard, Header, UserProfile).

• If an element starts with a lowercase letter (e.g., <div>, <span>, <button>), React treats it as a built-in standard HTML tag.
• If an element starts with an uppercase letter (e.g., <CourseCard />), React recognizes it as a custom component and executes the corresponding JavaScript function.

3. Pure Functions and the Declarative Contract

React components are modeled after pure functions in computer science:

• Same Inputs -> Same Output: Given the same props and state, a component should always return the exact same JSX.
• No Side Effects During Render: A component function should simply describe what the UI should look like. It must not mutate external variables, modify the DOM directly, or start network requests inside the component body during rendering.

4. Class Components vs Modern Functional Components

Prior to React 16.8, complex components with state and lifecycle methods had to be written as ES6 Classes inheriting from React.Component:

Today, the entire React ecosystem has standardized on Functional Components with React Hooks:

• Simpler Code: No this binding headaches, constructor methods, or class boilerplate.
• Smaller Bundle Sizes: Functions minify and compress far better than JavaScript ES6 classes.
• Code Sharing via Custom Hooks: Business and state logic can be extracted into reusable custom hooks without convoluted Higher-Order Component (HOC) or Render Prop patterns.