Component, Props, and State in React Functional Components

1. Component

In React, a Component is like an independent, reusable building block that makes up part of the user interface (UI). Each component manages its own piece of the interface and logic. Instead of building the whole UI in one big file, you break it down into components like Header, Sidebar, Article, Footer, and so on.

Functional Component: A plain JavaScript function that takes a props object and returns a React element (usually JSX) describing what should be shown on screen.

Example:

// A simple Functional Component called Welcome
function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

// Using the component
<Welcome name="Loi" /> // Renders: "Welcome, Loi!"

2. Props

Props (short for "properties") are how data is passed from a parent component down to a child component. This data is immutable - the child component can only read the props it receives, never change them.

Think of props as the "arguments" you pass into a function.

Key characteristics of Props:

• Used to pass data (strings, numbers, objects, functions, etc.) from parent to child.
• Read-only. A child component is not allowed to modify its props.
• Whenever a component's props change from its parent, React re-renders that child component with the new data.

Example:

The parent component (App) passes a prop called userName to the child component (UserProfile).

// Child component: UserProfile.js
function UserProfile(props) {
  // Receive data via props and render it
  return <h2>Username: {props.userName}</h2>;
}

// Parent component: App.js
function App() {
  return (
    <div>
      <h1>Home Page</h1>
      {/* Pass the 'userName' prop with the value "TranLoi2k" */}
      <UserProfile userName="TranLoi2k" />
    </div>
  );
}

3. State

State is an object used to store a component's internal data. Unlike props, state can change over time, usually as a result of user interaction (clicking, typing, etc.).

When a component's state changes, React automatically re-renders that component to update the UI to reflect the new state.

In functional components, we manage state with a special Hook called useState.

Key characteristics of State:

• Internal data, managed only by that component.
• Mutable.
• Whenever state changes, the component re-renders.
• To update state, you must use the special setter function provided by useState (e.g., setCount) - you must never mutate it directly.

Example:

A Counter component has a button. Each time it's clicked, the count value in state increases and the UI updates.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  // useState returns an array: [current value, function to update that value]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* When clicked, call setCount to increase count by 1 */}
      <button onClick={() => setCount(count + 1)}>
        Click here
      </button>
    </div>
  );
}

Comparison Summary