Optimize memo of Stream.tsx
The Stream only has to re-render when 'stream.length' changes, but could be re-rendered by a parent in scenarios where 'stream.length' has not changed. This change optimizes that scenario by only re-rendering the stream when 'stream.length' changes.
This commit is contained in:
parent
1a7af1be2a
commit
46850a8cfb
1 changed files with 33 additions and 33 deletions
|
@ -26,44 +26,44 @@ export function Stream({
|
||||||
const className = classNames("body", "stream");
|
const className = classNames("body", "stream");
|
||||||
const style: React.CSSProperties =
|
const style: React.CSSProperties =
|
||||||
endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
|
endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
|
||||||
const ul = useRef<HTMLUListElement>();
|
const ref = useRef<HTMLUListElement>();
|
||||||
const ayat = useMemo<JSX.Element[]>(() => {
|
const ul = useMemo<JSX.Element>(() => {
|
||||||
return stream.map((ayah: Quran.Ayah) => {
|
return (
|
||||||
return (
|
<ul lang={locale} className={className} style={style} ref={ref}>
|
||||||
<li key={ayah.id} className="ayah fade">
|
{stream.map((ayah: Quran.Ayah) => {
|
||||||
<span className="title">
|
return (
|
||||||
{(isPaused || endOfStream) && (
|
<li key={ayah.id} className="ayah fade">
|
||||||
<AudioControl
|
<span className="title">
|
||||||
recitation={recitation}
|
{(isPaused || endOfStream) && (
|
||||||
surah={surah}
|
<AudioControl
|
||||||
ayah={ayah}
|
recitation={recitation}
|
||||||
onEnd={turnOffSound => turnOffSound()}
|
surah={surah}
|
||||||
/>
|
ayah={ayah}
|
||||||
)}
|
onEnd={turnOffSound => turnOffSound()}
|
||||||
<span>
|
/>
|
||||||
{t(locale, "surah")} {formatNumber(surah.id, locale)}
|
)}
|
||||||
{t(locale, "comma")} {t(locale, "ayah")}{" "}
|
<span>
|
||||||
{formatNumber(ayah.id, locale)}
|
{t(locale, "surah")} {formatNumber(surah.id, locale)}
|
||||||
</span>
|
{t(locale, "comma")} {t(locale, "ayah")}{" "}
|
||||||
</span>
|
{formatNumber(ayah.id, locale)}
|
||||||
<p>{ayah.text}</p>
|
</span>
|
||||||
</li>
|
</span>
|
||||||
);
|
<p>{ayah.text}</p>
|
||||||
});
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
}, [stream.length]);
|
}, [stream.length]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const el = ul.current;
|
const el = ref.current;
|
||||||
if (el) {
|
if (el) {
|
||||||
const top = el.scrollHeight + el.scrollTop;
|
const top = 1024 + el.scrollHeight + el.scrollTop;
|
||||||
el.scrollTo({ behavior: "smooth", top });
|
el.scrollBy({ behavior: "smooth", top });
|
||||||
el.scrollIntoView({ behavior: "smooth" });
|
el.scrollIntoView({ behavior: "smooth" });
|
||||||
}
|
}
|
||||||
}, [ul.current, stream.length]);
|
}, [stream.length]);
|
||||||
|
|
||||||
return (
|
return ul;
|
||||||
<ul lang={locale} className={className} style={style} ref={ul}>
|
|
||||||
{ayat}
|
|
||||||
</ul>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue