Text Mode: Unnecessary scroll to top when the state is updated

[Marlen0307]

Hi 👋 ,
I am using the log-viewer for fetching logs from a spring boot server. I am using an interval to constantly query the endpoint for fetching the logs. I am using the text property in order to display the logs. Here is the code snippet:

function App() {
  const [logArray, setLogArray] = useState<string[]>([]);

  const fetchLogs = useCallback(async () => {
    try {
      const response = await axios.get<LogResponse>(
        `http://localhost:8081/api/logs/`
      );
      const { logs } = response.data;

      setLogText((prev) => [...prev, ...logs]);
    } catch (error) {
      console.error(error);
    }
  }, []);

  useEffect(() => {
    const id = setInterval(fetchLogs, 5000);
    return () => {
      clearInterval(id);
    };
  }, [fetchLogs]);
  return (
    <>
      {logText.length > 0 ? (
        <div
          style={{
            width: "800px",
          }}
        >
          <LazyLog
            caseInsensitive
            enableHotKeys
            enableSearch
            height="520"
            width="800"
            text={logText.join("\n")}
          />
        </div>
      ) : (
        <>Loading...</>
      )}
    </>
  )

The problem that I am facing is that every time the text prop is updated the log viewer is rerendered which causes it to scroll back to the top. Is there a workaround to this?

[melloware]

@Marlen0307 yes changing the text will cause a re-render. It sounds like you want the WebSocket mode where it updates your log or the URL mode?

<LazyLog url="http://example.log" stream />

From the docs:

If you are going to be rendering a complete file, or an endpoint which can be downloaded all at once, use the component as-is for better overall performance at the expense of slightly longer upfront load time.

If you are going to be requesting a streaming or chunked response, use the component with the stream prop of true for quicker upfront rendering as content can be decoded as it arrives.

[Marlen0307]

@melloware Thank you for the quick reply!
What you suggested is not really what I am looking for. I would like to send the request manually because I send some extra query parameters for getting chunks of the logs, in order to reduce network overload:
http://localhost:8081/api/logs/all?lastPosition=50388
Furthermore the backend does not stream the logs. It actually sends back the logs from the lastPostions to the end of the file.
Do you have any suggestions for this case?

[melloware]

Hmmm I have only been using it the same way you do with text but my logs are after the fact so i am loading the whole log at once. So once you "replace" the text its basically a normal React state change and re-renders the component. You could possibly call ScrollTo or something to scroll to a particular line!

I have never really used the URL or WebSocket mode but the seemed to be more designed for your use case. I have to admit i took over this component because you saw the main project had been basically abandoned so I am not a thorough expert on all facets of this component.

[melloware]

if you set scrollToLine={50388} does that scroll to the correct line?