Solid.js Components — Reusable UI Building Blocks

In this tutorial, you will learn about Solid.js Components. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js components: create functional components, compose components together, use dynamic components, and manage component lifecycle.

In this lesson, you'll create and compose Solid.js components, understand the component lifecycle, and use dynamic component patterns.

What You'll Learn

How to create functional components, compose them into larger UIs, use dynamic component rendering, and understand component creation timing.

Why It Matters

Components are the building blocks of any Solid.js application. Well-structured components improve reusability, testability, and maintainability.

Real-World Use

Doda Browser's UI is composed of small components: TabBar, TabItem, AddressBar, BookmarkButton, each independently testable.

flowchart TD
    A[App] --> B[Header]
    A --> C[Sidebar]
    A --> D[Main Content]
    B --> E[Nav Items]
    C --> F[User Info]
    D --> G[Data Grid]
    style A fill:#2c4f7c,color:#fff

Simple Component

function Welcome() {
  return <h1>Welcome to Solid.js</h1>;
}

Components are functions that return JSX. No class components needed.

Composing Components

function PageHeader({ title }) {
  return (
    <header>
      <h1>{title}</h1>
      <Navigation />
    </header>
  );
}

function Navigation() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  );
}

function App() {
  return <PageHeader title="My App" />;
}

Conditional Rendering

function StatusMessage({ isError, message }) {
  return (
    <div class={isError() ? "error" : "info"}>
      {message()}
    </div>
  );
}

Dynamic Component

function DynamicComponent({ component: Component, props }) {
  return <Component {...props} />;
}

// Usage
<DynamicComponent component={Header} props={{ title: "Hello" }} />

Common Mistakes

1. Creating components inside other components: Components defined inside another component re-create on every parent render, losing state.
2. Not using JSX fragments: Return adjacent elements wrapped in <></> fragments. Components must return a single root.
3. Over-splitting components: Too many tiny components (each with one line) make the codebase hard to navigate.
4. Forgetting to import jsx: import { jsx } from "solid-js" or configure the JSX pragma in Vite.
5. Using class components: Solid.js only supports functional components. There are no class components.

Practice Questions

1. How do you define a Solid.js component? Answer: As a function that returns JSX. No classes or special syntax needed.

2. How do you render a component conditionally? Answer: Use the <Show> component or ternary expressions in JSX.

3. How do you pass data to a component? Answer: As props: <Component prop={value} />. Access them via the props parameter.

4. What happens if you define a component inside another component? Answer: The inner component is re-created on every parent render, losing any internal state.

Challenge

Build a page layout component that composes a Header, Sidebar, and Main content area. Each section should be its own component with props.

Mini Project

Create a modal component with trigger button, overlay, close button, and children content. Compose it with a form component inside the modal.

FAQ

What's Next

Learn about Solid.js JSX for understanding JSX compilation and template syntax.