Хук useReactiveValue
Хук для извлечения значения из Signal/Computed/Resource и авто-ререндера компонента. Поддерживает React 18+ и ленивые фабрики без утечек памяти. Предположим, что counterSignal и doubleComputed созданы где-то в вашем приложении. Хук сам подпишется, вытащит значение наружу и будет триггерить ререндер компонента.
Итоги тестирования
Тесты для обоих хуков проверяют их главную задачу: извлечение текущего значения из сигнала и автоматический запуск перерисовки компонента (ререндер) при обновлении данных. Для проверки реактивного обновления мы будем использовать renderHook и act.
🔍 Что важного проверяет этот тест:
- Синхронизация стейта: Тест должен вызывать ререндер... критически важен. Он гарантирует, что когда ядро вашей библиотеки пушит новое значение через коллбек
subscribe(newValue), React-компонент мгновенно узнает об этом и обновляет интерфейс. - Параметризация через замыкание: Функция
runReactiveValueTestsпозволяет прогнать один и тот же строгий контракт поведения сразу на двух разных архитектурах хуков. Если вы где-то ошиблись в логике обновленияuseRefв старой версии или в ссылках новой — тест сразу это покажет.
Пример
tsx
import React from 'react';
import { useReactiveValue } from './useReactiveValue';
import { counterSignal, doubleComputed } from './myState';
// Предположим, что counterSignal и doubleComputed созданы где-то в вашем приложении
export const StandaloneCounter = () => {
// Хук сам подпишется, вытащит значение наружу и будет триггерить ререндер компонента
const count = useReactiveValue(counterSignal);
const doubleCount = useReactiveValue(doubleComputed);
return (
<div style={{ border: '2px solid purple', padding: '15px', borderRadius: '8px' }}>
<h4>Компонент на базе изолированного useReactiveValue</h4>
<p>Обычное значение: {count}</p>
<p>Удвоенное значение: {doubleCount}</p>
<button onClick={() => counterSignal.value++}>Увеличить</button>
</div>
);
};