Fix render loop in <Modal>, clean up ref merger code

This commit is contained in:
Evan Hahn 2021-10-01 18:53:00 -05:00 committed by GitHub
parent 1366d09f11
commit 893a77a3ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 36 additions and 39 deletions

View file

@ -12,6 +12,7 @@ import { Theme } from '../util/theme';
import { getClassNamesFor } from '../util/getClassNamesFor';
import { useAnimated } from '../hooks/useAnimated';
import { useHasWrapped } from '../hooks/useHasWrapped';
import { useRefMerger } from '../hooks/useRefMerger';
type PropsType = {
children: ReactNode;
@ -85,6 +86,8 @@ export function ModalWindow({
}: Readonly<PropsType>): JSX.Element {
const modalRef = useRef<HTMLDivElement | null>(null);
const refMerger = useRefMerger();
const bodyRef = useRef<HTMLDivElement | null>(null);
const [scrolled, setScrolled] = useState(false);
const [hasOverflow, setHasOverflow] = useState(false);
@ -155,10 +158,7 @@ export function ModalWindow({
const scrollTop = bodyRef.current?.scrollTop || 0;
setScrolled(scrollTop > 2);
}}
ref={bodyEl => {
measureRef(bodyEl);
bodyRef.current = bodyEl;
}}
ref={refMerger(measureRef, bodyRef)}
>
{children}
</div>