GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +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,
} = useConfig();
const [editorWidth, setEditorWidth] = React.useState("auto");
const [value, setValue] = React.useState(
JSON.stringify(JSON.parse(json), null, 2)
);
const [value, setValue] = React.useState("");
const [error, setError] = React.useState({
message: "",
isExpanded: true,
@ -53,32 +51,28 @@ const JsonEditor: React.FC = () => {
const dom = document.querySelector(".ace_scroller");
if (dom) resizeObserver.observe(dom);
return () => {
resizeObserver.disconnect();
};
}, [json]);
return () => resizeObserver.disconnect();
}, []);
React.useEffect(() => {
if (settings.autoformat) {
return setValue(JSON.stringify(JSON.parse(json), null, 2));
}
setValue(JSON.stringify(JSON.parse(json), null, 2));
} else {
setValue(json);
}
}, [settings.autoformat, json]);
React.useEffect(() => {
const formatTimer = setTimeout(() => {
try {
if (value === "") return setError((err) => ({ ...err, message: "" }));
const parsedJson = parseJson(value);
if (settings.autoformat) {
setValue(JSON.stringify(parsedJson, null, 2));
} else {
setValue(value);
if (value) {
parseJson(json);
dispatch({
type: ConfigActionType.SET_JSON,
payload: value,
});
}
dispatch({ type: ConfigActionType.SET_JSON, payload: value });
setError((err) => ({ ...err, message: "" }));
} catch (jsonError: any) {
setError((err) => ({ ...err, message: jsonError.message }));
@ -86,7 +80,7 @@ const JsonEditor: React.FC = () => {
}, 1800);
return () => clearTimeout(formatTimer);
}, [value, settings.autoformat, dispatch]);
}, [value, dispatch]);
return (
<StyledEditorWrapper>