Creating Reactive DOM Elements with SolidJS Signals: A Comprehensive Guide

Question

Creating Reactive DOM Elements with SolidJS Signals: A Comprehensive Guide

Question for Beginners - I am using SolidJS and I need help making DOM elements react to signal updates.

I am experiencing issues with two instances that are not updating as expected:

In the Main Component, when trying to update the item count.
In the Secondary Component, when trying to update the item results.

Main Component

import { Component } from 'solid-js'
import { isEqual as _isEqual } from 'lodash-es'

const [getItems, setItems] = createSignal<Array<Item>>([])

const MainComponent: Component = () => {
    const updateItems = (item: Item) => {
        const initialItems = getItems()
        const index = initialItems.findIndex(i => _isEqual(i, item))

        index == -1 ? initialItems.push(item) : initialItems.splice(index, 1)

        setItems(initialItems)
    }

    return (
        <>
            <span>Total Items: {getItems().length}</span> //       << -- WON'T UPDATE.
            <button onclick={() => updateItems(x: Item)}>Click Me</button>
        </>
    )
}

export { MainComponent, getItems }

Secondary Component

import { Component } from 'solid-js'
import { getItems } from '../MainComponent'

const SecondaryComponent: Component = () => {
    return (
        <p class='results'>
            {getItems() ? 'Contains Items' : 'No Items'} //        << -- WILL NOT CHANGE.
        </p>
    )
}

javascript typescript solid-js

Answer 1

Answer №1

As per the information provided in Solid's API documentation regarding the function createSignal (found in the options section):

By default, when you call a signal's setter, the signal will only update (and trigger dependent functions to rerun) if the new value is actually different from the old value, based on JavaScript's === operator.

In this specific scenario, the array being set in the signal remains identical (===) to the previous one. One way to address this is by disabling referential equality checks for the signal, like so:

createSignal<Array<Item>>([], { equals: false })

.

Alternatively, you can opt to create a new array each time you set the array again, such as with: setItems([...init])

Answer 2

As per the information provided in Solid's API documentation regarding the function createSignal (found in the options section):

By default, when you call a signal's setter, the signal will only update (and trigger dependent functions to rerun) if the new value is actually different from the old value, based on JavaScript's === operator.

In this specific scenario, the array being set in the signal remains identical (===) to the previous one. One way to address this is by disabling referential equality checks for the signal, like so:

createSignal<Array<Item>>([], { equals: false })

.

Alternatively, you can opt to create a new array each time you set the array again, such as with: setItems([...init])

Answer 3

Answer №2

Components are not just regular DOM elements; they are transformed into DOM elements during compilation while also having additional features for reactivity.

If you want to modify an array, remember that in order to trigger a state update, you need to assign a new array rather than mutating the existing one.

const [items, setItems] = createSignal([]);

setInterval(() => {
  setItems([ ...items(), items().length ]);
}, 1000);

Therefore, creating a new array and adhering to JSX guidelines should resolve your issue.

To future-proof this question, let's explore updating a real DOM element that exists outside of Solid's system.

Initially, I will generate a new DOM element and insert it into the body, although the process remains consistent for modifying an already present DOM element.

import { createSignal, createEffect } from "solid-js";

// Retrieve the DOM element
const el = document.createElement('div');
document.querySelector('body').appendChild(el);

// Signal for the content within our DOM element
const [count, setCount] = createSignal(0);

// Utilizing setInterval to update the signal for simplicity
setInterval(() => {
  setCount(c => c + 1);
}, 1000);

// Implementing an effect to update the element's innerText or innerHTML upon signal changes
createEffect(() => {
  el.innerHTML = count();
});

This solution has a minor issue; the effect we established may not be disposed when its scope is disposed as it doesn't belong to any tracking scope.

The recommended approach is to execute this code within a render function that automatically generates a root or manually create one using createRoot and dispose it accordingly.

Answer 4

Components are not just regular DOM elements; they are transformed into DOM elements during compilation while also having additional features for reactivity.

If you want to modify an array, remember that in order to trigger a state update, you need to assign a new array rather than mutating the existing one.

const [items, setItems] = createSignal([]);

setInterval(() => {
  setItems([ ...items(), items().length ]);
}, 1000);

Therefore, creating a new array and adhering to JSX guidelines should resolve your issue.

To future-proof this question, let's explore updating a real DOM element that exists outside of Solid's system.

Initially, I will generate a new DOM element and insert it into the body, although the process remains consistent for modifying an already present DOM element.

import { createSignal, createEffect } from "solid-js";

// Retrieve the DOM element
const el = document.createElement('div');
document.querySelector('body').appendChild(el);

// Signal for the content within our DOM element
const [count, setCount] = createSignal(0);

// Utilizing setInterval to update the signal for simplicity
setInterval(() => {
  setCount(c => c + 1);
}, 1000);

// Implementing an effect to update the element's innerText or innerHTML upon signal changes
createEffect(() => {
  el.innerHTML = count();
});

This solution has a minor issue; the effect we established may not be disposed when its scope is disposed as it doesn't belong to any tracking scope.

The recommended approach is to execute this code within a render function that automatically generates a root or manually create one using createRoot and dispose it accordingly.

Creating Reactive DOM Elements with SolidJS Signals: A Comprehensive Guide

Answer №1

Answer №2

Similar questions

Enhancing component and view functionality in Angular

Using this functionality on a ReactJS Functional Component

What is the best way to store a username and password within a JavaScript object in ReactJS?

Steps for converting a window to a PDF file rather than an XPS file

Discovering the way to retrieve background height following a window resize using jQuery

I attempt to use the OBJECT3D array

Navigating through an array with multiple dimensions and varying lengths using d3

Advantages of using jQuery's .each() function instead of conventional "for" loops

The mesh takes on a more defined geometric shape once it has been processed using ThreeCSG

Issue with NodeJS Express's reverse proxy due to an invalid TLS certificate alternative name

When attempting to send a POST request to /api/users/login, the system returned an error stating that "

Tips for rearranging sibling divs while maintaining the order of their child elements

I can't seem to figure out why my three.js scene refuses to render

Guide on deploying Google App Script add-ons on Google Workspace Marketplace

A guide on showcasing a MultiPolygon GeoJSON on a Leaflet map

React Native app experiences a start-up crash caused by SoLoader problem

Using AngularJS to create interactive popups within leaflet maps

Why won't my div tag show conditionally with AngularJS ng-show?

Using jQuery to loop through a table and retrieve the button value from every row

Avoid constantly updating the rendering in React by utilizing callback functions