Prism

[little plinth]

When I display large JSON files in the Prism component, the application starts to become extremely slow. How can I optimize this?

<Card
  shadow="sm"
  padding="xs"
  style={{ width: rem(1350) }}
>
  <p>Response Body</p>
  <Prism language="json">{formatJson(selectedLog.response_body)}</Prism>
</Card>

[tropic void]

I do not think that you can, large strings require more time to parse and render

[little plinth]

Okey. I have formatted the string now maximum 10000 characters. So now everything goes without problems

[sonic ice]

is formatJson being called every render? you could perhaps use useMemo

[little plinth]

  function formatJson(data: string): string {
    if (!data) return '';
    const parsed = JSON.parse(data);
    const json = JSON.stringify(parsed , null, 2);
    return json;
}

[sonic ice]

what i mean is every time state or props update, a component re runs, including functions within it

so if you have state in this or any parents, it will be executing the format every time

// before return
    const formattedJson = useMemo(() => formatJson(selectedLog.response_body), [selectedLog.response_body])

<Prism language="json">{formattedJson}</Prism>

what you can do is useMemo to make it only run when a variable change is detected

https://react.dev/reference/react/useMemo

[little plinth]

Won't this be overwritten every time I open another file/log?

[sonic ice]

yes, this will run every time you change the selectedLog.response_body variable. however currently the formatJson will run any time any variable changes in your component tree, which will cause lag