Сигналы

Сигнал — это реактивное значение: когда оно меняется, Solid обновляет все места страницы, где его прочитали. Сигналами хранят всё, что меняется со временем: счётчики, текст в поле ввода, открыто ли меню.

Создание сигнала

Функция createSignal из пакета solid-js принимает начальное значение и возвращает пару: геттер и сеттер.

// src/components/Counter.jsx
import { createSignal } from 'solid-js';
 
export default function Counter() {
  const [count, setCount] = createSignal(0);
 
  return (
    <div>
      <p>Выполнено задач: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Отметить</button>
    </div>
  );
}

Выведите компонент в src/App.jsx строкой <Counter /> после импорта import Counter from './components/Counter';. При каждом нажатии на кнопку число в абзаце увеличивается на единицу.

Геттер — это функция

Чтение через вызов — главное отличие от useState в React. Вызов count() внутри JSX сообщает Solid, что этот кусок разметки зависит от сигнала. Когда сигнал меняется, Solid обновляет только текстовый узел с числом, не трогая остальную разметку и не вызывая Counter заново.

Сигнал со строкой

Сигнал может хранить значение любого типа:

// src/components/Greeting.jsx
import { createSignal } from 'solid-js';
 
export default function Greeting() {
  const [name, setName] = createSignal('Анна');
 
  return (
    <div>
      <p>Привет, {name()}!</p>
      <button onClick={() => setName('Олег')}>Сменить имя</button>
    </div>
  );
}

После нажатия текст сменится на «Привет, Олег!».

Сигнал вне компонента

Сигнал не привязан к компоненту. Его можно создать в отдельном файле и импортировать в нескольких местах — все они увидят одно и то же значение:

// src/state/counter.js
import { createSignal } from 'solid-js';
 
export const [done, setDone] = createSignal(0);

Любой компонент, который вызовет done() в разметке, обновится после setDone(...). Для небольших приложений этого часто достаточно вместо контекста.

Сравнение с объектами и массивами

Сеттер сравнивает новое значение со старым через ===. Если передать тот же массив, изменённый методом push, обновления не будет. Создавайте новый массив: setTodos([...todos(), item]). Для сложных списков удобнее хранилища — им посвящён отдельный урок.

Частая ошибка

Сохранить значение сигнала в переменную и выводить её:

// src/components/Counter.jsx
import { createSignal } from 'solid-js';
 
export default function Counter() {
  const [count, setCount] = createSignal(0);
  const value = count(); // прочитано один раз
 
  return <button onClick={() => setCount(count() + 1)}>{value}</button>;
}

Кнопка навсегда покажет 0: компонент выполнился один раз, и value больше не пересчитывается. Читайте сигнал прямо в JSX — {count()}.