SolidJS Creator
Reactivity with SolidJS
4 hours, 32 minutes
CC
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
CloseWhat They're Saying
Ryan Carniato's course is golden
Milos Dimitrijevic
milos_toox
Course Details
Published: January 9, 2023
Topics
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
Table of Contents
Introduction
Section Duration: 7 minutes
Ryan begins the course with a brief history of SolidJS and how it promotes a return to fine-grained reactivity and performance without relying on a virtual DOM.
Overview
Section Duration: 30 minutes
Ryan describes reactivity as the ability to declaratively express the relationship between values that change over time. It consists of an observable state which notifies any derived values. When these values change a side effect like a render is triggered.
Ryan explains the relationship between signals and side effects. Signals are the state exposed to the application through getters and setters. When a signal is used inside a side effect, the effect will re-execute.
Ryan demonstrate how derivations, or memoized values are only re-calculated when dependent values are changed. They act as a cache for expensive operations.
Ryan demonstrates how side effects can dynamically track changes to signals. Conditional logic can be added, and as the condition uses reactive properties, the effect will only run when dependent signals are changed.
Build a Reactive System
Section Duration: 1 hour, 3 minutes
Ryan creates a reactive signal from scratch. A global context array is used to store a list of observers that are subscribed to the signal. When the signal is updated, each observer's execute function is called.
Ryan implements the dynamic reactivity that conditionally re-runs the effect. A list of dependencies are added to the effect and subscriptions are bound to observers. A cleanup method is added to remove dependencies and ensure an infinite dependency loop is not created.
Ryan implements the the createMemo method which creates a signal and an effect for that signal. The untrack function's implementation is also demonstrated in this lesson.
Ryan demonstrates how reactivity can be used to update DOM elements. A count signal is create and an h1 element's text content is updated inside an effect when a button is clicked.
Ryan refactors the vanilla JavaScript example to use JSX. The counter is encapsulated inside a component-like function. The SolidJS render method is imported and used to render the Counter component.
Ryan demonstrates the flexibility of the reactive code in the application. Local state can easily be moved to a global state and shared across components.
Ryan discussed reactivity with HTML list elements. Rather than re-rendering the entire list when data changes, SolidJS provides components for iterating through the data and paginating. These components then decide what elements require updating.
Control Flow
Section Duration: 24 minutes
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.
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.
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
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.
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.
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
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.
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
Ryan uses Stackblitz to generate a new SolidJS project. The project is configured with Vite and an initial application is created.
Ryan adds the initial form elements for displaying todo items. State properties are added for storing the list of todo items and an initial item is hard coded to test the markup.
Ryan adds an onKeyPress event to the input field for adding a new todo. The event will detect when the enter key is pressed. If the input is valid, the new todo item will be added to the todos signal.
Ryan adds the ability to toggle the completed state and remove a todo. A checkbox for toggling all the todo items is also added to the application.
Ryan implements the filters for the todo items. A footer is added to the application with toggles for all, active, and completed. A filter function is created to update the showMode signal. The final code can be found at the Stackblitz link below.
Stores & Context
Section Duration: 20 minutes
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.
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
Ryan introduces the SolidJS client-side router and demonstrates how transitions are included in its implementation. A Suspense component wraps any UI component where content might be loaded. The Transition API provides pending and start helper methods for handling transitions between views.
Ryan demonstrates Solid Start, a collection of plugins that enable both client-side and server-side rendering in SolidJS applications. Progressively enhanced elements like "Form" and "A" which work without JavaScript are also discussed.
Ryan demonstrates the server$ method which enables server-side fetching. Any code wrapped in this method will be executed on the server.
Ryan demonstrates the progressive enhancement features of the Server Action API. Additional Form elements are used to submit form data to the server when JavaScript isn't enabled. The server-side rendering feature of Solid Start will still display the data correctly.
Wrapping Up
Section Duration: 2 minutes
Ryan wraps up the course by sharing a few additional resources to learn more about SolidJS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops