github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 17:26:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

perf: use deferred value hook to increase performance

Browse source 
The useDeferredValue hook renders the state change in the background and only applies it if the current value is the newest one.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-07-05 21:29:33 +02:00
parent 4e497089f2
commit a303bb261f
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/render-page/render-page-content.tsx
View file

@ -16,13 +16,15 @@ import { CommunicationMessageType, RendererType } from './window-post-message-co
import { countWords } from './word-counter' import { countWords } from './word-counter'
import type { SlideOptions } from '@hedgedoc/commons' import type { SlideOptions } from '@hedgedoc/commons'
import { EventEmitter2 } from 'eventemitter2' import { EventEmitter2 } from 'eventemitter2'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
/** /**
* Wraps the markdown rendering in an iframe. * Wraps the markdown rendering in an iframe.
*/ */
export const RenderPageContent: React.FC = () => { export const RenderPageContent: React.FC = () => {
const [markdownContentLines, setMarkdownContentLines] = useState<string[]>([]) const [wantedMarkdownContentLines, setWantedMarkdownContentLines] = useState<string[]>([])
const deferredMarkdownContentLines = useDeferredValue(wantedMarkdownContentLines)
const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 }) const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
const [baseConfiguration, setBaseConfiguration] = useState<BaseConfiguration | undefined>(undefined) const [baseConfiguration, setBaseConfiguration] = useState<BaseConfiguration | undefined>(undefined)
const communicator = useRendererToEditorCommunicator() const communicator = useRendererToEditorCommunicator()
@ -49,7 +51,7 @@ export const RenderPageContent: React.FC = () => {
useRendererReceiveHandler( useRendererReceiveHandler(
CommunicationMessageType.SET_MARKDOWN_CONTENT, CommunicationMessageType.SET_MARKDOWN_CONTENT,
useCallback((values) => setMarkdownContentLines(values.content), []) useCallback((values) => setWantedMarkdownContentLines(values.content), [])
) )
useRendererReceiveHandler( useRendererReceiveHandler(
@ -119,7 +121,7 @@ export const RenderPageContent: React.FC = () => {
case RendererType.DOCUMENT: case RendererType.DOCUMENT:
return ( return (
<DocumentMarkdownRenderer <DocumentMarkdownRenderer
markdownContentLines={markdownContentLines} markdownContentLines={deferredMarkdownContentLines}
onMakeScrollSource={onMakeScrollSource} onMakeScrollSource={onMakeScrollSource}
scrollState={scrollState} scrollState={scrollState}
onScroll={onScroll} onScroll={onScroll}
@ -131,7 +133,7 @@ export const RenderPageContent: React.FC = () => {
case RendererType.SLIDESHOW: case RendererType.SLIDESHOW:
return ( return (
<SlideshowMarkdownRenderer <SlideshowMarkdownRenderer
markdownContentLines={markdownContentLines} markdownContentLines={deferredMarkdownContentLines}
baseUrl={baseConfiguration.baseUrl} baseUrl={baseConfiguration.baseUrl}
newLinesAreBreaks={newLinesAreBreaks} newLinesAreBreaks={newLinesAreBreaks}
slideOptions={slideOptions} slideOptions={slideOptions}
@ -140,7 +142,7 @@ export const RenderPageContent: React.FC = () => {
case RendererType.SIMPLE: case RendererType.SIMPLE:
return ( return (
<SimpleMarkdownRenderer <SimpleMarkdownRenderer
markdownContentLines={markdownContentLines} markdownContentLines={deferredMarkdownContentLines}
baseUrl={baseConfiguration.baseUrl} baseUrl={baseConfiguration.baseUrl}
newLinesAreBreaks={newLinesAreBreaks} newLinesAreBreaks={newLinesAreBreaks}
onHeightChange={onHeightChange} onHeightChange={onHeightChange}
@ -151,7 +153,7 @@ export const RenderPageContent: React.FC = () => {
} }
}, [ }, [
baseConfiguration, baseConfiguration,
markdownContentLines, deferredMarkdownContentLines,
newLinesAreBreaks, newLinesAreBreaks,
onHeightChange, onHeightChange,
onMakeScrollSource, onMakeScrollSource,