What is a React Component?

In React, components are the fundamental building blocks. To put it
simply, a React component is a function that returns a piece of UI,
which can be as straightforward as a fragment of HTML. Consider the
creation of a component that renders a navigation bar:

import React from 'react';

function Navigation() {
  return (
    <nav>
      <ol>
        <li>Home</li>
        <li>Blogs</li>
        <li>Books</li>
      </ol>
    </nav>
  );
}

At first glance, the mixture of JavaScript with HTML tags might seem
strange (it’s called JSX, a syntax extension to JavaScript. For those
using TypeScript, a similar syntax called TSX is used). To make this
code functional, a compiler is required to translate the JSX into valid
JavaScript code. After being compiled by Babel,
the code would roughly translate to the following:

function Navigation() {
  return React.createElement(
    "nav",
    null,
    React.createElement(
      "ol",
      null,
      React.createElement("li", null, "Home"),
      React.createElement("li", null, "Blogs"),
      React.createElement("li", null, "Books")
    )
  );
}

Note here the translated code has a function called
React.createElement, which is a foundational function in
React for creating elements. JSX written in React components is compiled
down to React.createElement calls behind the scenes.

The basic syntax of React.createElement is:

React.createElement(type, [props], [...children])

• type: A string (e.g., ‘div’, ‘span’) indicating the type of
  DOM node to create, or a React component (class or functional) for
  more sophisticated structures.
• props: An object containing properties passed to the
  element or component, including event handlers, styles, and attributes
  like className and id.
• children: These optional arguments can be additional
  React.createElement calls, strings, numbers, or any mix
  thereof, representing the element’s children.

For instance, a simple element can be created with
React.createElement as follows:

React.createElement('div', { className: 'greeting' }, 'Hello, world!');

This is analogous to the JSX version:

<div className="greeting">Hello, world!</div>

Beneath the surface, React invokes the native DOM API (e.g.,
document.createElement("ol")) to generate DOM elements as necessary.
You can then assemble your custom components into a tree, similar to
HTML code:

import React from 'react';
import Navigation from './Navigation.tsx';
import Content from './Content.tsx';
import Sidebar from './Sidebar.tsx';
import ProductList from './ProductList.tsx';

function App() {
  return <Page />;
}

function Page() {
  return <Container>
    <Navigation />
    <Content>
      <Sidebar />
      <ProductList />
    </Content>
    <Footer />
  </Container>;
}

Ultimately, your application requires a root node to mount to, at
which point React assumes control and manages subsequent renders and
re-renders:

import ReactDOM from "react-dom/client";
import App from "./App.tsx";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Generating Dynamic Content with JSX

The initial example demonstrates a straightforward use case, but
let’s explore how we can create content dynamically. For instance, how
can we generate a list of data dynamically? In React, as illustrated
earlier, a component is fundamentally a function, enabling us to pass
parameters to it.

import React from 'react';

function Navigation({ nav }) {
  return (
    <nav>
      <ol>
        {nav.map(item => <li key={item}>{item}</li>)}
      </ol>
    </nav>
  );
}

In this modified Navigation component, we anticipate the
parameter to be an array of strings. We utilize the map
function to iterate over each item, transforming them into
<li> elements. The curly braces {} signify
that the enclosed JavaScript expression should be evaluated and
rendered. For those curious about the compiled version of this dynamic
content handling:

function Navigation(props) {
  var nav = props.nav;

  return React.createElement(
    "nav",
    null,
    React.createElement(
      "ol",
      null,
      nav.map(function(item) {
        return React.createElement("li", { key: item }, item);
      })
    )
  );
}

Instead of invoking Navigation as a regular function,
employing JSX syntax renders the component invocation more akin to
writing markup, enhancing readability:

// Instead of this
Navigation(["Home", "Blogs", "Books"])

// We do this
<Navigation nav={["Home", "Blogs", "Books"]} />

Components in React can receive diverse data, known as props, to
modify their behavior, much like passing arguments into a function (the
distinction lies in using JSX syntax, making the code more familiar and
readable to those with HTML knowledge, which aligns well with the skill
set of most frontend developers).

import React from 'react';
import Checkbox from './Checkbox';
import BookList from './BookList';

function App() {
  let showNewOnly = false; // This flag's value is typically set based on specific logic.

  const filteredBooks = showNewOnly
    ? booksData.filter(book => book.isNewPublished)
    : booksData;

  return (
    <div>
      <Checkbox checked={showNewOnly}>
        Show New Published Books Only
      </Checkbox>
      <BookList books={filteredBooks} />
    </div>
  );
}

In this illustrative code snippet (non-functional but intended to
demonstrate the concept), we manipulate the BookList
component’s displayed content by passing it an array of books. Depending
on the showNewOnly flag, this array is either all available
books or only those that are newly published, showcasing how props can
be used to dynamically adjust component output.

Managing Internal State Between Renders: useState

Building user interfaces (UI) often transcends the generation of
static HTML. Components frequently need to “remember” certain states and
respond to user interactions dynamically. For instance, when a user
clicks an “Add” button in a Product component, it’s necessary to update
the ShoppingCart component to reflect both the total price and the
updated item list.

In the previous code snippet, attempting to set the
showNewOnly variable to true within an event
handler does not achieve the desired effect:

function App () {
  let showNewOnly = false;

  const handleCheckboxChange = () => {
    showNewOnly = true; // this doesn't work
  };

  const filteredBooks = showNewOnly
    ? booksData.filter(book => book.isNewPublished)
    : booksData;

  return (
    <div>
      <Checkbox checked={showNewOnly} onChange={handleCheckboxChange}>
        Show New Published Books Only
      </Checkbox>

      <BookList books={filteredBooks}/>
    </div>
  );
};

This approach falls short because local variables inside a function
component do not persist between renders. When React re-renders this
component, it does so from scratch, disregarding any changes made to
local variables since these do not trigger re-renders. React remains
unaware of the need to update the component to reflect new data.

This limitation underscores the necessity for React’s
state. Specifically, functional components leverage the
useState hook to remember states across renders. Revisiting
the App example, we can effectively remember the
showNewOnly state as follows:

import React, { useState } from 'react';
import Checkbox from './Checkbox';
import BookList from './BookList';

function App () {
  const [showNewOnly, setShowNewOnly] = useState(false);

  const handleCheckboxChange = () => {
    setShowNewOnly(!showNewOnly);
  };

  const filteredBooks = showNewOnly
    ? booksData.filter(book => book.isNewPublished)
    : booksData;

  return (
    <div>
      <Checkbox checked={showNewOnly} onChange={handleCheckboxChange}>
        Show New Published Books Only
      </Checkbox>

      <BookList books={filteredBooks}/>
    </div>
  );
};

The useState hook is a cornerstone of React’s Hooks system,
introduced to enable functional components to manage internal state. It
introduces state to functional components, encapsulated by the following
syntax:

const [state, setState] = useState(initialState);

• initialState: This argument is the initial
  value of the state variable. It can be a simple value like a number,
  string, boolean, or a more complex object or array. The
  initialState is only used during the first render to
  initialize the state.
• Return Value: useState returns an array with
  two elements. The first element is the current state value, and the
  second element is a function that allows updating this value. By using
  array destructuring, we assign names to these returned items,
  typically state and setState, though you can
  choose any valid variable names.
• state: Represents the current value of the
  state. It’s the value that will be used in the component’s UI and
  logic.
• setState: A function to update the state. This function
  accepts a new state value or a function that produces a new state based
  on the previous state. When called, it schedules an update to the
  component’s state and triggers a re-render to reflect the changes.

React treats state as a snapshot; updating it doesn’t alter the
existing state variable but instead triggers a re-render. During this
re-render, React acknowledges the updated state, ensuring the
BookList component receives the correct data, thereby
reflecting the updated book list to the user. This snapshot-like
behavior of state facilitates the dynamic and responsive nature of React
components, enabling them to react intuitively to user interactions and
other changes.

Managing Side Effects: useEffect

Before diving deeper into our discussion, it’s crucial to address the
concept of side effects. Side effects are operations that interact with
the outside world from the React ecosystem. Common examples include
fetching data from a remote server or dynamically manipulating the DOM,
such as changing the page title.

React is primarily concerned with rendering data to the DOM and does
not inherently handle data fetching or direct DOM manipulation. To
facilitate these side effects, React provides the useEffect
hook. This hook allows the execution of side effects after React has
completed its rendering process. If these side effects result in data
changes, React schedules a re-render to reflect these updates.

The useEffect Hook accepts two arguments:

• A function containing the side effect logic.
• An optional dependency array specifying when the side effect should be
  re-invoked.

Omitting the second argument causes the side effect to run after
every render. Providing an empty array [] signifies that your effect
doesn’t depend on any values from props or state, thus not needing to
re-run. Including specific values in the array means the side effect
only re-executes if those values change.

When dealing with asynchronous data fetching, the workflow within
useEffect entails initiating a network request. Once the data is
retrieved, it is captured via the useState hook, updating the
component’s internal state and preserving the fetched data across
renders. React, recognizing the state update, undertakes another render
cycle to incorporate the new data.

Here’s a practical example about data fetching and state
management:

import { useEffect, useState } from "react";

type User = {
  id: string;
  name: string;
};

const UserSection = ({ id }) => {
  const [user, setUser] = useState<User | undefined>();

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${id}`);
      const jsonData = await response.json();
      setUser(jsonData);
    };

    fetchUser();
  }, tag:martinfowler.com,2024-05-21:Using-markup-for-fallbacks-when-fetching-data);

  return <div>
    <h2>{user?.name}</h2>
  </div>;
};

In the code snippet above, within useEffect, an
asynchronous function fetchUser is defined and then
immediately invoked. This pattern is necessary because
useEffect does not directly support async functions as its
callback. The async function is defined to use await for
the fetch operation, ensuring that the code execution waits for the
response and then processes the JSON data. Once the data is available,
it updates the component’s state via setUser.

The dependency array tag:martinfowler.com,2024-05-21:Using-markup-for-fallbacks-when-fetching-data at the end of the
useEffect call ensures that the effect runs again only if
id changes, which prevents unnecessary network requests on
every render and fetches new user data when the id prop
updates.

This approach to handling asynchronous data fetching within
useEffect is a standard practice in React development, offering a
structured and efficient way to integrate async operations into the
React component lifecycle.

In addition, in practical applications, managing different states
such as loading, error, and data presentation is essential too (we’ll
see it how it works in the following section). For example, consider
implementing status indicators within a User component to reflect
loading, error, or data states, enhancing the user experience by
providing feedback during data fetching operations.

Figure 2: Different statuses of a
component

This overview offers just a quick glimpse into the concepts utilized
throughout this article. For a deeper dive into additional concepts and
patterns, I recommend exploring the new React
documentation or consulting other online resources.
With this foundation, you should now be equipped to join me as we delve
into the data fetching patterns discussed herein.