mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-22 22:29:30 +00:00
Timo K.andClaude Fable 5.1
a010cc983f
Everything downstream of the component's params — the mute state, the
call view model and with it the media connection — is keyed on the
identity of the params object, which was memoised on the identity of
the `config` prop. A host writing `config={{ ... }}` inline, which is
the natural way to write it, therefore tore the whole call down on
every render. The harness happened to pass a constant, so nothing
noticed.
`useStableValue` hands out the same object for as long as a deep
comparison says nothing changed, so an inline config costs nothing.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { renderHook } from "@testing-library/react";
|
|
import { describe, expect, test } from "vitest";
|
|
|
|
import { useStableValue } from "./useStableValue";
|
|
|
|
describe("useStableValue", () => {
|
|
test("keeps the first identity while the contents stay equal", () => {
|
|
const first = { skipLobby: true, fonts: ["Inter"] };
|
|
const { result, rerender } = renderHook(
|
|
({ value }) => useStableValue(value),
|
|
{ initialProps: { value: first } },
|
|
);
|
|
expect(result.current).toBe(first);
|
|
|
|
rerender({ value: { skipLobby: true, fonts: ["Inter"] } });
|
|
expect(result.current).toBe(first);
|
|
});
|
|
|
|
test("takes the new identity once the contents change", () => {
|
|
const first = { skipLobby: true };
|
|
const second = { skipLobby: false };
|
|
const { result, rerender } = renderHook(
|
|
({ value }) => useStableValue(value),
|
|
{ initialProps: { value: first } },
|
|
);
|
|
|
|
rerender({ value: second });
|
|
expect(result.current).toBe(second);
|
|
|
|
// And that identity is then the stable one
|
|
rerender({ value: { skipLobby: false } });
|
|
expect(result.current).toBe(second);
|
|
});
|
|
|
|
test("handles undefined, for an optional prop left out", () => {
|
|
const { result, rerender } = renderHook(
|
|
({ value }) => useStableValue(value),
|
|
{ initialProps: { value: undefined as { a: number } | undefined } },
|
|
);
|
|
expect(result.current).toBeUndefined();
|
|
|
|
const given = { a: 1 };
|
|
rerender({ value: given });
|
|
expect(result.current).toBe(given);
|
|
});
|
|
|
|
test("accepts its own notion of equality", () => {
|
|
const first = { id: 1, label: "a" };
|
|
const { result, rerender } = renderHook(
|
|
({ value }) => useStableValue(value, (a, b) => a.id === b.id),
|
|
{ initialProps: { value: first } },
|
|
);
|
|
|
|
rerender({ value: { id: 1, label: "b" } });
|
|
expect(result.current).toBe(first);
|
|
});
|
|
});
|