This guide shows you how to share components and data between Server and Client Components in Next.js. You'll learn composition patterns, prop passing rules, and when to use each approach.

Table of Contents

• What are Server and Client Components?

• Prerequisites

• How to Pass Data from Server to Client via Props

• How to Pass Server Components as Children to Client Components

• What Props Are Allowed Between Server and Client

• How to Share Data with Context and React.cache

• How to Use Third-Party Components in Both Environments

• How to Prevent Environment Poisoning with server-only and client-only

• Real-World Examples

• Conclusion

What are Server and Client Components?

In the Next.js App Router, every component is a Server Component by default. Server Components run only on the server. They can fetch data from databases, use API keys, and keep sensitive logic out of the browser. They don't send JavaScript to the client, which reduces bundle size.

Client Components run on both the server (for the initial HTML) and the client (for interactivity). You mark them with the "use client" directive at the top of the file. They can use useState, useEffect, event handlers, and browser APIs like localStorage and window.

The key rule: Server Components can import and render Client Components, but Client Components can't import Server Components directly. They can only receive them as props (such as children).

Prerequisites

Before you follow along, you should have:

• Basic familiarity with React (components, props, hooks)

• A Next.js project using the App Router (Next.js 13 or later)

• Node.js installed (version 18 or later recommended)

If you don't have a Next.js project yet, create one with:

npx create-next-app@latest my-app

How to Pass Data from Server to Client via Props

The simplest way to share data between Server and Client Components is to pass it as props. The Server Component fetches the data, and the Client Component receives it and handles interactivity.

Here is a basic example. A page (Server Component) fetches a post and passes the like count to a LikeButton (Client Component):

// app/post/[id]/page.jsx (Server Component)
import LikeButton from '@/app/ui/like-button';
import { getPost } from '@/lib/data';

export default async function PostPage({ params }) {
  const { id } = await params;
  const post = await getPost(id);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <LikeButton likes={post.likes} postId={post.id} />
    </div>
  );
}

// app/ui/like-button.jsx (Client Component)
'use client';

import { useState } from 'react';

export default function LikeButton({ likes, postId }) {
  const [count, setCount] = useState(likes);

  const handleLike = () => {
    setCount((c) => c + 1);
    // Call API or Server Action to persist
  };

  return (
    <button onClick={handleLike}>
      {count} likes
    </button>
  );
}

The Server Component fetches data on the server. The Client Component receives plain values (likes, postId) and manages state and events. This pattern keeps data fetching on the server and interactivity on the client.

How to Pass Server Components as Children to Client Components

You can pass a Server Component as the children prop (or any prop) to a Client Component. The Server Component still renders on the server. The Client Component receives the rendered output, not the component code.

This is useful when you want a Client Component to wrap or control the layout of server-rendered content. For example, a modal that shows server-fetched data:

// app/ui/modal.jsx (Client Component)
'use client';

import { useState } from 'react';

export default function Modal({ children }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">{children}</div>
        </div>
      )}
    </>
  );
}

// app/cart/page.jsx (Server Component)
import Modal from '@/app/ui/modal';
import Cart from '@/app/ui/cart';

export default function CartPage() {
  return (
    <Modal>
      <Cart />
    </Modal>
  );
}

// app/ui/cart.jsx (Server Component - no 'use client')
import { getCart } from '@/lib/cart';

export default async function Cart() {
  const items = await getCart();

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Cart is a Server Component that fetches cart data. It's passed as children to Modal, which is a Client Component. The server renders Cart first. The RSC Payload includes the rendered result. The client receives that output and displays it inside the modal. The cart data never runs on the client.

You can use the same pattern with named props (slots):

// app/ui/tabs.jsx (Client Component)
'use client';

import { useState } from 'react';

export default function Tabs({ tabs, children }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <div className="tab-list">
        {tabs.map((tab, i) => (
          <button
            key={tab.id}
            onClick={() => setActiveIndex(i)}
            className={activeIndex === i ? 'active' : ''}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="tab-content">{children[activeIndex]}</div>
    </div>
  );
}

// app/dashboard/page.jsx (Server Component)
import Tabs from '@/app/ui/tabs';
import Overview from '@/app/ui/overview';
import Analytics from '@/app/ui/analytics';

export default function DashboardPage() {
  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'analytics', label: 'Analytics' },
  ];

  return (
    <Tabs tabs={tabs}>
      <Overview />
      <Analytics />
    </Tabs>
  );
}

Overview and Analytics can be Server Components that fetch their own data. They render on the server, and the client receives the pre-rendered output.

What Props Are Allowed Between Server and Client

Props passed from Server Components to Client Components must be serializable. React serializes them into the RSC Payload so they can be sent to the client.

Allowed Types

• Strings, numbers, booleans

• null and undefined

• Plain objects (no functions, no class instances)

• Arrays of serializable values

• JSX (Server Components as children or other props)

• Server Actions (functions with "use server")

Not Allowed

• Functions (except Server Actions)

• Date objects

• Class instances

• Symbols

• Map, Set, WeakMap, WeakSet

• Objects with custom prototypes

• Buffers, ArrayBuffer, typed arrays

If you need to pass a Date, convert it to a string or number first:

<ClientComponent createdAt={post.createdAt.toISOString()} />

If you use MongoDB, convert ObjectId to a string:

<PostThread userId={user._id.toString()} />

Passing Server Actions as props

Server Actions are async functions marked with "use server". You can pass them as props to Client Components. They are serialized by reference, not by value.

// app/actions/post.js
'use server';

export async function likePost(postId) {
  // Update database
  revalidatePath(`/post/${postId}`);
}

// app/post/[id]/page.jsx (Server Component)
import LikeButton from '@/app/ui/like-button';
import { likePost } from '@/app/actions/post';

export default async function PostPage({ params }) {
  const post = await getPost((await params).id);

  return <LikeButton likes={post.likes} postId={post.id} onLike={likePost} />;
}

// app/ui/like-button.jsx (Client Component)
'use client';

export default function LikeButton({ likes, postId, onLike }) {
  const handleClick = () => {
    onLike(postId);
  };

  return <button onClick={handleClick}>{likes} likes</button>;
}

You can also bind arguments:

<LikeButton onLike={likePost.bind(null, post.id)} />

How to Share Data with Context and React.cache

React Context doesn't work in Server Components. To share data between Server and Client Components, you can combine a Client Component context provider with React.cache for server-side memoization.

Create a cached fetch function:

// lib/user.js
import { cache } from 'react';

export const getUser = cache(async () => {
  const res = await fetch('https://api.example.com/user');
  return res.json();
});

Create a provider that accepts a promise and stores it in context:

// app/providers/user-provider.jsx
'use client';

import { createContext } from 'react';

export const UserContext = createContext(null);

export default function UserProvider({ children, userPromise }) {
  return (
    <UserContext.Provider value={userPromise}>
      {children}
    </UserContext.Provider>
  );
}

In your root layout, pass the promise without awaiting it:

// app/layout.jsx
import UserProvider from '@/app/providers/user-provider';
import { getUser } from '@/lib/user';

export default function RootLayout({ children }) {
  const userPromise = getUser();

  return (
    <html>
      <body>
        <UserProvider userPromise={userPromise}>{children}</UserProvider>
      </body>
    </html>
  );
}

Client Components use use() to unwrap the promise:

// app/ui/profile.jsx
'use client';

import { use, useContext } from 'react';
import { UserContext } from '@/app/providers/user-provider';

export default function Profile() {
  const userPromise = useContext(UserContext);
  if (!userPromise) {
    throw new Error('Profile must be used within UserProvider');
  }
  const user = use(userPromise);

  return <p>Welcome, {user.name}</p>;
}

Wrap the component in Suspense for loading states:

// app/dashboard/page.jsx
import { Suspense } from 'react';
import Profile from '@/app/ui/profile';

export default function DashboardPage() {
  return (
    <Suspense fallback={<div>Loading profile...</div>}>
      <Profile />
    </Suspense>
  );
}

Server Components can call getUser() directly. Because it's wrapped in React.cache, multiple calls in the same request return the same result:

// app/settings/page.jsx
import { getUser } from '@/lib/user';

export default async function SettingsPage() {
  const user = await getUser();
  return <h1>Settings for {user.name}</h1>;
}

React.cache is scoped per request. Each request has its own memoization – there's no sharing across requests.

How to Use Third-Party Components in Both Environments

Some third-party components use useState, useEffect, or browser APIs but don't have "use client" in their source. If you use them in a Server Component, you'll get an error.

Wrap them in your own Client Component:

// app/ui/carousel-wrapper.jsx
'use client';

import { Carousel } from 'acme-carousel';

export default Carousel;

Now you can use it in a Server Component:

// app/gallery/page.jsx
import Carousel from '@/app/ui/carousel-wrapper';

export default function GalleryPage() {
  return (
    <div>
      <h1>Gallery</h1>
      <Carousel />
    </div>
  );
}

If the third-party component is already used inside a Client Component, you don't need a wrapper. The parent's "use client" boundary is enough:

'use client';

import { Carousel } from 'acme-carousel';

export default function Gallery() {
  return <Carousel />;
}

How to Prevent Environment Poisoning with server-only and client-only

It's easy to accidentally import server-only code (database clients, API keys) into a Client Component. To catch this at build time, use the server-only package.

Install it:

npm install server-only

Add it at the top of files that must never run on the client:

// lib/data.js
import 'server-only';

export async function getSecretData() {
  const res = await fetch('https://api.example.com/data', {
    headers: {
      authorization: process.env.API_KEY,
    },
  });
  return res.json();
}

If you import getSecretData (or any symbol from this file) into a Client Component, the build will fail with a clear error.

For client-only code (for example, code that uses window), use client-only:

npm install client-only

// lib/analytics.js
import 'client-only';

export function trackEvent(name) {
  if (typeof window !== 'undefined') {
    window.analytics?.track(name);
  }
}

Importing this into a Server Component will cause a build error.

Real-World Examples

Example 1: Layout with Shared Server and Client Pieces

Keep the layout as a Server Component. Only the interactive parts are Client Components:

// app/layout.jsx (Server Component)
import Logo from '@/app/ui/logo';
import Search from '@/app/ui/search';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <nav>
          <Logo />
          <Search />
        </nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

// app/ui/logo.jsx (Server Component - no directive)
export default function Logo() {
  return <img src="/logo.svg" alt="Logo" />;
}

// app/ui/search.jsx (Client Component)
'use client';

import { useState } from 'react';

export default function Search() {
  const [query, setQuery] = useState('');

  return (
    <input
      type="search"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Logo stays on the server. Search is interactive and runs on the client. The layout composes both.

Example 2: Product Page with Server Data and Client Add-to-Cart

// app/product/[id]/page.jsx (Server Component)
import { getProduct } from '@/lib/products';
import AddToCartButton from '@/app/ui/add-to-cart-button';

export default async function ProductPage({ params }) {
  const { id } = await params;
  const product = await getProduct(id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  );
}

// app/ui/add-to-cart-button.jsx (Client Component)
'use client';

import { useState } from 'react';

export default function AddToCartButton({ productId, price }) {
  const [added, setAdded] = useState(false);

  const handleClick = () => {
    // Call Server Action or API
    setAdded(true);
  };

  return (
    <button onClick={handleClick} disabled={added}>
      {added ? 'Added!' : `Add to Cart - $${price}`}
    </button>
  );
}

Example 3: Theme Provider Wrapping Server Content

// app/providers/theme-provider.jsx (Client Component)
'use client';

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

export function useTheme() {
  return useContext(ThemeContext);
}

export default function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// app/layout.jsx (Server Component)
import ThemeProvider from '@/app/providers/theme-provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

ThemeProvider is a Client Component. It wraps children, which can be Server Components. Render providers as deep as possible in the tree so Next.js can optimize static Server Components.

Example 4: Shared Utility Without Directives

Pure utilities (no hooks, no browser APIs) can be shared. They run in the environment of the component that imports them:

// lib/format.js (shared - no directive)
export function formatPrice(amount) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(amount);
}

// Server Component
import { formatPrice } from '@/lib/format';

export default async function ProductPage() {
  const product = await getProduct();
  return <p>{formatPrice(product.price)}</p>;
}

// Client Component
'use client';

import { formatPrice } from '@/lib/format';

export default function PriceDisplay({ amount }) {
  return <span>{formatPrice(amount)}</span>;
}

formatPrice is a pure function. It works in both Server and Client Components.

Conclusion

Sharing components and data between Server and Client Components in Next.js comes down to a few patterns:

• Pass data as props – Server Components fetch data and pass serializable values to Client Components.

• Pass Server Components as children – Client Components can wrap server-rendered content via children or slot props.

• Use serializable props only – Stick to primitives, plain objects, arrays, and Server Actions. Convert Date and ObjectId to strings.

• Share data with Context + React.cache – Use a Client Component provider that receives a promise and React.cache for server-side deduplication.

• Wrap third-party components – Add "use client" wrappers for libraries that use client-only features.

• Use server-only and client-only – Prevent accidental imports across the server/client boundary.

Keep Server Components at the top of the tree and push Client Components down to leaf nodes. This reduces JavaScript sent to the browser while keeping interactivity where you need it.

One of the most fundamental tasks when building an application is breaking it down into its core parts, or components. Websites are constructed from smaller building blocks. Just how small? Well, that’s up to you, the developer.

In the example below, we can spot some obvious elements: a header, a search box, perhaps a sidebar for navigation, and a main content area. Applications emerge from many smaller parts coming together.

Components allow us to isolate responsibility and manage complexity for specific parts of an application. In both traditional and low-code development, they play a vital role in creating maintainable, reusable, and testable products.

In this article, you’ll learn what a component is. Then we’ll build a custom text field component inside a Canvas app.

Prerequisites

This tutorial assumes a basic understanding of Microsoft Power Apps. While not required to understand the article, to actively follow along, you’ll need access to a Power Platform environment with the App Maker security role.

Table of Contents

• The Concept of a Component

• How to Build Your Own Component

• Wrapping Up

The Concept of a Component

The idea of components isn’t new – and it’s not exclusive to software.

Let’s think about a car for a moment. A car is made up of many smaller parts: wheels, an engine, seats, a steering wheel, and so on. But it’s the concept of the car – and specifically its ability to transport us – that provides value. That concept emerges from the way the individual parts work together.

Now imagine you get a flat tire. Not a good day. But thanks to how cars are designed, you don’t need a whole new car – maybe not even a new tire. You fix the issue and you’re back on the road within a few hours. Breaking things into smaller parts helps make the whole system more resilient. Applying this same principle to application development is a smart, future-proof approach.

Two Broad Types of Components

Within an application, components can vary in complexity and responsibility. Some are simple, like a text label. Others are more complex, like a pop-up dialog. Regardless of their complexity (again, your design choice), components typically fall into one of two categories:

• Presentational ("Dumb") Components

• Container ("Smart") Components

The difference comes down to purpose. A container component may interact with external sources and usually mutates state. A presentational component, on the other hand, is generally only responsible for how things look and light communication with the application.

Container components are often more complex and harder to test. Presentational components are typically simpler and more predictable.

This isn’t to say you should avoid container components. That’s not realistic. At some point, your app will need to talk to the outside world.

Aside: Pure Functions

The concept of pure functions is useful here.

A function is considered pure if it always returns the same output for the same input and doesn’t interact with any external state.

// Example 1 (pure)
function add(x, y) {
  return x + y;
}

console.log(add(2, 3)); // Always 5

// Example 2 (not pure)
function subtract(x) {
  const y = Math.floor(Math.random() * 100) + 1; // Random number between 1 - 100
  console.log(y);
  return x + y;
}

console.log(subtract(5)); // Unpredictable

Just like add() is pure and subtract() is not, a presentational component behaves like a pure function: same input, same output. The output might be how the UI appears or an event with associated data.

More About Inputs and Outputs

If you’ve built a Canvas App before, you’ve already used components – even if you didn’t realize it. Most controls in a Canvas App are presentational components.

Take the Label control. It receives an input (Text) and renders output (the text on screen).

Events are another kind of output. For example, the Button control emits an event when clicked – handled through the OnSelect property. That property allows the app to respond to the click and perform some logic.

💡 When a component sends a message back to the application the component is said to have emitted an event.

Now let’s look at the Text Input control.

Like the others, it has inputs (like Placeholder). But it also emits a Change event via OnChange. Even better, it passes data back to the application through its Value property. As the user types, the value updates. That value is how we access what they typed.

How to Build Your Own Component

Let’s build a simple, customized input component. It will include:

• A label above the input

• Optional “required” validation

• Change detection and data output

Here is what it will look like:

Part 1: Create the Component

1. Navigate to the Components section of your Canvas App.

2. Add a new component and name it cmp_baseInput.

3. Resize it to 340 (w) x 100 (h).

Part 2: Add Controls

1. Add a Text Input control, centered.

2. Add two Labels—one above, one below the input.

3. Rename them:

   • lbl_label

   • lbl_hint

   • txt_textField

Part 3: Add Custom Properties

Add four properties to the component. We're primarily concerned with the Property Type, Property Definition, and Data Type properties.

• IsRequired (Data, Input, Boolean)

• Label (Data, Input, Text)

• Value (Data, Output, Text)

• OnChange (Event)

Part 4: Connect the Properties

Set the control's properties as follows.

lbl_label.Text = cmp_baseInput.Label

lbl_hint.Text = "This field is required."
lbl_hint.Visible = cmp_baseInput.IsRequired And Len(txt_textField.Value) < 1

txt_textField.OnChange = cmp_baseInput.OnChange()

cmp_baseInput.Value = txt_textField.Value
cmp_baseInput.Label = "Placeholder Label"

Part 5: Style It

lbl_label.Size = 12
lbl_label.Height = 24
lbl_label.FontColor = RGBA(122, 138, 143, 1)

lbl_hint.Size = 10
lbl_hint.Height = 24
lbl_hint.FontColor = RGBA(215, 58, 60, 1)
lbl_hint.FontWeight = 'TextCanvas.Weight'.Semibold

Part 6: Add It to the App

1. Go back to the application screen.

2. Insert the component and name it cmp_userName.

3. Add a label nearby and set its text to:
   "The user name is: " & cmp_userName.Value

Part 7: Test It

• Type in the component and click outside of it → label near the component updates and the hint disappears.

• Clear the text → hint reappears

• Set IsRequired to false → hint disappears

• Set OnChange to Notify("A change occurred!") and type in the input→ a toast message appears with you notification.

Wrapping Up

You’ve just created a functional, presentational component. It handles labels, validation, value output, and even events – all in one package.

This is the real power of components: abstraction, clarity, and reusability. Whether you're in a traditional or low-code environment, thinking in components helps you break complexity into manageable parts.

As your apps grow, this mindset will pay off. You'll spend less time rewriting logic and more time building value – one well-defined part at a time.

Found this helpful? I write about practical automation, productivity systems, and building smarter workflows — without the jargon. Visit me at brandonwoz.com.

Stay curious and keep building.

Penpot designs directly translate to code that meets web standards, facilitating collaboration and hand-off between designers and developers.

This tutorial will walk you through recreating or moving existing Figma components to Penpot. It will include a rundown of the Penpot tool and how to use it, a brief comparison of the two tools, and important resources.

Table of Contents

• How to Recreate Existing Figma Files in Penpot

• Understanding the Penpot User Interface

• Understanding Penpot Layouts

• How to Create and Use Penpot Components

• How to Create Reusable Assets in Penpot

• How to Add and Use Icons in Penpot

• Figma Vs. Penpot - My experience

• Resources and Notes

How to Recreate Existing Figma Files in Penpot

There are two ways to move or recreate existing Codex components from Figma to Penpot: By using the community-supported migration tool or by manually recreating the components and files.

Using the Community-Supported Migration Plugin

You can use this plugin to move your Figma designs to Penpot. It is a straightforward way to migrate from Figma, especially if you have many components.

To do so, add it as a Figma plugin and find the option in the context menu. Then, click on the "Penpot Exporter" option to activate the plugin. The plugin will then create a zip file for your component and download it.

Over in Penpot, in your Projects dashboard, click on the three dots context menu and select "Import Penpot files" to open a file picker window. Click on the zip file downloaded from Figma, and Penpot will create a new project with the same name as the zip file. This new project will contain your Figma component translated to the Penpot environment.

Looking at the new component, you'll notice that the migration plugin correctly picks up any child components and typography variables while keeping things fairly organized. But it does not pick up color variables.

Manually Recreating Figma components

Another way to move Figma components to Penpot is to recreate them manually. While this option is more tedious than the previous one, it gives you fine-tuned control over how the component looks, how the files are organized, and how the assets are carried over.

It is an excellent excuse to spruce up the existing components, especially if there are few. It is also a good exercise for first-time users to grasp Penpot.

To effectively move components using this method, you will need to understand how Penpot works. The following concepts will help make this process more efficient.

Understanding the Penpot User Interface

Penpot's UI is pretty similar to Figma's, except that Penpot defaults to Dark Mode. You have your controls on the right and your files, assets, and layers on the left, with a canvas in the middle.

Both have a toolbar that enables you to interact with the canvas. The toolbars have slightly different icons and names but have the same functionality. Notably, in Penpot, the Frame tool is called Board.

Penpot supports most of Figma's features, except for Design Tokens, which will be added soon.

Understanding Penpot Layouts

Penpot supports Flex and Grid layouts. These layouts allow you to position items precisely and simplify creating fluid designs. For those familiar with CSS Grid and Flex, they work in the same way.

Flex layout allows you to organize the elements within a parent container, like a board or an encompassing shape, across one dimension, width, or height. It enables you to determine the spacing and positioning of the child elements via visual controls with labels on the right side panel.

Grid layouts allow the same controls as Flex layouts but with the added flexibility of simultaneously spanning a child element across both dimensions. This makes Grid layouts quite helpful in creating complex and nuanced designs.

How to Create and Use Penpot Components

Creating a component in Penpot is relatively straightforward. You select the elements that will make up the component, then right-click and click "Create component," turning your selection into a component.

Your new component will be available under the "Assets" tab on the left side panel. To use, drag it onto the canvas.

You can also create copies of the component. By default, the copies are tied to the main component, and any changes to the main will be reflected in all copies. You can override this by detaching the copies from the context menu.

How to Create Reusable Assets in Penpot

Penpot has three asset types: Typography, Colors, and Components, with Penpot design tokens coming very soon. Typography refers to information on font types and weights that make up text styles. Colors enable you to create and sort your repeated colors. Components refer to reusable design pieces and, in this context, include graphical items like icons and images.

To create a color or typography asset, click the "Assets" tab and the plus icon on the relevant accordion item. For color, it will open a color picker. Paste the hex value in the appropriate place, then save it. The color will show up in the accordion drop-down. You can click on it to give it a semantic name if desired.

For typography, click on the plus icon at the relevant accordion. This will open a panel where you can specify the font, font weight, letter spacing, and line height. You can also change the asset's name after it's saved.

How to Add and Use Icons in Penpot

You can add icon packs and libraries in Penpot from the Project dashboard. At the bottom of the page, a banner containing a list of commonly used libraries is displayed. These libraries usually include a few icon packs. You can scroll through to choose one or click on the explore more option at the end of the slider to open up the dedicated Penpot templates page.

If you find a relevant library from the bottom banner, click the download icon. Penpot will prompt you to add the selected library. Once you accept it, it will be added to the "Libraries" menu item on the left side panel.

If you click through to the dedicated templates page, clicking the download icon will download a Penpot file. You can then drag it to the projects page, and it will also be available in the "Libraries" section of the projects page.

To use the libraries within your project file, click the "Assets" tab on the left side panel, then click the "Libraries" button below it. This will open a modal with all your libraries listed under "Shared Libraries."

Click on the plus icon on the ones you want to use in your project. This will link that library to your project and be available in the left side panel. You can then search for any particular icon from the search bar and drag it onto the canvas.

To remove a library from your project, click on the libraries button. In the modal, under "libraries in this file," all used libraries are listed. Click on the link icon next to the library you want to remove. This will delink it and remove it from the side panel.

Figma Vs. Penpot – My experience

As a first-time user of Penpot and a long-term casual user of Figma, I noticed some differences and encountered some teething problems.

Swapping Out Icons

You can swap out components in Penpot! It's too bad that I discovered this after I had finished my first component migration.

Renaming Files and Folders

I struggled to find how to rename files and folders in Penpot. I kept looking for the shortcut or a menu item in the context menu. It turns out you have to double-click on the title to change it. You can rename files in the same way in Figma, but I just never did it like that.

Adherence to Web Standards

I was pleasantly surprised at the code quality that Penpot provides, along with your designs. It meets the w3c standards, but the HTML could be more semantic.

Penpot Design System

Penpot avails its design system along with lots of little libraries that help you understand how the tool works. This is very nice as it allows you to get a good understanding of design language and how to organize design systems.

Limited Shape Options in the Toolbar

The Penpot toolbar lacks essential shapes such as pen, arrow, and triangle. While you can recreate this with the path tool or use a library to import them, it is definitely something I missed that was readily available in Figma.

It took me a few tries to get comfortable with Penpot and in the end, I really liked it. Plus, its open-source nature makes it even more endearing.

Resources and Notes

Using Penpot has a learning curve, even if you are familiar with other design tools like Figma. These resources can help you get up to speed faster and make you more efficient with Penpot.

• Penpot video on layouts

• Penpot live on design tokens

• Penpot documentation

• Penpot migration plugin

• Penpot templates and libraries

• Penpot design systems

Once the design phase is complete, the focus shifts to UI development, where tools like HTML, CSS, and JavaScript come into play. At a higher level, libraries like React and Vue streamline the development process.

Regardless of the application type, your code can almost always be broken down into components.

“Repeated components are a nightmare to manage.” – Every frustrated UI developer

Imagine having a component library where all commonly used elements are pre-built and responsive—how much easier and faster would that make development?

In this article, I’ll show you how to build your own component library, using a minimal tech stack, and then use it to build an application.

What We’ll Cover

1. Prerequisites

2. Why Build a Component Library?

3. How to Build the Component Library

4. Let’s Build the Library

   • Step 1: Design the Layout using Pen and Paper

   • Step 2: Design the Components in HTML and CSS

   • Step 3: Hosting the Project CSS File

5. FAQ

6. Conclusion

Prerequisites

• Proficiency in HTML, CSS, and JavaScript: A solid understanding of front-end development fundamentals is essential.

• Basic Deployment Skills: Familiarity with deploying applications on platforms like Netlify or Vercel is required.

• Git/GitHub Knowledge: You should be comfortable with version control, including basic Git commands and managing repositories on GitHub.

Why Build a Component Library?

Every website is built from components, which are structured with HTML and styled using CSS.

HTML and CSS are fundamental technologies for creating visually appealing web pages. However, mastering them can be challenging due to the wide array of HTML tags and CSS properties.

To simplify the process, developers often use component libraries, which deliver various benefits:

1. Faster Development: Pre-built components and responsive design features accelerate the development process.

2. Consistency: Ensures uniform styling and cross-browser compatibility across the application.

3. Maintainability: Encourages structured, modular code, making it easier to maintain and scale.

4. Community Support: extensive documentation, plugins, and a strong community provide valuable resources.

5. Customization and Accessibility: offers easy customization and accessibility-focused components for inclusive designs.

How to Build the Component Library

Building a component library involves several key steps. First, I’ll give you an overview of each step we’ll take to create the component library. After that, we’ll build it together.

1. Design the Layout of the Components

Before writing any code, it’s crucial to have a clear vision of what you want to build. Start by sketching the layout of your components on paper, or use design tools like Figma or Canva to create a visual representation.

Having a visual guide will streamline your coding process and help you stay focused as you translate designs into code.

2. Write the Component Structure in HTML

Once the design is ready, the next step is to structure your components in HTML. This creates the foundation of your webpage, as HTML is the backbone of any web project.

Pro-tip: Use semantic HTML to improve user accessibility and SEO. For example, use <article>, <section>, or <header> tags instead of generic <div> elements when appropriate.

3. Style the Components with CSS

With the HTML structure in place, you can begin styling the components using CSS. Apply styles like background colours, font sizes, link decorations, and button styles using CSS classes and IDs.

CSS is a powerful tool—you can even add beautiful animations. But in this tutorial, we’ll focus on utilizing the essential properties of CSS to create clean, functional designs.

4. Host the Project's CSS File

Once your component library is ready, you’ll want to make it accessible for future projects. Hosting your CSS file on platforms like Netlify, GitHub Pages, or Vercel allows you to use the components across different projects by simply linking to the global CSS file.

By following these four steps, you’ll create a reusable component library that helps you build beautiful websites efficiently and effectively.

Let’s Build the Library

I began my journey as a software developer by diving into HTML and CSS to design webpages. These foundational technologies are essential for any web developer, but mastering them can be challenging—HTML boasts 152 tags, while CSS has over 200 properties.

While you won’t need to use every single HTML tag or CSS property, knowing the core concepts requires significant time and effort. .

Now, let’s consider a scenario: if I asked you to create a small website or a landing page without using any component library, how would you approach it? My goal is to minimize the time spent on designing.

Imagine if there was a way to automate the design process, allowing you to achieve beautiful results without sacrificing flexibility. This is where a component library comes into play. By writing your components in pure vanilla CSS once, you can reuse them across any project.

I encourage you to pursue this approach because it will provide real-time experience with HTML and CSS while helping you learn a multitude of concepts simultaneously.

I developed a small library consisting of 10+ beautiful components, which you can explore here: SlateUi. This library has helped deepen my understanding of web technologies.

My goal was to understand HTML and CSS thoroughly. After completing one project, I wanted to feel confident in all the critical aspects of web design, from UI to code.

By designing and developing these components, I gained greater control and customization options tailored to specific requirements.

The learning process was also incredibly rewarding. Creating each component took considerable time, but the exposure I gained to these two technologies significantly boosted my confidence.

Additionally, this approach helps avoid the redundancy of writing repetitive CSS code for similar elements.

Step 1: Design the Layout using Pen and Paper

First, you’ll want to create a basic layout for the webpage. This is just initial sketching so that you know what you have to build in your project

The layout consists of three key elements:

a) Header
b) Card(s)
c) Footer

Each component includes distinct colours, text, and additional elements. Here’s what it looks like in our example:

In an actual project, you typically start with prepared design models created in tools like Figma or other UI design software.

For this project, I used Canva to design the layout. This initial design phase is crucial as it lays the foundation for core feature development.

Then, you’ll write the structure of the component in HTML. At this level, I will simply put our HTML elements in such a way so that we can prepare a basic skeleton of the webpage as we have designed it. In the header I have a logo and some navigation links, in the cards I have a button and an image; and in the footer, I have some more links.

Step 2: Design the Components in HTML and CSS

At this point, we’ll enhance the components we created with HTML by applying CSS properties to beautify them. This stage involves using CSS to set background colours, primary colours, link decorations, button styles, and more. We’ll do this by utilizing CSS classes and IDs.

So far, we’ve built three components:

a) Header with navigation links
b) Footer
c) Horizontal Cards with action buttons

Now, let’s begin by building the first component: the Header.

The header component:

The header is at the top of a page or a section. It usually contains a logo, search bar, navigational links, and so on.

The footer component:

The Footer defines the footer or bottom of a web page or a section. Usually, it contains copyright information, contact details, navigation links, and so on.

The card component:

The card component can house various types of content, including a heading, image, main content, and a footer that features a call-to-action button.

Cards are designed to serve specific purposes, such as showcasing e-commerce products, displaying news items, or serving multiple other functions across different contexts.

Combining it all together:

By clicking the button, the card data will update with random cat facts, along with the length of each fact.

Note: I used an open-source API for this project. If the content does not update on the card, it may be due to an API outage.

Now, have you checked the CSS code?

You might be wondering why I’ve imported just a single line of code into my CSS file. Well, I have combined the CSS files of all three parts of the layout (header, footer, & cards components) into one CSS file and hosted the file on Netlify. This is the URL that is holding all three CSS files:

@import url("https://hashnodeblogchallenge.netlify.app/index.css");

It serves the CSS in all three components and maintains the styles for all three components.

Step 3: Hosting the Project CSS File

Finally, I’ve arrived at the most crucial part of this project, where all the magic happens.

Currently, I have three CSS files for each of the web components: header, cards, and footer.

Since our project is small, I will combine all CSS file code into one CSS file to get one CSS file which will work as a universal CSS file.

The process of hosting the CSS file is straightforward. Here's a detailed breakdown of what you need to do:

1. Push Your Code to GitHub

You need to push (upload) your project files, including the HTML, CSS, and other assets, to a GitHub repository. Here’s how you can do that:

1. Initialize a Git repository in your project directory using git init.

2. Add all your files using git add ..

3. Commit the files with git commit -m "Initial commit".

4. Link to a GitHub repository you’ve created using git remote add origin <repo-url>.

5. Finally, push your code using git push -u origin main.

6. Result: Your project files will now be hosted in your GitHub repository.

2. Open Netlify and Log In or Sign Up

Then, visit Netlify and either sign in if you already have an account or create a new one.

You can sign up using your GitHub credentials or a separate email. This step gives you access to Netlify's web hosting services, which will allow you to deploy your project directly from GitHub.

3. Connect Your GitHub Repository That Contains Your Code

Once logged in, you'll connect your GitHub repository to Netlify.

1. On Netlify, click on "New site from Git".

2. Choose GitHub as the source.

3. Authorize Netlify to access your GitHub account.

4. Select the repository that contains your project from the list.

5. Configure build settings if necessary (though for simple static sites, Netlify automatically detects them).

4. Click "Deploy"

After connecting your repository, Netlify will display a "Deploy" button.

1. Click "Deploy" to trigger the build and deployment process.

2. Netlify will pull your code from GitHub, build the site (if needed), and deploy it to a live URL.

Your project is now live on the web, and you’ll be provided with a URL where you can access the deployed site.

5. Access the Deployed URL and Append the CSS File URL

You’ll access the deployed site by visiting the URL provided by Netlify and directly referencing the CSS file you uploaded.

1. Once your site is deployed, note down the provided URL (for example, https://example.netlify.app).

2. To access a specific CSS file, append the file name to the URL, for example: https://example.netlify.app/styles.css.

3. Here, styles.css is the name of your CSS file that you uploaded to GitHub and deployed via Netlify.

This will allow you to view or reference the CSS file directly through a public URL.

This process essentially helps you host your project and its assets on Netlify, allowing easy access to any file (like filename.css) that you uploaded to GitHub. You can use these public links in your projects or share them.

And that’s it! Link this URL to your project's CSS file.

I have hosted the main CSS file on the Netlify app so that it can be accessed anywhere simply by importing it into your project. Here is the URL of my hosted CSS file: https://hashnodeblogchallenge.netlify.app/index.css.

The beauty of component libraries is that they allow you to focus on development rather than design.

FAQ

What Benefits Have We Gained from This?

Now, you simply need to copy the HTML code and import the CSS file into your project. Here are the key benefits:

• Reduces time spent on repetitive CSS coding.

• Provides greater control over components, allowing for customization based on your needs.

• Offers real-time experience with HTML and CSS, enabling you to learn core concepts effectively.

What if I Want to Change Something?

This is straightforward. Just edit your CSS file and update the header colour from black to blue where you have declared that header class or ID.

What if I Want to Create More Components?

You can create as many components as you need! Just store the style code in the same hosted CSS file, and everything will work seamlessly.

How Does This Save Me Time?

Imagine you need to create 5 websites, each with 5 pages (that’s a total of 25 pages). If you identify common elements, such as headers and footers, that will be used across all 25 pages, you can avoid writing 25 separate components. Instead, you can simply use the components from your library—just copy and paste the HTML and add the CSS file.

What Lets the Entire App Function with Just One Line of CSS?

The concept is quite simple and can be broken down into the following steps:

1. Create components based on your requirements.

2. Control their design with CSS and apply the necessary properties.

3. Host your main CSS file somewhere to obtain a new URL, which you can use to import your CSS styles in HTML.

Now you can calculate how much time you have saved.

Conclusion

Creating a component library using HTML and CSS allows you to build beautiful web pages quickly and effectively.

It also provides you with a deep understanding of HTML and CSS, which are essential skills for a successful software development career. With these skills, you'll be able to create engaging layouts without spending excessive time coding from scratch.

To help you get started, here’s an example of a component library I developed, which includes 10+ beautiful components: SlateUI.

Now, you simply need to copy the HTML code and paste it where you want to display your components, along with importing your CSS file URL into that HTML file.

So guys this is the end from my side. If you find this article useful, then do share it and connect with me – I am open to opportunities:

• Follow Me on X: Prankur's Twitter

• Follow me on LinkedIn: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

Two key concepts that developers need to understand are controlled and uncontrolled components. These concepts define how form data is handled within a React component.

Controlled components rely on React state to manage the form data, while uncontrolled components use the DOM itself to handle form data.

In this article, we will explore the differences between controlled and uncontrolled components, how to implement them, and some best practices for using each approach in your React applications.

Table of Contents

1. What are Controlled Components?
2. How Controlled Components Work
3. Benefits of using Controlled Components
4. Examples of Controlled Components
5. What are Uncontrolled Components?
6. How Uncontrolled Components Work
7. When to use Uncontrolled Components
8. Limitations to Uncontrolled Components
9. Examples of Uncontrolled Components
10. Factors to Consider When Choosing Between Controlled and Uncontrolled Components
11. Conclusion

What are Controlled Components?

Controlled components are form elements (like input, textarea, or select) that are managed by React state. This means that the value of the form element is set and updated through React state, making React the "single source of truth" for the form data.

By controlling form elements via state, you gain more control over user interactions and can easily enforce validation, format data, and respond to changes.

Here's an example of a controlled component:

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledComponent;

In this example:

• The value state holds the current value of the input field.
• The handleChange function updates the state whenever the user types in the input field.
• The handleSubmit function handles the form submission, using the current state value.

How Controlled Components Work

Controlled components in React ensure that the form data is handled by the React state, providing a consistent and predictable way to manage user input.

Here’s a breakdown of how these components work, including state management in the parent component, passing values as props to child components, handling user input with event handlers, and updating state in the parent component.

State Management in the Parent Component

State management is often handled in the parent component, especially when multiple child components need to interact or share state. The parent component maintains the state and passes it down to child components via props.

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

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <h1>Controlled Component Example</h1>
      <ChildComponent value={inputValue} setValue={setInputValue} />
    </div>
  );
}

export default ParentComponent;

Passing Values as Props to a Child Component

The parent component passes the state value and a state updater function to the child component as props. This allows the child component to display the current state and update it when needed.

import React from 'react';

function ChildComponent({ value, setValue }) {
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ChildComponent;

Handling User Input with Event Handlers

Event handlers are used to manage user input. When the user types into the input field, the onChange event triggers the handleChange function, which updates the state in the parent component.

function ChildComponent({ value, setValue }) {
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
    </form>
  );
}

Updating State in a Parent Component

When the state updater function (setValue) is called in the child component, it updates the state in the parent component. This causes the parent component to re-render, which in turn re-renders the child component with the new state value.

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <h1>Controlled Component Example</h1>
      <ChildComponent value={inputValue} setValue={setInputValue} />
    </div>
  );
}

Putting It All Together

Here's the complete example showing how controlled components work with state management in the parent component:

// ParentComponent.jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <h1>Controlled Component Example</h1>
      <ChildComponent value={inputValue} setValue={setInputValue} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent({ value, setValue }) {
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ChildComponent;

Controlled components in React provide a good way to manage form data by using React state as the single source of truth. This approach involves managing state in the parent component, passing values and state updater functions as props to child components, handling user input with event handlers, and updating state in the parent component.

This method ensures consistent and predictable form behavior, making it easier to implement validation, conditional rendering, and other interactive features.

Benefits of Using Controlled Components

Controlled components offer several advantages that can significantly improve the development experience and functionality of React applications. Here are the key benefits:

Predictable State Management

Using controlled components ensures that the form data is always in sync with the React state. This predictability comes from having a single source of truth for the data, which is the state itself.

Since the state drives the UI, any change in the state immediately reflects in the form elements and vice versa. This makes it easier to debug and understand how data flows through your application.

Example:

import React, { useState } from 'react';

function PredictableForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Current value: {name}</p>
    </div>
  );
}

In this example, the input field and the displayed text are always synchronized, providing a predictable behavior.

Easier Form Validation

Controlled components make it straightforward to implement form validation. Since the form data is stored in the component state, you can easily validate it before updating the state or on form submission. This approach allows you to provide real-time feedback to users as they interact with the form.

Example:

import React, { useState } from 'react';

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    const value = event.target.value;
    setEmail(value);

    if (!value.includes('@')) {
      setError('Invalid email address');
    } else {
      setError('');
    }
  };

  return (
    <div>
      <input type="email" value={email} onChange={handleChange} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

Here, the validation logic runs on every change, providing immediate feedback to the user if the input is invalid.

Integration with Complex UI Libraries

Controlled components integrate seamlessly with complex UI libraries and frameworks, such as Redux for state management or Formik for handling forms.

By managing form data in the component state, you can easily connect your forms to these libraries and benefit from their advanced features like global state management, asynchronous data fetching, and more.

Example with Formik:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => (
  <Formik
    initialValues={{ email: '' }}
    validationSchema={Yup.object({
      email: Yup.string().email('Invalid email address').required('Required'),
    })}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <label htmlFor="email">Email</label>
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default SignupForm;

In this example, Formik handles form state and validation, demonstrating how controlled components can be part of more complex setups.

Controlled components provide predictable state management, easier form validation, and seamless integration with complex UI libraries.

By keeping the form data in the React state, you ensure consistency and control over your application's behavior, making it easier to build and maintain interactive and dynamic user interfaces.

Examples of Controlled Components

Controlled components are fundamental in React for handling form inputs in a predictable and manageable way.

Here are some examples of how you can implement controlled components for various types of form inputs, including text fields, email fields, password fields, select menus, checkboxes, and radio buttons.

Input Fields (Text, Email, Password)

Text Input

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <label>
        Text:
        <input type="text" value={text} onChange={handleChange} />
      </label>
      <p>Entered Text: {text}</p>
    </div>
  );
}

export default TextInput;

Email Input

import React, { useState } from 'react';

function EmailInput() {
  const [email, setEmail] = useState('');

  const handleChange = (event) => {
    setEmail(event.target.value);
  };

  return (
    <div>
      <label>
        Email:
        <input type="email" value={email} onChange={handleChange} />
      </label>
      <p>Entered Email: {email}</p>
    </div>
  );
}

export default EmailInput;

Password Input

import React, { useState } from 'react';

function PasswordInput() {
  const [password, setPassword] = useState('');

  const handleChange = (event) => {
    setPassword(event.target.value);
  };

  return (
    <div>
      <label>
        Password:
        <input type="password" value={password} onChange={handleChange} />
      </label>
      <p>Entered Password: {password}</p>
    </div>
  );
}

export default PasswordInput;

Select Menus

import React, { useState } from 'react';

function SelectMenu() {
  const [option, setOption] = useState('option1');

  const handleChange = (event) => {
    setOption(event.target.value);
  };

  return (
    <div>
      <label>
        Choose an option:
        <select value={option} onChange={handleChange}>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </label>
      <p>Selected Option: {option}</p>
    </div>
  );
}

export default SelectMenu;

Checkboxes

import React, { useState } from 'react';

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div>
      <label>
        Accept Terms:
        <input type="checkbox" checked={isChecked} onChange={handleChange} />
      </label>
      <p>Checked: {isChecked ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default Checkbox;

Radio Buttons

import React, { useState } from 'react';

function RadioButton() {
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedOption === 'option3'}
          onChange={handleChange}
        />
        Option 3
      </label>
      <p>Selected Option: {selectedOption}</p>
    </div>
  );
}

export default RadioButton;

Controlled components provide a clear and consistent way to handle form inputs in React. By using React state to manage the values of input fields, select menus, checkboxes, and radio buttons, you ensure that the UI remains in sync with the state.

This approach simplifies validation, makes data handling predictable, and facilitates integration with complex UI libraries.

What are Uncontrolled Components?

Uncontrolled components in React manage their own state internally rather than relying on React state. This approach is useful for simple forms where you don't need to manipulate the input data through React state updates.

Example:

import React, { Component } from 'react';

class UncontrolledComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to hold the input DOM element
    this.inputRef = React.createRef();
  }

  handleSubmit = () => {
    // Access the input value using the ref
    console.log(this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        {/* Use ref attribute to attach the ref to the input element */}
        <input 
          type="text" 
          ref={this.inputRef} 
        />
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

• Ref Usage: In uncontrolled components, we use the ref attribute to create a reference (this.inputRef) to the DOM node of the input field.
• Handling Input: When the user enters data and clicks "Submit", this.inputRef.current.value allows us to directly access the current value of the input field without involving React state.
• Advantages: Uncontrolled components can be simpler and faster for basic form handling. They are often used when the form data is not needed in React state for any processing or validation.

Key Points:

• Internal State: Uncontrolled components manage their state internally with the help of refs, not with React state updates.
• Direct DOM Access: Accessing form data is done directly through DOM refs (this.inputRef.current.value).
• Simplicity: They are straightforward for simple forms where real-time validation or complex form interactions are not necessary.

Uncontrolled components are handy in scenarios where you want a lightweight approach to handling form data without the overhead of managing state in React.

How Uncontrolled Components Work

Uncontrolled components manage their state internally using DOM refs (useRef hook in functional components or React.createRef() in class components) to access form element values directly.

Unlike controlled components, where form data is managed through React state and updated via setState, uncontrolled components bypass React's state management for handling form inputs.

Direct DOM Access with useRef Hook

In functional components, the useRef hook allows us to create a mutable reference that persists across renders. We can use this ref to directly access DOM nodes, such as input fields.

Example:

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null); // Create a ref to hold the input DOM element

  const handleSubmit = () => {
    // Access the input value using the ref
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default UncontrolledComponent;

Accessing an Element's Value on Submit

In the example above:

• Creating a Ref: const inputRef = useRef(null); initializes a ref named inputRef to hold the reference to the input DOM element.
• Handling Submit: When the "Submit" button is clicked (onClick={handleSubmit}), the handleSubmit function retrieves the current value of the input field using inputRef.current.value.

Key Points:

• DOM Access: The useRef hook allows direct access to DOM elements, enabling us to interact with them without updating React state.
• Form Submission: On form submission (onClick={handleSubmit}), the function accesses the current value of the input field through inputRef.current.value.
• Simplicity: Uncontrolled components are straightforward for basic form handling scenarios where direct DOM manipulation suffices, avoiding the need for managing state updates in React.

Using uncontrolled components with useRef is particularly useful for handling forms where real-time validation or complex interactions aren't necessary, focusing instead on simplicity and performance.

When to Use Uncontrolled Components

Uncontrolled components are ideal in specific scenarios where simplicity and direct DOM manipulation are advantageous over managing state with React.

Here are the key situations when using uncontrolled components is beneficial:

1. Simple Forms with Limited Interactions

Uncontrolled components shine in scenarios where:

• The Forms Arent' That Complex: The form is straightforward with minimal input fields and does not require complex validation or dynamic updates based on other form inputs.
• Performance is Important: Directly accessing form values via DOM refs (useRef or React.createRef()) can be more performant than updating React state for each input change, especially in large forms.
• You want Simplicity: When you prefer a simpler implementation without managing state updates and re-renders for form inputs.

2. Focus Management (Selecting Text)

In some cases, you might need to manage user interaction such as selecting text within an input field or programmatically focusing on a specific input without triggering React state updates unnecessarily.

Uncontrolled components allow you to:

• Directly manipulate the DOM: Use DOM methods like select() on the input element directly via refs to manage focus or text selection.
• Handling focus and text selection directly with refs: This can be more efficient and straightforward compared to triggering state updates and managing focus state in React components.

Example Use Case:

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null); // Create a ref to hold the input DOM element

  const handleFocus = () => {
    inputRef.current.select(); // Selects all text in the input field
  };

  return (
    <div>
      <input type="text" ref={inputRef} defaultValue="Initial Value" />
      <button onClick={handleFocus}>Select Text</button>
    </div>
  );
}

export default UncontrolledComponent;

In this example, clicking the "Select Text" button calls inputRef.current.select() to select all text within the input field directly, without involving React state updates. This is a simple yet effective use of uncontrolled components for managing focus and text selection.

Limitations of Uncontrolled Components

Using uncontrolled components in React can offer simplicity and performance benefits in certain scenarios, but they also come with limitations that are important to consider:

Difficulty in Form Validation:

• Uncontrolled components can make form validation more challenging compared to controlled components. Since the form data is managed internally by the DOM rather than React state, validating and ensuring data consistency across multiple inputs can be complex.
• Validation logic often involves accessing and checking each input's value directly through refs (ref.current.value). This approach can lead to more manual and error-prone validation code, especially in forms with complex validation requirements.

Less Predictable State Management:

• Uncontrolled components bypass React's state management, which can lead to less predictable state handling in complex applications. Changes in form data are not automatically synchronized with React's state updates or other component state, potentially leading to inconsistencies.
• This lack of synchronization can make it challenging to maintain a single source of truth for form data across different components or when integrating with other state management solutions like Redux or Context API.

Limited React Ecosystem Integration:

• Uncontrolled components may not fully leverage React's ecosystem features, such as state persistence, time-travel debugging (with Redux), or seamless integration with third-party libraries designed for controlled components.
• Components relying on React state benefit from these features, enhancing developer productivity and application maintainability.

Examples of Uncontrolled Components

Uncontrolled components in React are particularly useful for handling input fields and textarea elements where direct DOM manipulation suffices, and React state management isn't necessary.

Here are examples of how uncontrolled components can be applied:

1. Input Fields (Read-only or Pre-filled Data)

Uncontrolled components can be used when you need to display read-only or pre-filled data in an input field without managing its state in React.

Example:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const initialValue = 'Hello, World!';
  const inputRef = useRef(null); // Create a ref to hold the input DOM element

  const handleFocus = () => {
    inputRef.current.select(); // Selects all text in the input field on focus
  };

  return (
    <div>
      {/* Using defaultValue for pre-filled data */}
      <input type="text" ref={inputRef} defaultValue={initialValue} readOnly />
      <button onClick={handleFocus}>Select Text</button>
    </div>
  );
}

export default UncontrolledInput;

In this example:

• The defaultValue attribute sets the initial value of the input field.
• readOnly attribute prevents users from editing the input field, making it read-only.
• useRef hook manages focus and selection of text within the input field using inputRef.current.

2. Textarea Elements

Uncontrolled components are also applicable to textarea elements, especially when dealing with multiline text input where immediate state updates are not necessary.

Example:

import React, { useRef } from 'react';

function UncontrolledTextarea() {
  const initialText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
  const textareaRef = useRef(null); // Create a ref to hold the textarea DOM element

  const handleClear = () => {
    textareaRef.current.value = ''; // Clear textarea content directly
  };

  return (
    <div>
      {/* Using defaultValue for pre-filled content */}
      <textarea ref={textareaRef} defaultValue={initialText} rows={4} cols={50} />
      <button onClick={handleClear}>Clear Text</button>
    </div>
  );
}

export default UncontrolledTextarea;

In this example:

• The defaultValue attribute sets the initial content of the textarea.
• useRef hook manages direct manipulation of textarea content using textareaRef.current.
• rows and cols attributes define the dimensions of the textarea.

Key points:

• Direct DOM Access: Uncontrolled components leverage useRef to directly manipulate DOM elements for managing input fields and textarea content.
• Performance: Suitable for scenarios where real-time updates or complex state management aren't required, enhancing performance by avoiding unnecessary state updates.
• Simplicity: Provides a straightforward approach to handling form elements with default or read-only values, maintaining simplicity in component logic.

These examples demonstrate how uncontrolled components can handle input fields and textarea elements effectively in React applications, focusing on simplicity and direct DOM manipulation for specific use cases.

Factors to Consider When Choosing Between Controlled and Uncontrolled Components

When deciding between controlled and uncontrolled components in React, several factors should be considered to determine which approach best suits your application's requirements. Here are key considerations for each factor:

1. Complexity of Form

Controlled Components:

• Advantages: Suitable for complex forms where you need precise control over the form state and its interaction with other components.
• Usage: Use controlled components when form inputs depend on each other, require validation, or when you need to synchronize form state across multiple components or pages.

Uncontrolled Components:

• Advantages: Simplify implementation for basic forms with minimal interactivity or where direct DOM manipulation suffices.
• Usage: Ideal for simple forms without complex validation or when managing form state in React isn't necessary for your use case.

2. Need for Form Validation

Controlled Components:

• Advantages: Easier integration with form validation libraries (for example, Formik, Yup) since form state is managed within React state.
• Usage: Use controlled components when implementing complex validation rules, such as conditional validation or asynchronous validation logic.

Uncontrolled Components:

• Challenges: Handling form validation can be more manual and less integrated, as form data is managed directly through DOM manipulation.
• Usage: Consider uncontrolled components for simple forms where validation requirements are minimal or where custom validation logic can be managed without relying heavily on React state updates.

3. Integration with External Libraries

Controlled Components:

• Advantages: Seamlessly integrates with external state management solutions like Redux or React's Context API for managing global application state.
• Usage: Prefer controlled components when your application requires integration with third-party libraries or when leveraging advanced React ecosystem features (for example, time-travel debugging with Redux).

Uncontrolled Components:

• Considerations: May require additional effort to integrate with external libraries that assume controlled component behavior.
• Usage: Use uncontrolled components when external state management isn't necessary, focusing on lightweight implementation and minimizing dependencies.

Additional Considerations:

Performance:

Controlled components may incur overhead due to frequent state updates, whereas uncontrolled components can offer better performance for simple forms by reducing re-renders.

Developer Preference:

Consider team familiarity and preferences with React state management patterns when deciding between controlled and uncontrolled components.

Summary:

Choose Controlled Components for complex forms, robust validation needs, and seamless integration with external state management and validation libraries.

Opt for Uncontrolled Components for simpler forms, minimal validation requirements, and when direct DOM manipulation provides sufficient functionality without the need for managing form state in React.

Conclusion

The choice between controlled and uncontrolled components in React hinges on several critical factors that determine the optimal approach for form management within your application.

Ultimately, the decision should align with your project's specific needs, considering factors such as form complexity, validation requirements, integration with external libraries, and developer preferences.

By carefully assessing these factors, you can implement the most effective form handling strategy in React that balances functionality, performance, and ease of maintenance.

Connect with me on LinkedIn.

Rating systems are everywhere, from the classic star ratings on movie review websites to the ubiquitous thumbs up/down on streaming platforms. They guide our choices, shape our opinions, and ultimately influence the success of products and services.

In this article, we will create a movie-themed rating component using the Compound Component pattern in React. I'll guide you through structuring the component, managing its state, and designing an interactive user interface that captures the essence of rating.

Prerequisites

While this article is tailored to be as low-level as possible, having a base understanding of the React compound component pattern is beneficial.

If you don’t have any experience with it, don't worry – I've got you! Just head over to this compound component article where I break it down more extensively. Other prerequisites include.

• Fundamentals of HTML, CSS, and Tailwind CSS
• Fundamentals of JavaScript, React, and React Hooks.

What We'll Cover:

1. Understanding Rating Components
   – What Comprises a Rating Component
   – Advantages of Rating Component
2. How to Build a Rating Component – Regular React Method
   – Compound Component Method
3. How to Upgrade Rating Component
4. And just for fun
5. Conclusion

Understanding Rating Components

Rating components are an essential part of modern web applications, particularly in contexts where user feedback is critical. These components provide a user-friendly interface for people to express their opinions, often in a quantifiable manner.

What Comprises a Rating Component?

A rating component is a UI element that allows users to provide a rating, usually on a fixed scale. Here are the typical elements that make up a rating component:

• Icons or Symbols: These are the visual representations of the rating scale. Common examples include stars, hearts, thumbs, or numerical values.
• Interactive States: These components often change appearance based on user interaction, such as hovering or clicking.
• Feedback Mechanism: Some rating components display immediate feedback, such as highlighting the selected icons or showing the rating value.
• Accessibility Features: Ensuring that the component is accessible to all users, including keyboard navigation and screen readers, is crucial.
• Custom Feedback: Some rating components include a text area allowing users to comment. This feedback helps clarify the reasons behind their ratings and enables them to raise any issues they encounter.

Advantages of Rating Components

Rating components offer several benefits, both for users and developers:

• User Engagement: They make it easy and enjoyable for users to provide feedback, which can increase engagement.
• Quantifiable Feedback: Ratings provide clear, quantifiable data that can be easily analyzed to gauge user satisfaction.
• Guiding Decisions: For other users, ratings help in making informed decisions about movies, products, services, and more.
• Improving Products: For businesses, ratings are invaluable for understanding user preferences and areas for improvement.

How to Build a Rating Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

Let's get this party started

In this section, we'll build a single rating component with regular React, and then rebuild it with the CC pattern.

Regular React Method

You’re probably wondering why we’re going through the hassle of first building the component without the component pattern.

woah peter griffin

Well, while learning the component pattern, I struggled to fully wrap my head around the logic and ended up with a couple of bugs which could have been prevented with better understanding.

To help with this, I found that building a smaller version of the feature before fully implementing the CCP eventually sped up my development process.

To begin, create a RatingComponent and import it into your App component.

import RatingComponent from "./RatingComponent";
import { Toaster } from "react-hot-toast";

export default function App() {
  return (
    <main className=" bg-[#EAF2F8]  gap-4 min-h-[100dvh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl ">My Ratings Component</h1>
      <RatingComponent />
    </main>
  );
}

Then head over to your RatingComponent and add some basic boilerplate to create a standard rating UI.

import { FiStar } from "react-icons/fi";
export default function RatingComponent() {
  return (
    <div className="flex bg-white items-center justify-between  border border-black rounded-md min-w-[600px]  p-2">
      <div className="p-2 text-base font-semibold">
        Intersteller <span className="text-gray-400 ">(2014)</span>
      </div>
      <div className="flex gap-4 p-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <div key={index} className="flex justify-center">
            <FiStar
              size={25}
              strokeWidth={0}
              fill={"gold"}
              cursor="pointer"
              className="star"
            />
          </div>
        ))}
      </div>
    </div>
  );
}

This makes your UI look like this:

Ratings UI created

At the moment, your UI is static and has no way of changing the rating values. To add interactivity, create a state which holds the initial value of the rating.

const [stars, setStarts] = useState(0);

Then attach the setting handler to update the value of the stars when you click on a star.

<FiStar
    size={25}
    strokeWidth={0}
    fill={"gold"}
    cursor="pointer"
    className="star"
    onClick={() => setStarts(index + 1)}
 />

Note: We’re adding 1 to the set value since arrays are zero-based.

To confirm the value of the star being set on click, add a dynamic fill value to each star.

 <FiStar
   size={25}
   strokeWidth={0}
   fill={index + 1 <= stars ? "gold" : "#D6DBDF"}
   cursor="pointer"
   className="star"
   onClick={() => setStarts(index + 1)}
/>

Which yields the following:

Testing the rating component

To further improve the user feedback, we can convert the meaning of each star and display it to them.

Start by creating an array of labels and colours for the stars.

 const ratingData = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];

Then apply this data to reflect whatever the current ratings are.

export default function RatingComponent() {
  const [stars, setStarts] = useState(0);

  const ratingData = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];
  return (
    <div className="flex bg-white items-center justify-between  border border-black rounded-md min-w-[600px]  p-2">
      <div className="p-2 text-base font-semibold">
        Intersteller <span className="text-gray-400 ">(2014)</span>
      </div>
      <div className="flex gap-4 p-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <div key={index} className="flex justify-center">
            <FiStar
              size={25}
              strokeWidth={0}
              fill={index + 1 <= stars ? "gold" : "#D6DBDF"}
              cursor="pointer"
              className="star"
              onClick={() => setStarts(index + 1)}
            />
          </div>
        ))}
      </div>
      {stars > 0 ? (
        <div
          className="font-semibold min-w-[60px] p-2"
          style={{ color: ratingData[stars - 1]?.color }}>
          {ratingData[stars - 1]?.label}
        </div>
      ) : (
        <p className="font-semibold text-gray-400">No ratings yet...</p>
      )}
    </div>
  );
}

Which gives this:

Testing the rating component with label cues

And ta-da! Your ratings component is fully functional and every user can effectively use it to drop an accurate review.

Compound Component Method

For this method, we’ll take it a step further and create multiple rating components, because if we’re not doing the most, what are we doing? 😌

Start by creating the context for the component.

const RatingContext = createContext();

const MultiRatingsComponent = ({
  children,
  ratingsData,

}) => {
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
      }}>
      <div className="relative">{children}</div>
    </RatingContext.Provider>
  );
};

Since we’re going to be working with multiple sets of data to create numerous rating components, the structure of the data being passed in would differ.

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];
  const [ratings, setRatings] = useState(multiRatings);

  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}>
      </MultiRatingsComponent>
    </main>
  );
}

Next, flesh out the rest of the component required to make our UI look like the single component we created earlier.

const MultiRatingsComponent = ({
  children,
  ratingsData,

}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

const Label = ({ name, year }) => {
  return (
    <div className="flex flex-col justify-center gap-1 text-base font-semibold min-w-[220px]">
      <h3>{name}</h3>
      <span className=" text-[12px]  text-[#AAB7B8]">{year}</span>
    </div>
  );
};

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                />
              ))}
            </div>
          </div>
        ))}
    </div>
  );
};

const RatingIcon = ({ filled }) => {
  return (
    <FiStar
      size={25}
      strokeWidth={0}
      fill={filled ? "gold" : "#AAB7B8"}
      cursor="pointer"
      className="star"
    />
  );
};

Then assign each component to its parent to form the compound component.

MultiRatingsComponent.Label = Label;
MultiRatingsComponent.RatingsContainer = RatingsContainer;
MultiRatingsComponent.RatingIcon = RatingIcon;

To see your component UI, nest the RatingsContainer inside its parent (the App component).

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];

  const [ratings, setRatings] = useState(multiRatings);

  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}>
        <MultiRatingsComponent.RatingsContainer />
      </MultiRatingsComponent>
    </main>
  );
}

With that, your UI should look like this:

Ratings UI with CC pattern

To add our previous functionality where we could set ratings, as well as show their meaning via labels, start by creating an update function in the App component.

  const updateRating = (index, newRating) => {
    setRatings((prevRatings) =>
      prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r))
    );
    console.log(ratings);
  };

This function uses the index of the clicked component to find the particular data, the modifies the rating property based on the star you click on.

To use it, pass it into the MultiRatingsComponent via props, then share it with all its children with its context.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,
}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Then consume that context in RatingsContainer.

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                    onClick={() => updateRating(index, starIndex + 1)}
                />
              ))}
            </div>
          </div>
        ))}
    </div>
  );
};

Just before you check the UI, create a RatingsLabel component to show the meaning of each star right next to each star.

const RatingLabel = ({ ratingValue }) => {
  const ratingLabel = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];
  return (
    <>
      {ratingValue > 0 ? (
        <div
          className="font-semibold min-w-[60px] p-2"
          style={{ color: ratingLabel[ratingValue - 1]?.color }}>
          {ratingLabel[ratingValue - 1]?.label}
        </div>
      ) : (
        <p className="font-semibold text-gray-400">No ratings yet...</p>
      )}
    </>
  );
};

MultiRatingsComponent.RatingLabel = RatingLabel;

And nest it in the RatingsContainer.

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                  onClick={() => updateRating(index, starIndex + 1)}
                />
              ))}
            </div>
            <RatingLabel ratingValue={singleData.rating} />
          </div>
        ))}
    </div>
  );
};

Drumroll, please…

Testing the rating component with CC pattern and label cues

With this implementation, you can easily have multiple rating bars, and managing each state would be a breeze.

How to Upgrade the Rating Component

Alas, there’s one functionality we haven't implemented. No great rating component is complete without a form which allows users to express their opinions past a couple of stars.

To create a comment component, create a form and some state to manage that form.

const Comment = () => {
  const [comment, setComment] = useState("");

  return (
    <div className="w-full mt-2 ">
      <label className="p-2 text-base font-semibold ">Comment</label>
      <form className="relative " onSubmit={(e)=> handleSubmit(e)}>
        <textarea
          name="comment"
          placeholder="Add a review"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          className="w-full p-4 rounded-md resize-none min-h-20"></textarea>
        <button className="font-semibold absolute -bottom-1/2 right-0 border bg-[#5499C7] transition-all hover:bg-[#21618C] rounded-md py-2 px-4 text-white">
          Submit
        </button>
      </form>
    </div>
  );
};

MultiRatingsComponent.Comment = Comment;

Then create a handler function for that form.

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Clear the comment input
    setComment("");
  };

To see the comments after a user submits the form, create a state to hold those comments in the parent context.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,

}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
        userFeedback,
        setUserFeedback,

      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Then consume that context and store the submitted data in the parent context.

 const { userFeedback, setUserFeedback,} =
    useContext(RatingContext);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Create a new feedback object
    const newFeedback = { comment };

    // Update the userFeedback state
    setUserFeedback([...userFeedback, newFeedback]);

    // Clear the comment input
    setComment("");
  };

To view all the comments left by users, create a UserFeedback component like so:

const UserFeedback = () => {
  const { userFeedback } = useContext(RatingContext);
  return (
    <div className="absolute top-0 px-8 py-2 translate-x-full bg-white rounded-md max-w-[300px] -right-5">
      {userFeedback.length > 0 ? (
        <>
          <h3 className="mb-2 text-xl font-semibold">
            Here are what user think
          </h3>
          <ul>
            {userFeedback.map((user, index) => (
              <li key={index} className="px-2 ">
                <h4>
                  {index + 1}.{" "}
                  <span className="font-semibold ">{user.name} </span> --{" "}
                  {user.text}
                </h4>
              </li>
            ))}
          </ul>
        </>
      ) : (
        <p className="font-semibold ext-xl">No user feedback yet...</p>
      )}
    </div>
  );
};
MultiRatingsComponent.UserFeedback = UserFeedback;

This component consumes the state holding the user comments and displays them on the screen.

Just before we test it out, I wanted to replicate a fun quirk I notice from Google whenever someone views your docs. They assign a random name to each user and so will we.

Head over to your App component and create this array:

 const randomNames = [
    "Anonymous Llama",
    "Mysterious Moose",
    "Stealthy Sloth",
    "Phantom Panda",
    "Incognito Iguana",
    "Unknown Unicorn",
    "Enigmatic Elephant",
    "Ghostly Giraffe",
    "Shadowy Shark",
    "Cryptic Cobra",
    "Silent Swan",
    "Nameless Narwhal",
    "Obscure Octopus",
    "Unseen Uakari",
    "Hidden Hedgehog",
    "Masked Macaw",
    "Veiled Vulture",
    "Concealed Chameleon",
    "Covert Cockatoo",
    "Invisible Impala",
  ];

Then pass it into your MultiRatingsComponent via props.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,
  randomNames,
}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
        userFeedback,
        setUserFeedback,
        randomNames,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Finally, modify your form handler function to send a random name with the comment.

const Comment = () => {
  const [comment, setComment] = useState("");
  const { userFeedback, setUserFeedback, randomNames } =
    useContext(RatingContext);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Generate a random name between 1 and the length of the array
    const randomName =
      randomNames[Math.floor(Math.random() * randomNames.length)];

    // Create a new feedback object
    const newFeedback = { name: randomName, comment };

    // Update the userFeedback state
    setUserFeedback([...userFeedback, newFeedback]);

    // Clear the comment input
    setComment("");
  };

Finally, render the Comment and UserFeedback components in their parent inside the App component.

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];

  const randomNames = [...];

  const [ratings, setRatings] = useState(multiRatings);

  const updateRating = (index, newRating) => {
    setRatings((prevRatings) =>
      prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r))
    );
  };
  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}
        updateRating={updateRating}
        randomNames={randomNames}>
        <MultiRatingsComponent.RatingsContainer />
        <MultiRatingsComponent.Comment />
        <MultiRatingsComponent.UserFeedback />
      </MultiRatingsComponent>
    </main>
  );
}

And…Presto!

Testing the rating component with CC pattern, label cues and comments

Your rating component is completed, with the added functionality of comments. ⭐
How would you rate the ride throughout this build? 5 stars? 😉

Additional Information

Here are links to all the resources you may need from this article.

• Starter files
• Regular React Pattern
• Compound Component Pattern

And just for fun...

Since we built a rating component centered around movies, here are 5 movies I consider to be worth 5 stars in no particular order.

• The Grand Budapest Hotel (Comedy/Crime)
• The Magnificent Seven (Western/Action)
• Django Unchained (Western/Action)
• Ford vs Ferrari (Sports/Action)
• Inception (Action/Sci-fi)

Conclusion

In conclusion, crafting a movie-themed rating component using the Compound Component pattern in React is a surefire blockbuster for your projects. This approach enables you to create a sleek, modular, and maintainable codebase.

Mastering this technique ensures your rating system is both functional and ready for the future. Lights, camera, action – may your coding journey dazzle with five-star reviews and standing ovations!

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this article, we'll explore the foundational differences between function and class components, providing a clear understanding of their strengths and ideal use cases.

By understanding these concepts, developers can make informed decisions when constructing React components, ultimately enhancing the structure and functionality of their web applications.

What are React Components?

In React, components are the building blocks of a user interface. They are reusable, self-contained pieces of code that represent a part of the UI. React allows you to break down your UI into smaller components, which makes it easier to manage and maintain your codebase.

You can think of components as custom HTML elements that encapsulate their own logic and UI structure. They can accept inputs called props (short for properties) and return React elements describing what should appear on the screen.

There are two main types of components in React:

Function Components: These are simple JavaScript functions that take props as input and return JSX elements. They are often used for presentational or stateless components.

Class Components: These are ES6 classes that extend from React.Component or React.PureComponent. They have a render() method where you define the structure of your component's UI using JSX. Class components are used for components that need to manage state or have lifecycle methods.

With the introduction of React Hooks, function components gained the ability to manage state and use lifecycle methods, blurring the distinction between function and class components. However, both types of components are still widely used in React applications.

Function vs Class Components: A High-Level Overview

Function Components

Syntax: Function components are defined using the function keyword or arrow function syntax.

import React from 'react';

// Function component using function keyword
function FunctionComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a function component.</p>
    </div>
  );
}

// Function component using arrow function syntax
const FunctionComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a function component.</p>
    </div>
  );
};

export default FunctionComponent;

In the code snippet above, both examples define a function component called FunctionComponent that takes props as input and returns JSX elements. The component simply renders a greeting message along with some text.

The first example uses the function keyword to define the function component, while the second example uses arrow function syntax. Both syntaxes are valid and achieve the same result.

State Management: Traditionally, function components were stateless and couldn't hold their own state. However, with the introduction of React Hooks (like useState), function components can now manage state using Hooks.

import React, { useState } from 'react';

const FunctionComponent = () => {
  // Using useState Hook to manage state
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default FunctionComponent;

In this example, we use the useState Hook to initialize a state variable count with an initial value of 0. The useState Hook returns an array with two elements: the current state value (count) and a function (setCount) to update the state.

When the button is clicked, setCount is called with the new value of count, triggering a re-render with the updated state value displayed. This demonstrates how function components can now hold and manage their own state using React Hooks, making them more powerful and versatile.

Lifecycle Methods: Function components don't have lifecycle methods. However, with React Hooks, you can use the useEffect Hook to replicate lifecycle behavior (like componentDidMount, componentDidUpdate, componentWillUnmount, and so on).

Let's discuss some of the most commonly used lifecycle methods:

componentDidMount: This method is invoked immediately after a component is mounted (that is, inserted into the DOM tree). It is commonly used to perform initial setup, such as fetching data from an API or setting up event listeners.

componentDidUpdate: This method is invoked immediately after updating occurs. It is triggered whenever the component's props or state changes. It is commonly used to perform actions based on the updated state or props, such as making additional API calls.

componentWillUnmount: This method is invoked immediately before a component is unmounted and destroyed. It is commonly used to perform cleanup, such as removing event listeners or cancelling any ongoing tasks.

import React, { useState, useEffect } from 'react';

const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  // useEffect Hook to replicate componentDidMount and componentDidUpdate
  useEffect(() => {
    // This code block runs after every render
    console.log("Component did mount or update");

    // Clean-up function (replicating componentWillUnmount)
    return () => {
      console.log("Component will unmount");
    };
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default FunctionComponent;

In this example, the useEffect Hook is used without a dependency array. This means the effect will run after every render, effectively replicating both componentDidMount and componentDidUpdate behavior. Inside the effect, you can perform any cleanup necessary, such as unsubscribing from subscriptions or removing event listeners, by returning a cleanup function. This cleanup function will be executed when the component unmounts, effectively replicating the componentWillUnmount behavior.

By leveraging the useEffect Hook, function components can now achieve the same lifecycle behavior as class components, further blurring the distinction between the two component types.

Readability: Function components are generally more concise and easier to read, especially for simpler components.

Class Components

Syntax: Class components are ES6 classes that extend from React.Component or React.PureComponent. They have a render() method where you define the structure of your component's UI using JSX.

import React, { Component } from 'react';

// Define a class component that extends React.Component or React.PureComponent
class ClassComponent extends Component {
  // Define constructor if necessary
  constructor(props) {
    super(props);
    // Initialize state if needed
    this.state = {
      count: 0
    };
  }

  // Define lifecycle methods if necessary
  componentDidMount() {
    // Code to run after the component is mounted
  }

  // Define instance methods if necessary
  handleClick = () => {
    // Update state or perform other logic
    this.setState({ count: this.state.count + 1 });
  }

  // Define render() method to return JSX
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default ClassComponent;

In this example:

• We imported React and Component from the 'react' package.
• We defined a class component named ClassComponent that extends Component.
• Inside the class component, we can define a constructor to initialize state or bind event handlers if necessary.
• We can define lifecycle methods such as componentDidMount, componentDidUpdate, and so on, to hook into different stages of the component's lifecycle.
• We defined the render() method, which returns JSX to describe the structure of the component's UI.
• Any instance methods, event handlers, or other logic can be defined within the class.

State Management: Class components can hold and manage local state using the this.state property. They can also update state using this.setState().

Let's illustrate this with a simple example:

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    // Initialize state
    this.state = {
      count: 0
    };
  }

  // Define a method to update state
  incrementCount = () => {
    // Use this.setState() to update state
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default ClassComponent;

In this example:

• We initialized the component's state in the constructor using this.state.
• The incrementCount method was defined within the class to update the count state. Inside this method, we called this.setState() and passed an object containing the new state or a function that returns the new state. React will merge the new state with the existing state.
• In the render() method, we accessed the count state using this.state.count and displayed it within the JSX.
• When the button is clicked, the incrementCount method is called, which updates the count state and triggers a re-render of the component.

This demonstrates how class components in React can manage local state and update it using this.setState().

Lifecycle Methods: Class components have access to various lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount, which allow you to hook into different stages of a component's lifecycle.

Here's an example demonstrating the usage of these lifecycle methods in a class component:

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    // Fetch initial data when the component mounts
    this.fetchData();
  }

  componentDidUpdate(prevProps, prevState) {
    // Check if the data has changed
    if (prevState.data !== this.state.data) {
      // Data has changed, perform additional actions
      console.log('Data has been updated:', this.state.data);
    }
  }

  componentWillUnmount() {
    // Cleanup tasks before the component is unmounted
    console.log('Component will unmount');
    // For example, remove event listeners, cancel ongoing tasks, etc.
  }

  fetchData() {
    // Simulate fetching data from an API
    setTimeout(() => {
      this.setState({ data: 'Some data fetched from API' });
    }, 1000);
  }

  render() {
    return (
      <div>
        <p>Data: {this.state.data}</p>
      </div>
    );
  }
}

export default ClassComponent;

In this example:

• componentDidMount is used to fetch initial data when the component mounts.
• componentDidUpdate is used to log a message whenever the data state changes.
• componentWillUnmount is used to log a message before the component is unmounted.

These lifecycle methods provide hooks into different stages of a component's lifecycle, allowing you to perform setup, update, and cleanup tasks as needed.

Instance Methods: You can define custom methods directly on the class, which can be helpful for organizing your component's logic.

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Custom method to handle incrementing count
  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  }

  // Custom method to handle decrementing count
  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

export default ClassComponent;

In this example:

• We defined two custom instance methods handleIncrement and handleDecrement within the class component. These methods were defined using arrow function syntax to ensure they have access to the correct this context.
• The handleIncrement method updates the count state by incrementing it by 1 when called.
• The handleDecrement method updates the count state by decrementing it by 1 when called.
• These custom methods are then used as event handlers for the buttons in the JSX returned by the render method.

Defining custom instance methods in class components helps in organizing the component's logic, making it more readable and maintainable. Additionally, these methods can be reused across different parts of the component, enhancing code reusability.

It is important to note that, with the introduction of React Hooks, many tasks traditionally handled by class components can now be accomplished using function components.

Hooks such as useState, useEffect, useContext, and others provide a simpler and more concise way to manage state, handle side effects, and share logic across components. This shift towards Hooks empowers developers to write more function and modular code, reducing the reliance on class components.

While class components still have their place, especially in legacy codebases, the versatility and flexibility of Hooks make function components the preferred choice for building modern React applications.

Advantages of Function Component

Simpler Syntax: Function components have a simpler syntax compared to class components. They are essentially just JavaScript functions that take props as input and return React elements. This simplicity makes them easier to read and understand, especially for beginners.

Pure Functions: Function components are essentially pure functions, meaning they only depend on their input (props) to produce output (UI). They don't have internal state or side effects, which makes them easier to reason about and test. This purity also helps improve performance, as React can optimize the rendering process more effectively.

Reusability: Function components promote reusability by encapsulating UI logic within small, composable functions. Since they are just JavaScript functions, they can be easily reused in multiple parts of your application, leading to more modular and maintainable code.

Using Props in Function Components: Function components make extensive use of props to pass data from parent to child components. This props-based approach promotes a clear and predictable data flow within your application, making it easier to understand how data is passed and used throughout your component hierarchy.

Advantages of Class Components

Explicit State Management: Class components provide a clear and explicit way to manage component state using the this.state property. This allows developers to have fine-grained control over state management and updates within the component.

Lifecycle Methods: Class components have access to a range of lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allow developers to hook into different stages of the component's lifecycle, enabling tasks like data fetching, event subscriptions, and cleanup operations.

Instance Methods: Class components allow you to define custom instance methods directly within the class. These methods encapsulate component logic and can be reused throughout the component. This helps in organizing and structuring the component's codebase.

Legacy Support: Class components have been a core part of React since its early days and are still widely used in many codebases. They provide backward compatibility and support for legacy projects that may not have been updated to use function components with Hooks.

Robustness: Class components enforce a more strict structure and separation of concerns, which can lead to more robust and maintainable codebases, especially in larger applications with complex UI logic.

Performance Optimization: Class components offer optimization opportunities through the use of PureComponent or manual implementation of shouldComponentUpdate (a lifecycle method in React). These optimizations can help prevent unnecessary re-renders and improve performance in certain scenarios.

How to Handle Complex State and Side Effects (Before Hooks)

Before the introduction of React Hooks, class components were the primary way of handling complex state and side effects in React applications. Here's how class components facilitated this:

State Management: Class components provided a built-in mechanism for managing component state using the this.state property. Developers could initialize state in the constructor and update it using the this.setState() method. This allowed for the management of complex state structures and the synchronization of state with the UI.

Lifecycle Methods: Class components offered a range of lifecycle methods that allowed developers to hook into different stages of a component's lifecycle. These lifecycle methods, such as componentDidMount, componentDidUpdate, and componentWillUnmount, provided opportunities to perform tasks like data fetching, DOM manipulation, or cleanup operations.

Instance Methods: Class components allowed developers to define custom instance methods directly within the class. These methods encapsulated component logic and allowed for better organization and structure of the component's codebase. Instance methods could handle complex logic, event handling, or interaction with external APIs.

Higher Order Components (HOCs) and Render Props: Before the widespread adoption of Hooks, developers often used Higher Order Components (HOCs) or Render Props to encapsulate and share complex logic between components. HOCs and Render Props patterns facilitated the reuse of logic across multiple components, making it easier to manage complex state and side effects.

Overall, class components provided a structured and class-based approach to handling complex state and side effects in React applications. While Hooks have since emerged as a more lightweight and function alternative, class components continue to be used in many codebases, especially in legacy projects or situations where specific lifecycle methods or patterns are required.

When to Use Each Component Type

Let's discuss when to use function components and class components in React, as well as when error boundaries might necessitate the use of class components:

When to Choose Function Components

Simplicity and Readability: Use function components for simpler UI elements or components that don't require state or lifecycle methods. They have a simpler syntax and are easier to read and understand, making them ideal for presentational components.

Reusability and Composition: Function components promote reusability and composability by allowing you to create small, composable functions that can be easily reused across your application. They are well-suited for building reusable UI components.

Performance: Function components with React Hooks offer a more optimized approach to state management and side effects, potentially leading to better performance compared to class components. They avoid the overhead of class instantiation and provide a more lightweight alternative.

When to Choose Class Components (Error Boundaries)

Lifecycle Methods: Use class components when you need access to lifecycle methods such as componentDidCatch. Class components provide a way to implement error boundaries, which are components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of crashing the whole application.

Handling Complex State and Side Effects (Before Hooks): In legacy codebases or situations where specific lifecycle methods or optimizations are required, class components might still be the preferred choice. They offer a more structured approach to handling complex state, side effects, and lifecycle behavior.

Backward Compatibility: Class components are still widely used in many existing React codebases and libraries. If you're working on a project that relies heavily on class components or if you need to integrate with libraries that haven't migrated to function components with Hooks, you may need to use class components for compatibility reasons.

In summary, function components with Hooks are generally preferred for most use cases due to their simplicity, reusability, and performance benefits. However, class components are still relevant, especially when specific lifecycle methods or error boundaries are necessary. It's essential to weigh the pros and cons of each component type and choose the one that best fits your project's requirements and constraints.

React Hooks: Bridging the Gap

React Hooks are a feature introduced in React 16.8 that allow function components to have stateful logic and access React lifecycle features without needing to write a class component. Hooks are functions that let you use React state and lifecycle features from within function components.

Using Hooks for State Management (useState)

The useState Hook is one of the most fundamental React Hooks. It allows function components to manage state without needing to define a class. Here's an example of how to use useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, useState is used to declare a state variable count and a function setCount to update it. The initial value of count is set to 0. Whenever setCount is called with a new value, React will re-render the component with the updated state.

Other Useful Hooks (useEffect, useContext, etc.)

React provides several other Hooks for managing side effects, context, and more. Some commonly used ones include:

useEffect: This Hook allows you to perform side effects in function components. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. You can use it to fetch data, subscribe to external events, or perform cleanup.

useContext: This Hook allows you to consume context in function components. It allows you to access values from the nearest Context.Provider in the component tree.

useReducer: This Hook is an alternative to useState for managing more complex state logic. It's based on the reducer pattern and is useful for managing state transitions in a predictable way.

useCallback and useMemo: These Hooks are used for performance optimization. useCallback memoizes functions, preventing unnecessary re-renders, while useMemo memoizes values, preventing expensive calculations on every render.

These are just a few examples of the many Hooks available in React. Each Hook serves a specific purpose and allows function components to have the same capabilities as class components, bridging the gap between the two component types and enabling a more function and composable approach to building React applications.

Conclusion

In summary, React Hooks have made a big impact on how we build components in React. Function components have become really popular because they're simpler and more flexible than class components.

With Hooks, we can easily manage state, handle side effects, and control how components behave. This has made React development more straightforward and efficient.

Looking forward, function components with Hooks are likely to become the standard way of building React applications. They're easier to use and offer better performance, making them a favorite among developers.

While class components still have their place, especially in older projects, the trend is moving towards function components with Hooks. They provide a modern and efficient approach to building user interfaces, making React development more enjoyable for everyone involved.

Connect with me on LinkedIn.

Similarly in web applications, marquees inject a lively visual sense by effortlessly grabbing attention and infusing your online projects with dynamism.

Join me as we explore how to build an engaging marquee component in React.
This step-by-step guide targets everyone regardless of skill level, we aim to make your experience with React both enjoyable and useful.

What We'll Cover:

1. Understanding Marquee Components
2. Benefits of Marquees
3. Planning and Designing the Marquee Component
4. How to Implement the Marquee Component
5. How to Enhance the Marquee Component
6. Best Practices and Tips for Marquee Component Development
7. Conclusion

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript and React

Understanding Marquee Components

A marquee represents a continuous section of text or visual content (such as pictures) that scrolls automatically in a horizontal direction.

Although the official HTML Marquee element is obsolete and its use is heavily discouraged, the concept of scrolling, endless elements to add zest to a webpage is still very much in use, and can be found on numerous modern websites.

This effect is realized through CSS animations, offering a more efficient, fluid, and lightweight animation outcome.

A visual example of a marquee component from Webflow is shown below.

Webflow Example

Benefits of Marquees

They have a bunch of usefulness such as:

• Attention-grabbing: Marquees are excellent for drawing attention to specific content on a webpage. Whether it's a special offer, announcement, or featured content, a moving marquee naturally catches the eye.
• Visual Appeal: Adding a touch of motion to your website enhances its visual appeal. Marquees can bring life to a page, making it more dynamic and engaging for users.
• Highlighting Important Information: When you want to emphasize critical information like breaking news, upcoming events, or urgent messages, a marquee is an effective way to ensure that users don't miss out.
• Event Promotion: They are particularly useful for promoting events or time-sensitive activities. Their scrolling nature allows you to display event details, dates, and highlights space-efficiently.
• Ticker-Style Updates: For displaying real-time updates, such as stock prices, news headlines, or social media feeds, marquees provide a ticker-style format that keeps information continuously flowing for users.
• Interactive Banners: They can serve as interactive banners, allowing users to click on specific items as they scroll by. This can be a creative way to lead users to different sections or pages of your website.
• Dynamic Product Showcases: E-commerce websites can benefit from marquees by showcasing new products or featured items in a visually engaging way, encouraging users to explore the offerings.
• Call-to-Action Emphasis: If you have specific call-to-action messages, using them can give prominence and ensure that they don't go unnoticed.
• Breaking Monotony: In long pages or static content, a well-designed marquee can break the monotony and add an element of surprise, making the user experience more interesting.
• Versatility: They are versatile and can be customized to suit various styles and themes, making them a flexible tool for web designers seeking to create unique and memorable user interfaces.

Planning and Designing the Marquee Component

Before you start coding, it's important to plan and design your component and consider factors such as:

• Define Content: Clearly outline the content you want to display in the component. This could include text, images, or a combination of both.
• Scroll Speed: Determine the desired scrolling speed to be used. Consider the optimal pace for readability and visual appeal.
• Visual Design: Sketch or visualize how you want it to look. Decide on colors, fonts, and any additional styling to align with your overall design scheme.
• Behavior at Scroll End: Consider its behavior when it reaches the end of its scroll position. Decide whether it should loop continuously, bounce back and forth, or have a specific end-state.
• User Interaction: If applicable, plan for any user interaction. This could include pausing on hover or allowing users to click on items within the marquee.
• Responsive Design: Ensure that your component is designed to be responsive, adapting seamlessly to different screen sizes and devices.
• Testing Considerations: Anticipate potential challenges or adjustments needed during the testing phase. Plan for how it will behave on various browsers and devices.
• Accessibility: Keep accessibility in mind, ensuring that users with different disabilities can still access and understand the content within it.

How to Implement the Marquee Component

To implement the component, start by creating a React environment with Vite.

npm create vite@latest

After which you navigate to your project directory, install the necessary packages and start up the dev server.

Setting up dev server

Next, create the elements for the JSX mockup for your component.

export default function App() {
  return (
    <div className=" main__container">
      <h1>My Marquee</h1>
      <section className=" ">
        <h2>Default Behaviour</h2>

        <div className="marquee">
          <ul className="marquee__content">
            <div className=" marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>

          <ul aria-hidden="true" className="marquee__content">
            <div className=" marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>
        </div>
      </section>
    </div>
  );
}

This includes a header for the component, the behavior of the component and the data in the component to be animated.

It is important to duplicate the data in the component as it would be used to achieve the duplicate effect. However, we’re hiding the second list initially using the aria-hidden='true' property.

To make it more visually appealing, add these styles.

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 2rem;
  width: 100%;
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.5;
}

* { box-sizing: border-box; }

h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin-block: 2rem 1rem;
  text-align: center;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

section { margin-block: 3rem; }

.main__container {
  max-width: 1000px;
  margin-inline: auto;
  background: rgb(124, 145, 175);
  padding: 3rem;
}

/* Marquee styles */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  border: 2px dashed lightgray;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

.marquee__content img {
  max-width: 2rem;
  width: 100%;
  object-fit: contain;
}

.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  background: #e8daef;
  margin: 2px;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  text-align: center;
}

.marquee__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul { padding-left: 0; }

At the moment, your component should look like this;

UI after applying styles

To animate this component, start by defining custom CSS keyframes.

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

Note: The gap used is the same gap between the marquee items.
Then, assign those keyframes to a class.

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 10s linear infinite;
}

Finally, add that class to your section element.

<section className="enable-animation">

And with that, your component should already be animating.

Animated marquee

How to Enhance the Marquee Component

This component goes beyond the regular infinite animations (as shown above), it often possess some extra functionalities such as:

• Pause on Hover: While using a marquee can be beneficial to show a bunch of content more dynamically, the speed of the animation or the position of the information relevant to the user might cause issues, especially for slow readers.

To fix this, you can implement a pause functionality to halt it when the user hovers over it. Just add the CSS code below.

/* Pause on hover */
.marquee:hover .marquee__content {
  animation-play-state: paused;
}

And with that, it pauses on hover.

Animated marquee that pauses on hover

• Reverse on Double Tap: In the case where a user has passed important information and wants to see it without waiting for the looping animation to bring it back, it’s important to provide a means to achieve that.

By double tapping on the component, the animation plays in the opposite direction, showing the information the user just passed. This feature not only promotes accessibility but also gives your web pages a snappy feel, as it provides a quicker way to get information.

To implement this, start by creating a reverse animation state.

 const [reverseAnimation, setReverseAnimation] = useState(false);

The create a function to flip the state of the animation.

const handleDoubleClick = () => {
    setReverseAnimation((prev) => !prev);
  };

After that, create the CSS class rule to reverse the animation.

/* Reverse animation */
.marquee--reverse .marquee__content {
  animation-direction: reverse !important;
}

Then attach the handler function to the component.

<div className="marquee" onDoubleClick={handleDoubleClick}>
      <ul className="marquee__content">
        <div className=" marquee__item">
          <img src={AndroidLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={BehanceLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={GoogleLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={InstagramLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={PaypalLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={SpotifyLogo} alt="" />
        </div>
      </ul>

      <ul aria-hidden="true" className="marquee__content">
        <div className=" marquee__item">
          <img src={AndroidLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={BehanceLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={GoogleLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={InstagramLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={PaypalLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={SpotifyLogo} alt="" />
        </div>
      </ul>
</div>

Finally, conditionally add the reverse class to the component which reverses the animation on double click.

 <div className={`marquee ${reverseAnimation && "marquee--reverse"}`} 
      onDoubleClick={handleDoubleClick}>

Double-clicking the component now gives;

Animated marquee that reverses on double click

• Pause/Play on Space Bar Click: Another functionality that can be added to improve UX, especially for keyboard users is to pause or play it on press of the spacebar. This mimics the functionality of how videos work on the web and would help improve accessibility for users.

To implement this, start by creating a state to store the current paused state of the animation.

const [isAnimationPaused, setIsAnimationPaused] = useState(false);

Then create the CSS rule for the paused state.

/* Pause animation */
.marquee--paused .marquee__content {
  animation-play-state: paused !important;
}

After that, create an effect that updates the isAnimationPaused state each time the space bar is pressed.

 useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.code === "Space") {

        setIsAnimationPaused((prev) => !prev);
      }
    };
    document.addEventListener("keydown", handleKeyPress);

   // Clean-up function when component unmounts
    return () => {
      document.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

This way, the state toggles between true and false based on user presses.
Finally, dynamically add the paused class to your component.

<div className={`marquee ${reverseAnimation && "marquee--reverse"} ${
       isAnimationPaused && "marquee--paused"}`} onDoubleClick={handleDoubleClick}>

And with that, your component pauses and replays each time you press the space bar.

Animated marquee that can be paused with space bar

Best Practices and Tips for Marquee Component Development

Some of the best practices to consider when building this component includes:

• Lazy Loading Images: In the case where your marquee has a lot of high-quality images which could be large, it is essential to optimize them before building the component.
  Lazy loading defers the browser from downloading the images until they are needed (required to be shown in the viewport), cutting down on overall page load time.

To achieve this, add loading='lazy' property to your images.

<ul className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
  </ul>

  <ul aria-hidden="true" className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
</ul>

• Mindful Animation Speed: When implementing the animation, it's crucial to strike a careful balance in terms of speed. The animation pace should be visually appealing, capturing the user's attention without sacrificing readability or causing discomfort.
  This involves thoughtful consideration of how quickly the content scrolls across the screen.
  By paying attention to animation speed and finding the right balance, you enhance the overall user experience, making it an effective and enjoyable element on your website.
• Think of Users with Motion Sensitivity: Inclusive design means taking into account the needs and preferences of different users, including those with motion sensitivity. Certain users may prefer less movement due to conditions such as vestibular disorders or simply for personal comfort.
  To support these users, you can use the prefers-reduced-motion media query in your component.

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

• Proper Documentation: Provide clear documentation on how users can use your component effectively so that they won't struggle to use it or don’t miss out on the all the features it has. Consider using labels around the component or a pop-up to convey short instructions on its use.

Conclusion

Your guide to React Marquee Components is complete! From planning to execution, you've dived into creating dynamic scrolling elements for your web projects.

Remember, this component is more than motion—it's an interactive story. Whether sharing crucial info, promoting events, or injecting dynamism, your marquee is a versatile addition to your toolkit.

But this journey is just the beginning. Adjust speeds, consider sensitivities, and adopt best practices to refine your marquee. Let creativity flow, and may your scrolling stories leave a lasting impact.

Prioritize user experience, experiment with enhancements, and let your development shine in the web landscape. Happy scrolling!

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

They can be anything from simple buttons to complex forms.

Why Use Reusable Components?

As your website grows, you can easily add new features by combining existing components. This makes your code more scalable and adaptable.

You can use your reusable code in future projects without writing it again from scratch.

🏭 How to Make Reusable React Components

Illustration credit: Shahan

Here are the two most important things to keep in mind when creating reusable React components:

1. 🩼Avoid Side Effects

Don't put logic that interacts with external data (like making API calls) directly inside a reusable component. Instead, pass this logic as props to the component.

For example, if a button does more than just looking pretty, like fetching data from the internet, it might not be reusable.

This is a reusable button component. But it lacks best practices. I will show you why in the example section.

// This is a reusable button component (bad practice!)
const Button = () => {
  return (
    <button> Click Me </button>
  );
}

2. 🗃️ Use Props

Props are arguments you pass to a component to customize its behavior and appearance. This allows you to use the same component for different purposes.

// This is a button component that can change its color
const Button = ({ color }) => {
  return (
    <button style={{ backgroundColor: color }}> Click Here </button>
  );
}

This is still a bad practice because you have a fixed label called "Click Here". If you want to change the text on your button to, let's say: "Sign Up", then you would have to go back to the button component and make that change.

That means every time you want to use a different text, we'd have to go back and edit the code. In other words, it's no longer reusable.

💪 Challenge: So what's the solution?

You already have the answer. But if you don't, I am going to show you in the example section.

🌴 Hint: Think about how you might want to use the component in different situations and design it to be flexible and adaptable.

🍃Examples of Reusable React Components

Here are some common examples of reusable React components, along with some code examples to get you started:

Buttons

Basic buttons with different styles and functionalities.

// Button component
import React from "react";

const Button = ({ color, label, onClick }) => {
  return (
    <button
      className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

As you can see, I did not write "Click Here" in the button component. I want to make my button reusable, and thus it doesn't know anything about custom styles or texts.

So, I passed them as props (i.e., color, label, and onClick) to change them in the future without touching the original button components. Hope that makes it clear.

🪜Solution: You need to pass each functionality as props in the reusable component.

Navbars

Navigation bars that provide consistent navigation across your website.

// Navbar component
import React from "react";

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <div className="navbar-container">
        <div className="navbar-logo">
          <img src={logo} alt="logo" />
        </div>
        <div className="navbar-links">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
          {isLoggedIn ? (
            <a href="/profile">Profile</a>
          ) : (
            <a href="/login">Login</a>
          )}
        </div>
      </div>
    </div>
  );
};

export default Navbar;

// Using the Navbar component
<Navbar isLoggedIn={true} />

As you can see, I passed <Navbar isLoggedIn={true} />

This line utilizes the Navbar component and passes the isLoggedIn prop with a value of true, indicating the user is logged in. This will display the "Profile" link and hide the "Login" link.

Similar to the button component, the Navbar component is reusable and accepts props to customize its behavior. Perfect!

Why API Calls in a Button Component is a Bad Practice

Now, you understand everything about reusable components in React.

Let's dig deeper by solving a complex problem.

Consider the scenario where you have a button that does an API call. The code for the button component can be the following:

import React from "react"; 
import doAPICall from "../api"

const SaveButton  = () => {
  return (
    <button
      onClick={() => {
        doAPICall();
      }}
    >
      Save
    </button>
  );
}

export default SaveButton

It is quite clear that you can’t reuse the above button in multiple places as this button component contains a side-effect (doAPICall()) inside it.

You can make this component reusable. First, you'll have to extract out the side-effect and pass that as a prop to the button component like this:

const App = () =>  {
  function doAPICall() {
    // Does an API call to save the current state of the app.
  }

  return (
    <div>
      <SaveButton onClick={doAPICall}/>
    </div>
  )
}

The button component should look like this:

const SaveButton  = ({
  onClick
}) => {
  return (
    <button
      onClick={onClick}
    >
      Save
    </button>
  );
}

As you can see, the above button can now be reused anywhere you want to save data with the click of a button. The button can now be used like this in multiple places:

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser}/>
      <SaveButton onClick={saveProject}/>
    </div>
  )
}

You can also make the button component more reusable by using a prop to control the label:

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser} label="Save user"  />
      <SaveButton onClick={saveProject} label="Save project" />
    </div>
  )
}

The button component should look like this:

const SaveButton  = ({
  onClick,
  label
}) => {
  return (
    <button
      onClick={onClick}
    >
      {label}
    </button>
  );
}

👏Conclusion

Congratulations! You've successfully learned how to build reusable React components.

Remember, reusable components are the building blocks of robust React development. By practicing reusable components, you can build cleaner, more efficient, and more maintainable React applications.

The more you practice, the better you'll become at identifying opportunities to use them in your projects!

Read More: The Future of Frontend Development

Thank you for taking the time to read this article. Until next time.. Keep learning and you can follow me on 𝕏 for latest updates on programming and productivity.

As always, we'll work on a real world example and solve problem I stumbled across while building my 2048 Game in React. All the code snippets are inspired by this project. If you want to review the code before reading this article, you can find it on GitHub.

The 2048 Game

Let me explain the rules of the 2048 game first. The player must combine tiles that have the same numbers until they reach the number 2048. The tiles can contain only numbers that represent a power of two starting from 2 – this means 2, 4, 8, 16, 32, and so on – until they reach the number 2048. The board has dimensions of 4 x 4 tiles, so that it can fit up to 16 tiles.

Here's an example:

2048 Game Preview

In this article, I will only teach you how to render arrays in React and show you some best practices when comes to rendering lists in React components.

Unfortunately, we cannot create the entire game because it would make this article confusing. But if you want to do it from scratch, you should consider enrolling to my course on Udemy where I will walk you through creating the 2048 Game with animations in React 18.

Prerequisites**

Before we start, make sure you know some basics of React. Nothing sophisticated – just be sure you've worked with React before, otherwise you might feel a bit lost.

If you don't yet know React, freeCodeCamp has a 5-hour React course for beginners so feel free to watch it before reading this article. You can also enroll in my React 18 course.

Now let's get started.

How to Render Array Elements

As I mentioned at the beginning, the game board has dimensions of 4 x 4 tiles. That means the best data structure to store tiles on the board will be a multidimensional array, like the one you see below:

const board = [
    [0, 0, 0, 0],
    [2, 0, 0, 0],
    [2, 0, 0, 0],
    [0, 0, 0, 0],
]

Unfortunately, this data structure will be expensive, since it requires nested loops iterating across each other. That's why I decided to flatten this array into a one-dimensional one:

const tilesOnBoard = [0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0]

As you can see, there are a lot of empty elements in this array, and it gives room for further improvements. We can reduce the amount of operations by replacing tile values with objects containing tile information.

For example, you can introduce a new type to store the meta data of every tile like this:

type TileModel = {
  position: [number, number];
  value: number;
};

As you can see, this data type makes tiles smart. Every tile will know its position and value. I decided to store the position as an array of two elements. These elements will represent x and y coordinates. Rather than pixels, I will use array indices on the board array I mentioned in the first step.

Now let's improve the tilesOnBoard array and make it store only existing tiles without empty values:

const tilesOnBoard = [
    { position: [1, 0], value: 2 },
    { position: [2, 0], value: 2 },
]

Thanks to this simplification, I can render tiles by using the simple map functor that will iterate through all array elements and create Tile components out of them.

const renderTiles = () => {
  return tilesOnBoard.map((tile: TileModel, index: number) => (
    <Tile key={index} {...tile} />
  ));
};

Let's focus on the second argument of the map functor for a moment. As you can see, it uses the item index of the tilesOnBoard array. I am using it as a key property to initialize React components – in this case Tile components.

If you've never used key props, React needs keys to identify which elements have changed, are added, or are removed. Keys should be assigned to every item inside the array of components.

That's why I assigned array indices to all tiles. Unfortunately, array indices aren't the best unique identifiers, as you can see below:

Strange behavior when array indices are used as key props

It might be hard to spot what's happening here, so let me briefly explain. Basically, React is reusing existing HTML elements to render new tiles. This isn't an intended behavior – instead, I should have removed merged tiles and created a new tile after every move.

But why is this happening? After the tiles are getting merged, a new tile is created, and that means the array still has two elements with the same array indices.

React uses a mechanism called the Virtual DOM to detect changes and modify elements on the DOM tree. Unfortunately, this mechanism is optimized for speed so that it doesn't analyze the entire component but only the key prop. This means React cannot differentiate the new tile creation from a style change on an existing div element. That's why we are experiencing this issue.

To confirm that my reasoning is right, let's take a brief look at the Element tab in Chrome DevTools:

DOM Element reusability due to array indices used as key props

As you can see, two existing div elements only changed their style attributes but nothing was added or removed. This isn't an intended behavior, but it tells us that array indices are poor unique identifiers for React components.

If you aren't familiar with Chrome Developer Tools, you should read my article on implementing mobile touch events in React 18 where I do a deep dive on how to use it.

Unique Identifiers As Key Props

To fixing array rendering problems in React, we'll need to use some unique identifiers such as incremental ids, uuids, or others. To focus on the essentials, I decided to use a library called uid, which you can install by running the following in your terminal:

npm install --save uid

Now I need to modify tiles to support those identifiers. First, I added a new property id in the tile meta data type:

type TileModel = {
  id: string;
  position: [number, number];
  value: number;
};

And I assigned an id to every element in the tilesOnBoard array (here's where the uid library comes into play):

const tilesOnBoard = [
    { id: uid(), position: [1, 0], value: 2 },
    { id: uid(), position: [2, 0], value: 2 },
]

The last thing I did was to change the renderTiles helper:

const renderTiles = () => {
  return tilesOnBoard.map((tile: TileModel) => (
    <Tile key={tile.id} {...tile} />
  ));
};

As you can see, I removed an index argument from the map functor, and replaced the key prop with an unique id which I added to the tile meta data.

Now the 2048 game works like a charm:

Conclusion

In this article, you learned that indices aren't the best option to render arrays of components in React and that they might lead to strange behaviors. If there is only one thing you should remember from this article it's that you should always use unique identifies as the key prop of React components.

Wanna learn more tricks like this one? You should join to my React 18 course on Udemy. I will teach you how to create 2048 game in React from scratch and show you solutions to the most common mistakes React developers make.

This article takes a deep dive into constructing a React tab component that excels in performance and user experience. We'll cover how to create, optimize, and animate tabs effectively.

You'll also learn how to leverage the Profiler in Dev Tools to pinpoint and reduce unnecessary re-renders, and how to apply Framer Motion to elevate your tabs beyond the functional to make them delightful.

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript
• Fundamentals of React and Framer Motion.

What We'll Cover:

1. How to set up an environment
2. The Heart of the Tab component
3. How to build the Tab component
   – How to build the UI
   – How to implement the Tab functionality
   – How to optimize the Tab component
   – How to animate the component
4. Other methods you can use to fine-tune for high performance
5. Conclusion

How to Set Up an Environment

To build a high-performance React tab component, the first thing to do is set up a clean development environment.

Before you dive into creating React components, make sure to install Node.js on your computer. This sets the stage for an efficient development process.

How to Create a React Project

After installing Node.js, use Vite (a modern build tool for React projects) to create a new React project. In your local terminal, run the command:

npm create vite@latest

Select React as your framework and your preferred variant.

React app setup

Then to install the necessary packages, run npm install and open it in your IDE.

At the moment, your app should look like this:

React app setup complete

Finally, start up the dev server by running npm run dev and go to the given port.

The Heart of the Tab Component

Imagine the tab component like a smart switchboard, smoothly guiding you through different content sections—similar to flipping TV channels or tuning in to radio stations.

Two main parts make this happen:

• Tab Buttons: These act like selector switches, holding individual tabs ready for your clicks. Clicking on these tabs is like choosing different views or content channels.
• Tab Panels: Think of these as the content broadcasts linked to each tab. Only the content connected to the active tab is in the spotlight, just like tuning into a specific channel for clear viewing.

How to Build the Tab Component

This section includes 4 parts:

1. Building the UI
2. Implementing the tab functionality
3. Optimizing the tab component
4. How to Animate the Component

How to Build the UI

This section includes all of the mockups and styling needed to render your component on the page. Here’s a step-by-step walkthrough of the process:

First, create an array containing all the data used by your app in your App component.

import "./App.css";

function App() {
  const petData = [
    {
      animal: "Cheetah",
      fact: "Cheetahs are the fastest land animals, capable of reaching speeds up to 75 mph.",
      image: "../src/assets/6.svg",
    },
    {
      animal: "Koala",
      fact: "Koalas sleep around 20 hours a day and are known for their eucalyptus diet.",
      image: "../src/assets/3.svg",
    },
    {
      animal: "Elephant",
      fact: "Elephants have the largest brains among land animals and demonstrate remarkable intelligence.",
      image: "../src/assets/1.svg",
    },
    {
      animal: "Zebra",
      fact: "Zebras have distinctive black and white stripes that act as a natural defense against predators.",
      image: "../src/assets/7.svg",
    },
    {
      animal: "Horse",
      fact: "Horses have excellent memory and are capable of recognizing human emotions.",
      image: "../src/assets/5.svg",
    },
  ];

  return (
    <div className="main__container">
      <h1>Choose your pet</h1>
    </div>
  );
}

export default App;

Then create two components TabButtons and TabContent which will control the Tab and display the Tab’s content, respectively. Then import them into the App component.

Next, pass the data array from your app component into both components using props.

// Rest of app component
return (
    <div className="main__container">
      <h1>Choose your pet</h1>
      <TabButtons

        petData={petData}
      />
      <TabContent petData={petData} />
    </div>
  );

Then loop over the data in both components to create the buttons that'll be used to control the component and the data shown with respect to each tab.

For the TabButtons component:

export default function TabButtons({ petData }) {
  return (
    <div className="tab__header">
      {petData.map((item, index) => (
               <li
          className={`tab__button`}
          key={item.animal}
                 >
          {item.animal}
        </li>
      ))}
    </div>
  );
}

The TabContent component:

export default function TabContent({ petData}) {
  return (
    <div className="tab__container ">
      <div className="tab__content">
        {petData.map((pet) => (
          <div key={pet}>
            <img src={pet.image} alt="" />
            <p>{pet.fact}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

For styling, use this CSS which contains all the styles needed for the entire app in your App.css file:

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

:root {
  --text-color: #9eb25d;
  --bg-color: rgba(238, 252, 206, 0.4);
}

body {
  font-family: "Space Grotesk", sans-serif;
  height: 100dvh;
  display: grid;
  place-items: center;
}

.main__container {
  border-radius: 2rem;
  display: flex;
  margin-top: 4rem;

  flex-direction: column;
  gap: 4rem;

  align-items: center;
  font-family: "Space Grotesk", sans-serif;
  width: max-content;
  padding: 8rem;
  color: var(--text-color);
  background: var(--bg-color);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

h1 {
  font-size: 4rem;
}
.tab__header {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.tab__header li {
  flex: 1;
  cursor: pointer;
  padding: 2rem;
  border: 2px solid var(--text-color);
  text-align: center;
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
  font-size: 2rem;
}

.tab__container {
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  width: 80rem;
  border-radius: 2rem;
  padding: 4rem;
  box-shadow: inset -3px -3px 3px rgba(0, 0, 0, 0.2),
    inset 3px 3px 3px rgba(0, 0, 0, 0.2);
  gap: 2rem;
}

.tab__content {
  padding: 2rem;
  min-height: 25rem;
  border: 2px solid var(--text-color);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  background: #fff;
  border-radius: 2rem;
}

.tab__content img {
  max-width: 31rem;
  max-height: 20rem;
  width: 100%;
}

.tab__content p {
  text-align: center;
}

.active {
  background: var(--text-color);

  color: #fff;
  font-weight: 600;
}

@media screen and (max-width: 1000px) {
  .main__container {
    gap: 2rem;
    padding: 1rem;
    width: 95%;
    margin: 5rem auto;
  }

  h1 {
    font-size: 3rem;
  }

  .tab__header {
    flex-wrap: wrap;
  }

  .tab__content {
    gap: 2rem;
    min-height: 35rem;
  }
  .tab__header li {
    font-size: 1.6rem;
  }

  .tab__container {
    width: 100%;
    padding: 2rem;
  }

  .tab__content img {
    max-width: 150px;
  }

  .tab__content p {
    font-size: 1.6rem;
  }
}

Or you can alternatively go here for the stylings: CSS File

At the moment, your page should look like this:

Initial page after looping over data array

How to Implement the Tab Functionality

To create a tab component that functions smoothly, you need to manage which tab is currently active. Think of it as showing only one content section at a time.

To achieve this, start by establishing a 'state' in the App component. This state will keep track of the currently active tab.

  const [activeTab, setActiveTab] = useState(0);

The active state is initialized with the index of the tab you want to start with.

Then it's used to show only the the data associated with that index.

export default function TabContent({ petData, activeTab }) {
  return (
    <div className="tab__container ">
      <div className="tab__content">
        {/ Using the active index to select a particular data /}
        <img src={petData[activeTab].image} alt="" />
        <p> {petData[activeTab].fact}</p>
      </div>
    </div>
  );
}

Which shows just the first item from the data array:

Showing one data item from the array

You can achieve the tab switching functionality by updating the state of the active tab using its setter function.

Start by passing the setter function and the active tab state into the tab buttons via props.

function App() {
  const [activeTab, setActiveTab] = useState(0);
  const petData = [ //...data ];

  return (
    <div className="main__container">
      <h1>Choose your pet</h1>
      <TabButtons
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        petData={petData}
      />
      <TabContent activeTab={activeTab} petData={petData} />
    </div>
  );
}
export default App;

Then use the setter function to set the value of the active state into the corresponding data via the index.

export default function TabButtons({ petData, activeTab, setActiveTab }) {
  return (
    <div className="tab__header">
      {petData.map((item, index) => (
               <li
          className={`tab__button`}
          key={item.animal}
          onClick={() => setActiveTab(index)}>
          {item.animal}
        </li>
      ))}
    </div>
  );
}

With that, your tab component works and can display dynamic data based on the button you click on. Congrats!

Testing out the tab functionality

To improve the UX, add an active class to the currently clicked tab using its index. This applies the active class to the tab whose index value is the same as the value stored in the active state.

export default function TabButtons({ petData, activeTab, setActiveTab }) {
  return (
    <div className="tab__header">
      {petData.map((item, index) => (
        <li
          // Adding an active class where the current index matches the currently active tab
          className={`${index === activeTab && "active"} tab__button`}
          key={item.animal}
          onClick={() => setActiveTab(index)}>
          {item.animal}
        </li>
      ))}
    </div>
  );
}

Which yields the following result:

Tab functionality after adding active class to tab

How to Optimize the Tab Component

While your tab component seems ready to go, there are still modifications you can make to better enhance it in terms of performance. For this, you can use React Dev Tools.

This is a browser extension which provides a ton of useful tools React developers can use to inspect and debug their applications. Head over to your browser web store and download the extension.

Downloading React dev tools

After you install it, inspecting any React website from your browser dev tools shows two new tabs called ⚛️Components and ⚛️Profiler.

In this application, we’ll be using the Profiler, which is used to measure how many times the React application is rendered, how many components are rendered, and how much time the components take to be rendered.

For your application, inspect your React app and open up the profiler from the top right of your screen.

Finding the profiler in dev tools

In your profiler, click on the blue record button and start a recording of your React app to track changes and renders.

Using the profiler to test changes

The result from my end is a total of 0.6ms for the total render time with all 3 components re-rendering (App = 0.2ms, TabButtons = 0.3ms and TabContent = 0.1ms).

The entire render time is quite acceptable, but there is room for improvement.

With the profiler indicating that the app component triggered the re-render, let’s optimize our application to reduce excessive re-renders with the following steps.

Start by creating a Tab component and lifting the data array and the state into that Tab component. You do this because this is the component that consumes the data and state and not the App component.

import { useState } from "react";

const petData = [
  {
    animal: "Cheetah",
    fact: "Cheetahs are the fastest land animals, capable of reaching speeds up to 75 mph.",
    image: "../src/assets/6.svg",
  },
  {
    animal: "Koala",
    fact: "Koalas sleep around 20 hours a day and are known for their eucalyptus diet.",
    image: "../src/assets/3.svg",
  },
  {
    animal: "Elephant",
    fact: "Elephants have the largest brains among land animals and demonstrate remarkable intelligence.",
    image: "../src/assets/1.svg",
  },
  {
    animal: "Zebra",
    fact: "Zebras have distinctive black and white stripes that act as a natural defense against predators.",
    image: "../src/assets/7.svg",
  },
  {
    animal: "Horse",
    fact: "Horses have excellent memory and are capable of recognizing human emotions.",
    image: "../src/assets/5.svg",
  },
];

export default function Tab() {
  const [activeTab, setActiveTab] = useState(0);
  return <></>;
}

Then locally create the JSX for this project. This removes the need for creating excessive components just for JSX.

export default function Tab() {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <>
      <div className="tab__header">
        {petData.map((item, index) => (
          <li
            className={`${index === activeTab && "active"} tab__button`}
            key={item.animal}
            onClick={() => setActiveTab(index)}>
            {item.animal}
          </li>
        ))}
      </div>
      <div className="tab__container ">
        <div className="tab__content">
          <img src={petData[activeTab].image} alt="" />
          <p> {petData[activeTab].fact}</p>
        </div>
      </div>
    </>
  );
}

And now re-running the profiler with your new app structure yields the following:

Profiler after optimizing app

As you can see, the new rendering time is 0.3ms, improving the speed by 50%, with the app component not re-rendering and the extra JSX elements removed.

It's important to note that this example is relative to the size of the tab component. In larger ones, it’s fairly common to see the tab component broken down into smaller components but in the same file.

How to Animate the Component

For animation, we’ll be using Framer Motion, an open-source animation library designed for React. It delivers a straightforward and expressive API for generating intricate animations.

For a more in-depth explanation of how the library works, check out this guide on using framer motion to animate routes in React.

To use the library, start by installing it in your project using the prompt:

npm i framer-motion

Then import the required properties from the library.

import { AnimatePresence, motion } from "framer-motion";

Next, make all the elements you want to animate motion elements.

export default function Tab() {
  return (
    <>
        <motion.div className="tab__container">
          <div className="tab__header">
            {petData.map((item, index) => (
              <li
                className={`${index === activeTab && "active"} tab__button`}
                key={item.animal}
                onClick={() => setActiveTab(index)}>
                {item.animal}
              </li>
            ))}
          </div>
          <div className="tab__content">
            <motion.img
              src={petData[activeTab].image}
              alt=""
            />
            <motion.p>
              {petData[activeTab].fact}
            </motion.p>
          </div>
        </motion.div>

    </>
  );
}

Then create animation objects for the elements you want to animate. For your tab, this create a scale in animation for the image and a fade and slide animation for the text.

const contentVariants = {
  initial: { y: "100%", opacity: 0 },
  animate: { y: "0", opacity: 1 },
  exit: { y: "100%", opacity: 0 },
};

const imgVariants = {
  initial: { scale: 0.1 },
  animate: { scale: 1 },
  exit: { scale: 0.1 },
};

After that, pass them into the JSX, specifying their initial, animated, and exit states.

export default function Tab() {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <>

        <motion.div className="tab__container" key={activeTab}>
          <div className="tab__header">
            {petData.map((item, index) => (
              <li
                className={`${index === activeTab && "active"} tab__button`}
                key={item.animal}
                onClick={() => setActiveTab(index)}>
                {item.animal}
              </li>
            ))}
          </div>
          <div className="tab__content">
            <motion.img
              src={petData[activeTab].image}
              alt=""
              initial="initial"
              animate="animate"
              exit="exit"
              variants={imgVariants}
              transition={{ duration: 0.5 }}
            />
            <motion.p
              variants={contentVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}>
              {petData[activeTab].fact}
            </motion.p>
          </div>
        </motion.div>

    </>
  );
}

Finally, wrap your component with the AnimatePresence component to detect when you switch between tabs to fire exit animations:

export default function Tab() {

  return (
    <>
      <AnimatePresence mode="wait">
        <motion.div className="tab__container" key={activeTab}>
          <div className="tab__header">
            {petData.map((item, index) => (
              <li
                className={`${index === activeTab && "active"} tab__button`}
                key={item.animal}
                onClick={() => setActiveTab(index)}>
                {item.animal}
              </li>
            ))}
          </div>
          <div className="tab__content">
            <motion.img
              src={petData[activeTab].image}
              alt=""
              initial="initial"
              animate="animate"
              exit="exit"
              variants={imgVariants}
              transition={{ duration: 0.5 }}
            />
            <motion.p
              variants={contentVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}>
              {petData[activeTab].fact}
            </motion.p>
          </div>
        </motion.div>
      </AnimatePresence>
    </>
  );
}

Note: Framer motion uses the key prop to detect changes between elements. The mode prop set to wait in AnimatePresense helps framer motion fire exit animations before entry animations.

And with that, your Tab component is fully functional and animated. Bravo! 🎈

tabbed component fully functional and animated

For reference, here’s the full code:

import { AnimatePresence, motion } from "framer-motion";

import { useState } from "react";

const petData = [
  {
    animal: "Cheetah",
    fact: "Cheetahs are the fastest land animals, capable of reaching speeds up to 75 mph.",
    image: "../src/assets/6.svg",
  },
  {
    animal: "Koala",
    fact: "Koalas sleep around 20 hours a day and are known for their eucalyptus diet.",
    image: "../src/assets/3.svg",
  },
  {
    animal: "Elephant",
    fact: "Elephants have the largest brains among land animals and demonstrate remarkable intelligence.",
    image: "../src/assets/1.svg",
  },
  {
    animal: "Zebra",
    fact: "Zebras have distinctive black and white stripes that act as a natural defense against predators.",
    image: "../src/assets/7.svg",
  },
  {
    animal: "Horse",
    fact: "Horses have excellent memory and are capable of recognizing human emotions.",
    image: "../src/assets/5.svg",
  },
];

const contentVariants = {
  initial: { y: "100%", opacity: 0 },
  animate: { y: "0", opacity: 1 },
  exit: { y: "100%", opacity: 0 },
};

const imgVariants = {
  initial: { scale: 0.1 },
  animate: { scale: 1 },
  exit: { scale: 0.1 },
};

export default function Tab() {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <>
      <AnimatePresence mode="wait">
        <motion.div className="tab__container" key={activeTab}>
          <div className="tab__header">
            {petData.map((item, index) => (
              <li
                className={`${index === activeTab && "active"} tab__button`}
                key={item.animal}
                onClick={() => setActiveTab(index)}>
                {item.animal}
              </li>
            ))}
          </div>
          <div className="tab__content">
            <motion.img
              src={petData[activeTab].image}
              alt=""
              initial="initial"
              animate="animate"
              exit="exit"
              variants={imgVariants}
              transition={{ duration: 0.5 }}
            />
            <motion.p
              variants={contentVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}>
              {petData[activeTab].fact}
            </motion.p>
          </div>
        </motion.div>
      </AnimatePresence>
    </>
  );
}

Other Methods You Can Use to Fine-Tune for High Performance

While your React tab component is functional and animated, there are opportunities for further optimization to ensure high performance, especially in scenarios involving larger datasets or asynchronous data fetching. Let's explore some strategies to fine-tune your tab component.

Data Considerations

• Size of the Tab Component: Check the size of your tab component, especially if dealing with a large amount of data. Consider lazy-loading or pagination to improve initial rendering times.
• Asynchronous Data Loading: If your data is asynchronous, implement loading states to enhance user experience. Optimize the rendering logic to handle data loading efficiently.

React Profiler

• Identifying and Reducing Unnecessary Re-renders: Outside leveraging React DevTools Profiler to analyze component rendering behaviour, use React hooks like React.memo and React.callback to optimize and cache your data.

Component Structure

• Granular Component Structure: For larger tab components, consider breaking down the structure into smaller, granular components. This allows for better maintainability and can improve rendering performance.

Code Splitting

• Dynamic Imports for Code Splitting: Implement dynamic imports for code splitting, especially if your React application becomes more complex. This ensures that only the necessary code loads when a specific tab is selected.

Responsive Design

• Optimizing for Different Viewports: Ensure your tab component is responsive to different screen sizes. Consider media queries and adaptive design to provide an optimal experience across various devices.

Browser Caching

• Optimizing Assets with Browser Caching: Leverage browser caching for static assets, such as images, to reduce load times. Consider optimizing and compressing images to cut their impact on performance.

Testing and Profiling

• Continuous Testing and Profiling: Test your tab component under various conditions and profiles. Use tools like Lighthouse or Web Vitals to track performance metrics and address any issues that may arise.

By implementing these strategies, you can elevate your React tab component from merely functional to highly performant, ensuring a smooth user experience across different scenarios and datasets.

Here’s a link to the repository: GitHub

And the live version: Live Demo

Conclusion

You've successfully built React tabs that are more than just functional – they're optimized for a smooth user experience. From setting up the environment to adding animations, you've covered the essentials.

As you refine and optimize your tabs, remember they play a crucial role in user navigation. Keep coding and may your React tabs deliver a dependable and user-friendly experience.

Happy coding!🌟

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In order to write scalable, reusable, and maintainable applications with React, you'll need to go beyond the surface of using React components, useEffect, useContext, useState, and the like. It involves learning in detail how React works in more depth.

And if you don't properly understand these key React concepts, you can run into various issues, like prop drilling.

In this tutorial, you'll learn what prop drilling is. I'll also teach you how to intuitively avoid it without relying on React context. In the end, you'll understand how to identify prop drilling without thinking and fix it with precision.

If you prefer a visual guide, here's a video version of this tutorial on my YouTube channel here (approximately 15 minutes).

What is Prop Drilling?

Prop drilling occurs when a parent component generates its state and passes it down as props to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it.

Below is an example of prop drilling in React:

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> <Header profile={profile} /> 
    </div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Component</h2> 
      <p>{profile.name}</p> 
    </main> 
  ); 
} 

export default App;

If you check out the example above, you'll notice that profile is passed from the App component through the Header to the Content component, which eventually makes use of the props. This is commonly referred to as prop drilling as the Header component doesn't consume the prop but only passes it down to the Content component that finally consumes it.

Now that you understand what prop drilling is, the next challenge is to figure out how to avoid it because it's not always an intuitive process.

You'll need to start exploring methods to address it. While you can use component composition and React context to resolve it, the challenge lies in not always recognizing the issue until later.

To truly master the art of handling prop drilling intuitively, you must learn how to identify elongated props and contexts.

What is an Elongated Prop?

_Photo by [Unsplash](https://unsplash.com/@emilymorter?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Emily Morter / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

An elongated prop is a prop that is not consumed but it is only passed down to another component. When a component receives a prop from its parent and doesn't consume the prop, it passes the prop down to another component. This prop is called elongated prop because it has been extended.

Whenever you see a prop being passed down by components that neither creates nor consumes the prop, you have an an elongated prop (as well as prop drilling) in your code. The code snippet below is an example:

function Profile({ user }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content user={user} /> 
    </header> 
  ); 
}

user, in this example, is an elongated prop as it is neither created nor consumed by the Profile component. Instead, it is only passed down to the Content component. And that means we have extended user through a component that doesn't need it so that it can get to the one that does.

Now, let's revisit the example we used to illustrate prop drilling. Wait, are you thinking what I'm thinking? The prop that's being passed down in the prop drilling example is indeed an elongated prop, right? Yes, you've got it.

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> 
      <Header profile={profile} /> 
    </div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Component</h2> 
      <p>{profile.name}</p> 
    </main> 
  ); 
} 

export default App;

In the code above, you can observe that the prop passed to Header is created in the App component. Then, Header passes it down to its child component named Content. As a result, the profile being passed down can be considered elongated because it is passed through a component (Header) that neither creates nor consumes it down to the one that does.

The Header component passing down the prop it doesn't create or need is unnecessarily stretching the context of the prop.

Now, the question is, how do elongated props help to intuitively avoid prop drilling in React? They make it easy for you to spot props being used where they're are neither created nor consumed.

Rather than focusing on how to solve prop drilling, elongated props enable you to avoid it. This is because it's intuitive to recognize when a component neither creates nor consumes props, and that helps you to know the component is irrelevant.

But before you learn how to quickly avoid prop drilling with your understanding of elongated props, it is important that you know the main causes of prop drilling. Then you'll truly know how to avoid it without thinking about it.

What Causes Prop Drilling?

_Photo by [Unsplash](https://unsplash.com/@etiennegirardet?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Etienne Girardet / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Prop drilling doesn't occur out of thin air. It's a consequence of inadequate component organization, and it is not a React problem. It is a thinking or design problem.

You won't encounter an instance of prop drilling without observing one of the following layout mistakes:

First of all, grouping static elements and dependent components together to achieve an appealing UI design is the major cause of prop drilling. You can't avoid prop drilling when your UI groups static elements and dependent components together in a parent. The parent component clearly won't use the prop, as everything within it is a static element – except the component that needs a prop.

Here's an example:

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
}

In this case, static elements <header> and <h1> are grouped with a dependent component Content – and that's why we have prop drilling therein.

Provided that the Content component is independent or takes no props, it won't need profile and there won't be prop drilling in the first place. This is why forcing a component that should be independent to take props from its parent is a recipe for prop drilling in React.

Second of all, when a component accepts props that it doesn't use but merely passes it down to its children, this is a sign that you have prop drilling in your component:

function App () { 
  const [profile, setProfile] = useState({name: "Ayobami"})
  return ( 
    <>
      <Parent profile={profile} /> 
    </>
 ); 
}; 

function Parent({ profile }) { 
  return ( 
    <div>
      <Hero profile={profile} /> 
      <Features profile={profile} /> 
    </div>
 ); 
};

In this case there is prop drilling because the Parent component takes profile and it doesn't use it though it passes it down to its children.

Third, when a component that represents an independent section of a page is forced to take props from its parent, prop drilling is inevitable. It should ideally be self-contained with its state and operations.

The exception would be if it's intentionally tied to its parent for specific reasons. In such cases, prop drilling becomes a necessary trade-off.

If you revisit the example of prop drilling cited in this article, you will realize it has a prop drilling issue because the Content component which could have been an independent component by having a state is forced to receive props from its parent.

And finally, the presence of elongated props is a sure sign of prop drilling. Since an elongated prop is a fundamental element that's consistently present in every case of prop drilling, grasping this concept allows you to instinctively avoid prop drilling.

When you spot an elongated prop, you can be certain that one of the other three mistakes is also in play. In short, an elongated prop is a prop that is not consumed and is also passed down to another component.

So grouping static elements with dependent components, forcing components to take props, elongated props, and receiving a prop without consuming it are the signs to recognize prop drilling in React.

How to Fix Prop Drilling with Component Composition

Component composition is a good approach to fix prop drilling. If you ever find yourself in a situation where a component passes down a prop it neither creates nor consumes, you can use component composition to fix it.

But to use component composition, you need to understand a component context.

What is a component context? ‌

The context of a component encompasses everything that is visible within it, including state, props, and children. The following code further illustrates this concept:

function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header profile={profile} /> 
    </div> 
  ); 
} 

export default App;

In this scenario, the context of App refers to everything we can see within the App component – including the profile prop, the Header, and other App content. Therefore, any data created in the App component should ideally be utilized within the App component itself, either as its own data or as props to its children.

Prop drilling always emerges when the children receiving the props doesn't consume it but only passes it down to its children.

To avoid prop drilling in this case, any grandchildren components that require access to the same props, especially when their parent don't consume the data, should be passed as children ensuring that the data remains within the App context.

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header> 
        <Content profile={profile} /> 
      </Header> 
    </div> 
  ); 
}

Or

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header children={<Content profile={profile} />} > 
    </div> 
  ); 
}

As you can see, we have resolved the prop drilling issue in the previous example, even though we still have a redundant component, <Header>, right? We've successfully addressed prop drilling through component composition.

This process is quite straightforward because we concentrate on recognizing elongated props and repositioning them within appropriate contexts.

The concept of prop drilling is problem-focused, but prop elongation is solution-driven. When dealing with elongated props, our primary goal is to identify props that are not consumed but only passed down to another components.

How to Fix Prop Drilling by Moving State to the Consumer

Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named Content. But the component is forced to receive a prop from its parent instead of having a state and be an independent component – and so we have prop drilling.

We can fix the prop drilling in this case by moving the profile state to where it is consumed.

Let's revisit the example:

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> 
      <Header profile={profile} />
      <Footer profile={profile />
    </div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Component</h2> 
      <p>{profile.name}</p> 
    </main> 
  ); 
} 

export default App;

We can fix prop drilling in this case by moving profile to where it is consumed:

function App() { 
  return ( 
    <div> 
      <Header />
      <Footer profile={profile />
    </div> 
  ); 
} 

function Header() { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content /> 
    </header> 
  ); 
} 

function Content({ profile }) { 
  const [profile, setProfile] = useState({ame: 'John'});
  return ( 
    <main> 
      <h2>Content Component</h2> 
      <p>{profile.name}</p> 
    </main> 
  ); 
}

Now that we have lifted the profile to the Content component where it is consumed, the App component doesn't have a state, while the Header component doesn't receive a prop again as the Content component has its state.

But wait! There is a problem. The Footer component needs the state we moved away from App. There you are! That is the problem with lifting or moving state to where we think it is needed. In this case, if the Footer component doesn't need it, we won't have any issue – but Footer also needs the prop.

Now that Footer needs profile as a prop, we need to solve prop drilling with another method.

How to Fix Prop Drilling with a Children-Replacing-Parent Strategy

Earlier in this article, we talked about how to use component composition and moving state to its consumer to solve prop drilling. But as you saw, they have some issues – duplicated components or states.

But using this children-replacing-parent approach fixes the problem effectively:

Working but could be better:

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header> 
        <Content profile={profile} /> 
      </Header> 
    </div> 
  ); 
}

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
}

The example above shows a solution to the prop drilling example in this article. But as you can see, it has a redundant component, as Header does nothing.

Here's a better version:**

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <header> 
      <h1>This is the header</h1> 
      <Content profile={profile} /> 
    </header> 
  ); 
}

In the above code, we enhance the component composition solution we previously implemented for the prop drilling example by replacing the redundant Header component with its content in its parent (App).

What to Avoid

_Photo by [Unsplash](https://unsplash.com/@edwinhooper?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Edwin Hooper / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

It's essential to highlight what to avoid when dealing with prop drilling to prevent unnecessary challenges.

• Avoid React Context, if possible, to fix prop drilling. This approach ties your component to a specific context, restricting its usability outside of that context and hindering composition and reusability.
• Steer clear of redundant components by employing a children-parent replacement approach. This approach naturally incorporates component composition without introducing redundant components or states when resolving prop drilling.

By avoiding elongated props, you pave the way for crafting maintainable, high-performing, reusable, and scalable React components. It simplifies the process of lifting states and components by removing the struggle of deciding where to place them.

With your understanding of elongated props, you can confidently position props and components within the right context without undue stress.

In short, you can now discover prop drilling intuitively by paying attention to any component that takes props it doesn't consume and only passes it down to another component.

Thanks for reading – cheers!

Hey wait! I am Ayobami Ogundiran and I am about to start showing how to build your own React, Redux, TypeScript, Zod or Ecommerce websites on my YouTube channel. Click to subscribe to stay connected.

With that said, writing highly interactive and robust web components isn’t simple. They require a lot of boilerplate and feel much less intuitive than the components you may have written in frameworks like React, Svelte, or Vue.

In this tutorial, I’ll give you an example of an interactive component written as a web component, and then refactor it using a library that softens the edges and removes heaps of boilerplate.

Don’t sweat it if you’re not familiar with web components. In the next section, I’ll do a (brief) overview of what web components are, and what they’re made out of. If you have some basic experience with them, you can skip the next section.

What are Web Components?

Before web components, the browser didn’t have a standard way of writing reusable components. Many libraries solve this problem, but they often run into limitations like performance, interoperability, and issues with web standards.

Web components are a technology made up of 3 different browser features:

• Custom elements
• Shadow DOM
• HTML Templates

We’ll do a quick crash course covering these technologies, but it’s by no means a comprehensive breakdown.

What are Custom Elements?

With Custom Elements you can author your own custom HTML elements that you can reuse across your site. They can be as simple as text, images, or visual decorations. You can push them further and build interactive components, complex widgets, or entire web applications.

You’re not just limited to using them in your projects, but you can publish them and allow other developers to use them on their sites.

Here are some of the reusable components from my library A2K. You can see that they come in all shapes and sizes, and have a range of different functionalities. Using them in your projects is similar to using any old HTML element.

A small collection of web components from the A2K library

Here’s how you’d use the progress element in your project:

<!DOCTYPE html>
<html>
    <head>
        <title>Quick Start</title>
        <meta charset="UTF-8" />
    </head>

    <body>
        <!-- Use web components in your HTML like regular built-in elements. -->
        <a2k-progress progress="50" />

        <!-- a2k web components use standard JavaScript modules. -->
        <script type="module">
            import 'https://cdn.jsdelivr.net/npm/@a2000/progress@0.0.5/lib/src/a2k-progress.js';
        </script>
    </body>
</html>

Once you’ve imported the third-party scripts, you can start using the component, a2k-progress in this case, just like any other HTML element.

If you’re building your own web components, there’s virtually no limit to how complex you can make your custom elements.

I recently created a web component that renders a CodeSandbox code editor in the browser. And because it’s a web component, you can use it in any framework you like! If you’d like to learn a little more about that, you can read more here.

What is the Shadow DOM?

If you have a working knowledge of CSS, you’ll know that vanilla CSS is scoped globally. Writing something like this in your global.css:

p {
  color: tomato;
}

will give all p elements a nice orange/red color, assuming that no other, more specific CSS selectors are applied to a p element.

Take this select menu, for example:

It has a distinct character which is driven by the visual design. You might want to use this component, but if your global styles affect things like the font family, the color, or the font size, it could cause issues with the appearance of the component:

<head>
    <style>
        body {
            color: blue;
            font-size: 12px;
            font-family: system-ui;
        }
    </style>
</head>

<body>
    <a2k-select></a2k-select>
</body>

This is where the Shadow DOM comes in. The Shadow DOM is an encapsulation mechanism that prevents the rest of the DOM from interfering with your web components. It ensures that the global styles of the web application don’t interfere with any components that you consume. It also means that component library developers can author their components with the confidence that they’ll look and behave as expected across different web applications.

There’s a lot more nuance when it comes to the Shadow DOM, as well as other features that we’re not going to touch on in this article. If you’d like to learn more about web components though, I have an entire course (Component Odyssey) dedicated to teaching you how to build reusable components that work in any framework.

HTML Templates

The last feature in our whistle-stop tour of web component features is HTML Templates.

What makes this HTML element different from other elements, is that the browser doesn’t render its content to the page. If you were to write the following HTML you wouldn’t see the text “I’m a header” displayed on the page:

<body>
    <template>
        <h1>I'm a header</h1>
    </template>
</body>

Instead of being used to render the content directly, the content of the template is designed to be copied. The copied template can then be used to render content to the page.

You can think of the template element much like the template for a 3D print. The template isn’t a physical entity, but it’s used to create real-life clones.

You would then reference the template element in your web component, clone it, and render the clone as the markup for your component.

I won’t spend any more time on these web component features, but you’ve probably already noticed that to write vanilla web components, there are a lot of new browser features that you need to know and understand.

You’ll see in the next section that the mental model for building web components doesn’t feel as streamlined as it does for other component frameworks.

How to Build a Basic Web Component

Now that we’ve briefly covered the fundamental technologies powering a web component, here’s how to build a hello world component:

const template = document.createElement('template');
template.innerHTML = `<p>Hello World</p>`;

class HelloWorld extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.append(template.content.cloneNode(true));
    }
}

customElements.define('hello-world', HelloWorld);

This is the most simple component you can write, but there’s already so much going on. For someone completely new to web components, and without the background knowledge I provided above, they’re going to be left with a lot of questions, and a lot of confusion.

For me, there are at least two key reasons why web components can be challenging to write, at least within the context of the hello world examples.

The markup is decoupled from the component logic

In many frameworks, the markup of the component is often treated as a first-class citizen. It’s often the content that gets returned from the component function, or has direct access to the component’s state, or has built-in utilities to help manipulate markup (like loops, conditionals, and so on).

This isn’t the case for web components. In fact, the markup is often defined outside of the component’s class. There’s also no built-in way for the template to reference the current state of the component. This becomes a cumbersome limitation as the complexity of a component grows.

In the world of frontend, components are designed to help developers reuse markup in several pages. As a result, the markup and the component logic are inextricably linked, and so they should be colocated with one another.

Writing a web component requires understanding all of its underlying technologies

As we saw above, web components are made up of three technologies. You can also see in the hello world code snippet, that we explicitly need to know and understand these three technologies.

1. We’re creating a template element and setting its inner HTML
2. We’re creating a shadow root, and explicitly setting its mode to ‘open’.
3. We’re cloning our template and appending it to our shadow root
4. We’re registering a new custom element to the document

There’s nothing inherently wrong with this, since web components are supposed to be a “lower-level” browser API, making them prime for building abstractions on top of. But for a developer coming from a React or a Svelte background, having to understand these new browser features, and then having to write components with them can feel like too much friction.

More Advanced Web Components

Let’s take a look at a more advanced web component, a counter button.

You click the button, and the counter increments.

The following example contains a few extra web component concepts, like lifecycle functions and observable attributes. You don’t need to understand everything going on in the code snippet. This example is really only used to illustrate how much boilerplate is required for the most basic of interactive interfaces, a counter button:

const templateEl = document.createElement("template");

templateEl.innerHTML = `
<button>Press me!</button>
<p>You pressed me 0 times.</p>
`;

export class OdysseyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(templateEl.content.cloneNode(true));
    this.button = this.shadowRoot.querySelector("button");
    this.p = this.shadowRoot.querySelector("p");
    this.setAttribute("count", "0");
  }

    // Note: Web components have lifecycle methods,
  // If we're setting event listeners when the component is added to the DOM, it's our job to clean
  // them up when it gets removed from the DOM
  connectedCallback() {
    this.button.addEventListener("click", this.handleClick);
  }

  disconnectedCallback() {
    this.button.removeEventListener("click", this.handleClick);
  }

  // Unlike frameworks like React, Web Components don't automatically rerender when a prop (or attribute)
  // changes. Instead, we need to explicitly define which attributes we want to observe.
  static get observedAttributes() {
    return ["disabled", "count"];
  }

  // When one of the above attributes changes, this lifecycle method runs, and we can
  // react to the new attribute's value accordingly.
  attributeChangedCallback(name, _, newVal) {
    if (name === "count") {
      this.p.innerHTML = `You pressed me ${newVal} times.`;
    }
    if (name === "disabled") {
      this.button.disabled = true;
    }
  }

  // In HTML, attribute values are always strings. This means that it's our job to
  // convert types. You can see below that we're converting a string -> number, and then back to a string
  handleClick = () => {
    const counter = Number(this.getAttribute("count"));
    this.setAttribute("count", `${counter + 1}`);
  };

As web component authors, we need to consider a lot of things:

• Setting up the shadow DOM
• Setting up the HTML templates
• Cleaning up event listeners
• Defining properties that we want to observe
• Reacting to properties when they change
• Handling type conversions for attributes

And there are still so many other things to consider that I haven’t touched on in this article.

That isn’t to say that web components are bad and that you shouldn’t write them. In fact, I’d argue that you learn so much about the browser platform by building with them.

But I feel that there are better ways to write components if your priority is to write interoperable components in a much more streamlined and ergonomic way.

How to Write Web Components with Less Boilerplate

As I mentioned earlier, there are a lot of tools out there to help make writing web components much easier.

One such tool is called Lit, which is developed by a team at Google. Lit is a lightweight library designed to make writing web components simple, by removing the need for the boilerplate we’ve already seen above.

As we’ll see, Lit does a lot of heavy lifting under-the-hood to help cut down the total lines of code by nearly half! And because Lit is a wrapper around web components and other native browser features, all your existing knowledge about web components is transferable.

To start seeing how Lit simplifies your web components. Here’s the hello world example from earlier, but refactored to use Lit instead of a vanilla web component:

import { LitElement, html } from "lit";

export class HelloWorld extends LitElement {
  render() {
    return html`<p>Hello World!</p>`;
  }
}`

customElements.define('hello-world', HelloWorld);

There’s a lot less boilerplate with the Lit component, and Lit handles the two problems I mentioned earlier, a little bit differently. Let’s see how:

1. The markup is directly defined from within the component class. While you can define your templates outside of the class, it’s common practice to return the template from the render function. This is more in line with the mental model presented in other UI frameworks, where the UI is a function of the state.
2. Lit also doesn’t require developers to attach the shadow DOM, or create templates and clone template elements. While having an understanding of the underlying web component features will help when developing Lit components, they’re not required for getting started, so the barrier for entry is much lower.

So now for the big finale, what does the counter component look like once we’ve migrated it over to Lit?

import { LitElement, html } from "lit";

export class OdysseyCounter extends LitElement {
  static properties = {
        // We define the component's properties as well as their type.
        // These properties will trigger the component to re-render when their values change.
        // While they're not the same, you can think of these "properties" as being
        // Lit's alternatives to "observed attributes"
        // If the value is passed down as an attribute, Lit converts the value
        // to the correct type
    count: { type: Number },
    disabled: { type: Boolean },
  };

  constructor() {
    super();
        // There's no need to create a shadow DOM, clone the template,
        // or store references to our DOM nodes.
    this.count = 0;
  }

  onCount() {
    this.count = this.count + 1;
  }

  render() {
        // Instead of using the attributeChangedCallback lifecycle, the
        // render function has access to all of the component's properties,
        // which simplifies the process of manipulating our templates.
    return html`
      <button ?disabled=${this.disabled} @click=${this.onCount}>
        Press me!
      </button>
      <p>You pressed me ${this.count} times.</p>
    `;
  }
}`

The amount of code we’re writing is cut down by almost half! And this difference becomes more noticeable when creating more complex user interfaces.

Why am I going on about Lit?

I’m a big believer in web components, but I recognise that the barrier to entry is high for many developers. Writing complex web components requires understanding heaps of browser features and the education around web components isn’t as comprehensive as other technologies, like React or Vue.

This is why I think it’s important to use tools like Lit can make writing performant and interoperable web components much easier. This is great if you want your components to work within any frontend framework.

If you’d like to learn even more, this is the approach I teach in my upcoming course Component Odyssey. This course is excellent for anyone who wants to understand how to write components that work in any framework.

I do this by covering the absolute basics of web components, before moving on to tools like Lit that simplify the process of writing web components without complicating your development environment. By the end, you’ll learn how to build and publish a component library that works across any frontend framework.

If you want early-bird discount codes for Component Odyssey, then head on over to the site to get notified.

Web components, also known as custom elements, are new HTML elements that you create. These elements encapsulate some markup, style, and interactivity.

In this article, you'll learn the basics of web components and create a very simple web component that shows the current date.

This guide is intended as a gentle introduction to the concept, so it won't cover some more advanced aspects such as templates, slots, or shadow DOM. But, these are all powerful building blocks to building components that you should learn as you ramp up your skills.

What is a Web Component?

A web component is a custom HTML element that you define, with its own tag name. Think of it as an encapsulated, reusable piece of code. Just like regular HTML elements, web components can accept attributes and you can listen for events.

Web components are a nice way to add some extra functionality to your web app. Since it's a web standard, there's no extra third-party code needed.

A web component can be as simple or complex as you want: it can simply display some text (as the example in this article will be doing), or it can be highly interactive.

Web Component Basics

To define a web component, create a class that extends from HTMLElement. This class will contain all of your web component's behavior. After that, you need to register it with the browser by calling customElements.define.

class MyComponent extends HTMLElement {
    // component implementation goes here
}

customElements.define('my-component', MyComponent);

Once you've done this, you can use your component by just adding a <my-component> element to your HTML. That's it! You've just added a web component to your page.

Note that the component name has a hyphen. This is required by the specification, to prevent name clashes with potential future standard HTML elements.

Lifecycle callbacks

Web components have a few lifecycle callbacks. These are functions that the browser calls at different parts of the component's lifecycle. Some of these callbacks are:

• connectedCallback: Called when the element is first added to the DOM
• disconnectedCallback: Called when the element is removed from the DOM
• attributeChangedCallback: Called when one of the element's watched attributes change. For an attribute to be watched, you must add it to the component class's static observedAttributes property.

For this simple component, you'll only need the connectedCallback.

How to Create the Component

In a new JavaScript file, create the component class and add the call to customElements.define as shown above. Here's the first pass at the CurrentDate component:

class CurrentDate extends HTMLElement {
    // The browser calls this method when the element is
    // added to the DOM.
    connectedCallback() {
        // Create a Date object representing the current date.
        const now = new Date();

        // Format the date to a human-friendly string, and set the
        // formatted date as the text content of this element.
        this.textContent = now.toLocaleDateString();
    }
}

// Register the CurrentDate component using the tag name <current-date>.
customElements.define('current-date', CurrentDate);

In the connectedCallback, you are getting the current date and calling toLocaleDateString, which formats the date portion of the Date object in a more human friendly format. For example, in the en-US locale, this would be a format like 10/18/2023.

There are no event listeners to clean up here, so there is no need for a disconnectedCallback.

Since CurrentDate extends from HTMLElement, it includes all of its properties and methods. This is why you can use the textContent property like with any other HTML element. This will set the formatted date as the value of a text node inside the <current-date> element.

How to Use the Component

Before you use the component, you need to load it using an import statement or a script tag. Here's a simple usage example using a script tag:

<script src="./currentDate.js"></script>

<h2>Today's Date</h2>
The current date is: <current-date></current-date>

Note that custom elements, even when they have no child content, cannot use the self-closing tag syntax supported by some elements. They must always have an explicit closing tag.

Future Enhancements

Here are some ways you can enhance the CurrentDate component:

• Use Intl.DateTimeFormat to create a more human-readable format for the date. You could even add attributes to customize the date format used.
• Add support for a date attribute and adapt the component so that it can display any arbitrary date, not just the current date. Of course, in this case, you'll want to change the name from CurrentDate to something else like FormattedDate.
• Use the HTML time element inside the component to produce more semantic markup

Conclusion

In this article, you took your first step into the world of web components.

Web components have no third party dependencies, so using them won't have a big impact on your bundle size. But for more complex components, you may want to reach for a library like Svelte or Lit.

React is an open-source JavaScript library used for building user interfaces (UIs) in web applications. It has taken the web development world by storm.

One of the key concepts in React is components. In this tutorial, we'll explore what React components are, how to pass and render data to them using props, and how to enhance their reliability using default props and propTypes.

What Are React Components?

Imagine you're building a digital LEGO masterpiece. Each individual LEGO brick serves a purpose, but it's only when they're combined that something truly amazing takes shape.

In a similar way, React components are like those LEGO bricks. They are the individual building blocks that come together to create a full-fledged user interface. A component can be a button, a form, a header, or any other part of the webpage that you can think of.

Think of components as reusable templates that you can place throughout your web application to construct a complete user experience.

Why are Components Important in React?

So, why are components such a big deal in React? There are a few reasons:

Modularity and Reusability

By breaking down your UI into components, you create a modular structure. This means you can develop, test, and maintain each piece of your app separately. Plus, once you've created a component, you can reuse it throughout your app, saving you time and effort.

Efficiency in Development

Components encourage a more efficient development process. You can have different team members working on different components simultaneously without stepping on each other's toes. This speeds up the development process and encourages collaboration.

Maintainability

Imagine you need to update the styling of a button that appears in multiple places in your app. With components, you only need to update the styling in one place, the button's component, and it will automatically reflect wherever it's used.

Types of React Components

There are two main types of components in React: functional components and class components.

How to use functional components

This is the simplest way to define components in React. They are basically JavaScript functions that take in props (input data) and return JSX (JavaScript Syntax Extension) elements.

Here's a code example to show you how they work:

import React from 'react'; // Imports the React library.

// Define a functional component named "Button"
const Button = () => {
  return (
    <button>
      Click Me
    </button>
  );
};

export default Button; // Exports the Button component to make it accessible.

In this example, we've defined a component called Button using a JavaScript function. This component returns a button element with the text "Click Me".

How to use class components

These are JavaScript classes that extend the React.Component class.
They use ES6 classes and provide more advanced features, such as state management and lifecycle methods.

Here's a code example:

import React, { Component } from 'react'; // Create class-based React components.

// Class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter; // Exports the Counter component to make it accessible.

In this example, the Counter is a class component that maintains a count in its state and updates it when the button is clicked.

Functional components vs class components – when to use each

Looking at the above two code snippets, you can differentiate them base on a few factors.

• Syntax: functional component are less verbose and easier to read due to their concise syntax. Class components are more verbose due to the class structure and the need to bind event handlers in the constructor.

• State: until the introduction of hooks, functional components couldn't hold State. With hooks, you can now use the useState hook to manage state in functional components. Class component can hold state using the this.state property. State updates are done using this.setState().

• Lifecycle: functional components don't have lifecycle methods. Hooks like useEffect can be used to achieve similar effects. Class components support various Lifecycle Methods like componentDidMount, componentDidUpdate, componentWillUnmount, and so on.

• Performance: functional components perform better as they don't need extra work required for creating classes. Class component can be a bit slower because of the extra work required for creating classes.

• Recommended Use: functional components are preferred for most use cases in modern React development due to their simplicity and functional nature. Class components are still relevant for more complex scenarios that require state management and lifecycle methods (though hooks have made class components less necessary).

React is continually evolving, and new patterns and features might emerge. Stay updated with the latest React documentation and best practices.

How to Pass Data to Components using Props

Props (properties) are like instructions you give to your components. They allow you to pass data from a parent component to a child component. This way, you can customize how components appear and behave.

In simple terms, props are like the parameters that you pass to a function. You can use props to customize the content and behavior of a component based on the values you provide when you use or render that component.

Here's a code example to show you how they work:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent name="Cas" />;
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return <p>Hello, {props.name}!</p>;
};

export default ChildComponent;

In this example, the ParentComponent passes the name prop to ChildComponent, which displays a personalized greeting, Hello, Cas!.

How to render with props

Rendering with props allows you to create flexible and interactive user interfaces by passing and customizing data within your components. Once you have access to the data within the child component, you can use it to render dynamic content within the component's JSX. This means you can display different UI elements based on the values of the props.

In the ParentComponent used above, you can pass different values to the name prop to customize the displayed message.

Here's a code example:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
<div>
<ChildComponent name="Cas" />;
<ChildComponent name="Nuel" />;
<ChildComponent name="Abbey" />;
</div>
)
};

export default ParentComponent;

In this example, different values are provided for the name prop. The displayed messages will be:

• Hello, Cas!

• Hello, Nuel!

• Hello, Abbey!

What is dynamic rendering?

Rendering with props becomes powerful when combined with JavaScript expressions. You can use props along with other variables, functions, or logic to render dynamic content. This flexibility enables you to create versatile and interactive user interfaces.

Here's a code example to show you how this works:

import React from 'react';

const Product = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Price: ${props.price}</p>
      {props.isOnSale && <p>On Sale!</p>}
    </div>
  );
};

export default Product;

In this example, the Product component takes multiple props to render details about a product, including its name, price, and whether it's on sale.
The expression {props.isOnSale && <p>On Sale!</p>} conditionally renders the "On Sale!" message if the isOnSale prop is true.

What are default props?

In some cases, you might want to provide default values for props in case they aren't explicitly passed. This ensures your component doesn't break due to missing data.

Here's a code example:

const ChildComponent = (props) => {
  return <p>Hello, {props.name}!</p>;
};

ChildComponent.defaultProps = {
  name: "Guest",
};

In this example, if a value is not provided for the name property, it uses its default value of "Guest".

How to use PropTypes

To maintain the integrity of your application, you can specify the expected types for your props using propTypes.

Here's a code example:

import PropTypes from 'prop-types';

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

In this example, if the string is not provided for the property value, it will throw an error message.

Conclusion

Understanding the differences between functional and class components is crucial. Functional components, with their cleaner syntax and use of hooks, are favored for most use cases. Class components remain relevant for complex scenarios demanding state management and lifecycle methods.

Components thrive on the principle of passing data via props. Props are akin to instructions, allowing customization of component content and behavior. The capability to render with props enables dynamic and personalized user interfaces. When used in conjunction with JavaScript expressions, props enable versatile and interactive UIs.

Default props and PropTypes are additional tools that enhance component reliability. Default props provide fallback values to prevent breakage due to missing data, while PropTypes enforce data type validation, bolstering application integrity.

As React continues to evolve, staying updated with the latest documentation and best practices is essential. With the knowledge of components, props, default props, and PropTypes, you're well-equipped to embark on your React journey.

Interested in learning more about React? React for Beginners covers nearly every aspect of React. I recommend it for a deeper insight.

If you found this guide helpful and enjoyable, please give it a like. For more insightful tutorials, follow me on X for updates 🙏.

Enjoy your coding!