GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve useEffect perf

Browse Source
This commit is contained in:
AykutSarac 2022-04-30 20:07:58 +03:00
parent 5b24e20d05
commit d01858b0fe
1 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/containers/JsonEditor/index.tsx
View File

@ -31,9 +31,7 @@ const JsonEditor: React.FC = () => {
dispatch, dispatch,
} = useConfig(); } = useConfig();
const [editorWidth, setEditorWidth] = React.useState("auto"); const [editorWidth, setEditorWidth] = React.useState("auto");
const [value, setValue] = React.useState( const [value, setValue] = React.useState("");
JSON.stringify(JSON.parse(json), null, 2)
);
const [error, setError] = React.useState({ const [error, setError] = React.useState({
message: "", message: "",
isExpanded: true, isExpanded: true,
@ -53,32 +51,28 @@ const JsonEditor: React.FC = () => {
const dom = document.querySelector(".ace_scroller"); const dom = document.querySelector(".ace_scroller");
if (dom) resizeObserver.observe(dom); if (dom) resizeObserver.observe(dom);
return () => { return () => resizeObserver.disconnect();
resizeObserver.disconnect(); }, []);
};
}, [json]);
React.useEffect(() => { React.useEffect(() => {
if (settings.autoformat) { if (settings.autoformat) {
return setValue(JSON.stringify(JSON.parse(json), null, 2)); setValue(JSON.stringify(JSON.parse(json), null, 2));
} } else {
setValue(json); setValue(json);
}
}, [settings.autoformat, json]); }, [settings.autoformat, json]);
React.useEffect(() => { React.useEffect(() => {
const formatTimer = setTimeout(() => { const formatTimer = setTimeout(() => {
try { try {
if (value === "") return setError((err) => ({ ...err, message: "" })); if (value) {
const parsedJson = parseJson(value); parseJson(json);
dispatch({
if (settings.autoformat) { type: ConfigActionType.SET_JSON,
setValue(JSON.stringify(parsedJson, null, 2)); payload: value,
} else { });
setValue(value);
} }
dispatch({ type: ConfigActionType.SET_JSON, payload: value });
setError((err) => ({ ...err, message: "" })); setError((err) => ({ ...err, message: "" }));
} catch (jsonError: any) { } catch (jsonError: any) {
setError((err) => ({ ...err, message: jsonError.message })); setError((err) => ({ ...err, message: jsonError.message }));
@ -86,7 +80,7 @@ const JsonEditor: React.FC = () => {
}, 1800); }, 1800);
return () => clearTimeout(formatTimer); return () => clearTimeout(formatTimer);
}, [value, settings.autoformat, dispatch]); }, [value, dispatch]);
return ( return (
<StyledEditorWrapper> <StyledEditorWrapper>