fix(logs): prevent duplicate logs dispatch (#1934)

* fix(logs): prevent duplicate logs dispatch

* refactor: use useMountedstate hook

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
Co-authored-by: Pranay Prateek <pranay@signoz.io>

frontend/src/container/LogsAggregate/index.tsx

@@ -3,7 +3,7 @@ import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
 import dayjs from 'dayjs';
 import getStep from 'lib/getStep';
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -77,6 +77,18 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [getLogsAggregate, maxTime, minTime, liveTail]);
 
+	const graphData = useMemo(() => {
+		return {
+			labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
+			datasets: [
+				{
+					data: logsAggregate.map((s) => s.value),
+					backgroundColor: blue[4],
+				},
+			],
+		};
+	}, [logsAggregate]);
+
 	return (
 		<Container>
 			{isLoadingAggregate ? (
@@ -84,15 +96,7 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
 			) : (
 				<Graph
 					name="usage"
-					data={{
+					data={graphData}
-						labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
-						datasets: [
-							{
-								data: logsAggregate.map((s) => s.value),
-								backgroundColor: blue[4],
-							},
-						],
-					}}
 					type="bar"
 					containerHeight="100%"
 					animate

frontend/src/pages/Logs/index.tsx

@@ -6,6 +6,7 @@ import LogsAggregate from 'container/LogsAggregate';
 import LogsFilters from 'container/LogsFilters';
 import LogsSearchFilter from 'container/LogsSearchFilter';
 import LogsTable from 'container/LogsTable';
+import useMountedState from 'hooks/useMountedState';
 import useUrlQuery from 'hooks/useUrlQuery';
 import React, { memo, useEffect } from 'react';
 import { connect, useDispatch } from 'react-redux';
@@ -18,16 +19,21 @@ import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs';
 import SpaceContainer from './styles';
 
 function Logs({ getLogsFields }: LogsProps): JSX.Element {
-	const urlQuery = useUrlQuery();
+	const getMountedState = useMountedState();
 
+	const urlQuery = useUrlQuery();
 	const dispatch = useDispatch();
 
 	useEffect(() => {
-		dispatch({
+		const hasMounted = getMountedState();
-			type: SET_SEARCH_QUERY_STRING,
+
-			payload: urlQuery.get('q'),
+		if (!hasMounted) {
-		});
+			dispatch({
-	}, [dispatch, urlQuery]);
+				type: SET_SEARCH_QUERY_STRING,
+				payload: urlQuery.get('q'),
+			});
+		}
+	}, [dispatch, getMountedState, urlQuery]);
 
 	useEffect(() => {
 		getLogsFields();