Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #4240 from appsmithorg/perf/optimize_react-json-viewer

Browse Source 
Memoize CurrentValueViewer to prevent expensive rerenders of react JSON viewer
This commit is contained in:
Satish Gandham 2021-05-05 18:18:05 +05:30 committed by GitHub
commit abf7277d20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { memo, useRef, useState } from "react";
import styled from "styled-components";
import _ from "lodash";
import Popper from "pages/Editor/Popper";
@ -173,78 +173,91 @@ export function PreparedStatementViewer(props: {
);
}
export function CurrentValueViewer(props: {
theme: EditorTheme;
evaluatedValue: any;
hideLabel?: boolean;
preparedStatementViewer?: boolean;
}) {
const currentValueWrapperRef = React.createRef<HTMLDivElement>();
const codeWrapperRef = React.createRef<HTMLPreElement>();
export const CurrentValueViewer = memo(
function CurrentValueViewer(props: {
theme: EditorTheme;
evaluatedValue: any;
hideLabel?: boolean;
preparedStatementViewer?: boolean;
}) {
const currentValueWrapperRef = React.createRef<HTMLDivElement>();
const codeWrapperRef = React.createRef<HTMLPreElement>();
let content = (
<CodeWrapper colorTheme={props.theme} ref={codeWrapperRef}>
{"undefined"}
<ScrollIndicator containerRef={codeWrapperRef} />
</CodeWrapper>
);
if (props.evaluatedValue !== undefined) {
if (
_.isObject(props.evaluatedValue) ||
Array.isArray(props.evaluatedValue)
) {
if (props.preparedStatementViewer) {
let content = (
<CodeWrapper colorTheme={props.theme} ref={codeWrapperRef}>
{"undefined"}
<ScrollIndicator containerRef={codeWrapperRef} />
</CodeWrapper>
);
if (props.evaluatedValue !== undefined) {
if (
_.isObject(props.evaluatedValue) ||
Array.isArray(props.evaluatedValue)
) {
if (props.preparedStatementViewer) {
content = (
<CodeWrapper colorTheme={props.theme} ref={codeWrapperRef}>
<PreparedStatementViewer
evaluatedValue={props.evaluatedValue as PreparedStatementValue}
/>
<ScrollIndicator containerRef={codeWrapperRef} />
</CodeWrapper>
);
} else {
const reactJsonProps = {
theme:
props.theme === EditorTheme.DARK ? "summerfruit" : "rjv-default",
name: null,
enableClipboard: false,
displayObjectSize: false,
displayDataTypes: false,
style: {
fontSize: "12px",
},
collapsed: 2,
collapseStringsAfterLength: 20,
};
content = (
<ReactJson src={props.evaluatedValue} {...reactJsonProps} />
);
}
} else {
content = (
<CodeWrapper colorTheme={props.theme} ref={codeWrapperRef}>
<PreparedStatementViewer
evaluatedValue={props.evaluatedValue as PreparedStatementValue}
/>
{props.evaluatedValue === null
? "null"
: props.evaluatedValue.toString()}
<ScrollIndicator containerRef={codeWrapperRef} />
</CodeWrapper>
);
} else {
const reactJsonProps = {
theme:
props.theme === EditorTheme.DARK ? "summerfruit" : "rjv-default",
name: null,
enableClipboard: false,
displayObjectSize: false,
displayDataTypes: false,
style: {
fontSize: "12px",
},
collapsed: 2,
collapseStringsAfterLength: 20,
};
content = <ReactJson src={props.evaluatedValue} {...reactJsonProps} />;
}
} else {
content = (
<CodeWrapper colorTheme={props.theme} ref={codeWrapperRef}>
{props.evaluatedValue === null
? "null"
: props.evaluatedValue.toString()}
<ScrollIndicator containerRef={codeWrapperRef} />
</CodeWrapper>
);
}
}
return (
<>
{!props.hideLabel && (
<StyledTitle data-testid="evaluated-value-popup-title">
Evaluated Value
</StyledTitle>
)}
<CurrentValueWrapper colorTheme={props.theme}>
<>
{content}
<ScrollIndicator containerRef={currentValueWrapperRef} />
</>
</CurrentValueWrapper>
</>
);
}
return (
<>
{!props.hideLabel && (
<StyledTitle data-testid="evaluated-value-popup-title">
Evaluated Value
</StyledTitle>
)}
<CurrentValueWrapper colorTheme={props.theme}>
<>
{content}
<ScrollIndicator containerRef={currentValueWrapperRef} />
</>
</CurrentValueWrapper>
</>
);
},
(prevProps, nextProps) => {
return (
prevProps.theme === nextProps.theme &&
prevProps.hideLabel === nextProps.hideLabel &&
// Deep-compare evaluated values to ensure we only rerender
// when the array actually changes
_.isEqual(prevProps.evaluatedValue, nextProps.evaluatedValue)
);
},
);
function PopoverContent(props: PopoverContentProps) {
const typeTextRef = React.createRef<HTMLPreElement>();