Reactivity with SolidJS

Ryan Carniato

Ryan Carniato

SolidJS Creator
4 hours, 32 minutes CC
Reactivity with SolidJS

Course Description

SolidJS uses its Reactivity to make fine-grained subscriptions that only update parts of the DOM on changes instead of doing heavy DOM diffing. It allows developers to create efficient, reactive user interfaces using a declarative syntax similar to React but with a more lightweight and flexible implementation. This reactivity impacts performance and the whole mental model of how we write our applications.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: January 9, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 7 minutes

Overview

Section Duration: 30 minutes

Build a Reactive System

Section Duration: 1 hour, 3 minutes

Control Flow

Section Duration: 24 minutes
  • Show
    Ryan introduces SolidJS control components. While SolidJS supports ternary operators for conditionally rendering components, the Show component provides a more declarative approach. The "when" attribute contains the condition and fallback content is provided for when the condition is false.
  • Switch, Dynamic, & ErrorBoundary
    Ryan uses the Switch component to avoid nested Show components. The Switch component contains multiple matches for determining what should be rendered. The Dynamic component behaves like a slot. It is passed a component to render.
  • For, Index, & Portal
    Ryan demonstrates the differences between For and Index. For provides a reactive loop with keyed items. The index or position of each item is a signal, but the value is not. An Index behaves the opposite way. The index or position of each item is static but the value is provided as a signal.

Component Authoring

Section Duration: 17 minutes
  • Managing Props & Lifecycle Methods
    Ryan explains that SolidJS provides helper methods to maintain reactivity while executing more complex operations on component props like merging or spreading. Lifecycle methods like onMount and onCleanup are also explained in this lesson.
  • Props & Children
    Ryan demonstrates how to set default props with mergeProps and how to use splitProps to create a group of props to pass through to child components. The children helper method is also demonstrated in this lesson.
  • Lifecycles
    Ryan demonstrates use cases for the the onMount and onCleanup lifecycle methods. The onMount method is useful for executing API requests or screen measurements before the component renders. The onCleanup method could be used to remove listeners or clear intervals after an effect has run.

DOM Binding

Section Duration: 14 minutes
  • Events & Refs
    Ryan explores ways SolidJS binds with DOM events and element references. DOM events are passed an event handler similar to Vanilla JavaScript. CSS Styles can be managed through a style attribute or directly with the classList property. The ref attribute allows developers to keep elements in a single JSX file while creating a reference which is available at creation time before elements are attached to the DOM.
  • Spreads & Directives
    Ryan demonstrates how to use the spread operator to populate a component's props object. Directives, which define reusable custom attributes, are also covered in this lesson.

Building an App

Section Duration: 52 minutes

Stores & Context

Section Duration: 20 minutes
  • Stores
    Ryan demonstrates how nested stores provide fine-grained reactivity because nested updates are handled independently without the need for DOM diffing. SolidJS also provides an Immer-inspired produce method which allows mutations to occur with a writable proxy version of the store.
  • Context
    Ryan explains the Context API and demonstrates how to create a global state. Immutable stores that interface with libraries like Redux, Apollo, or XState can also be created.

Routing & Async

Section Duration: 39 minutes

Wrapping Up

Section Duration: 2 minutes
Ryan Carniato's course is golden
Milos Dimitrijevic

Milos Dimitrijevic

milos_toox

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now