Скажите, как реагирует ловушка, что «вложенный» объект обновился, не копируя весь объект?

Question

В моем штате я использую набор для отслеживания выбора. Набор может увеличиться до достаточно большого размера, и поэтому я буду sh предотвращать постоянное копирование набора.

Я использую хук для состояния, как показано ниже, код работает. Однако вместо того, чтобы возвращать новый набор, я предпочитаю возвращать «старый набор», обновлять набор на месте.

Когда я делаю это, однако, реакция не замечает изменения и перерисовывает события и другие эффекты не происходят.

const [selected, setSelected] = React.useState<Set<number>>(new Set());

function onSelect(ev: SyntheticEvent<>, checked: boolean, event_id: number) {
    setSelected((selected) => {
        if (checked) {
            if (!selected.has(event_id)) {
                selected.add(event_id);
            }
        } else {
            if (selected.has(event_id)) {
                selected.delete(event_id);
            }
        }
        return new Set(selected);
    })
}

Как мне сказать реагировать "эй, я обновляю переменную состояния xyz"?

Answer 1

Вы можете использовать useCallback примерно так

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Из документов: useCallback вернет запомненную версию обратного вызова, которая изменяется только в случае изменения одной из зависимостей. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных визуализаций (например, shouldComponentUpdate).

Хотя вы можете использовать useRef, например,

function useEffectOnce(cb) {

    const didRun = useRef(false);
    useEffect(() => {
        if(!didRun.current) {
            cb();
            didRun.current = true
        }
    })
}

объект ref не уведомляет реагировать на изменения текущего значения ref.