apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): missing dependency in useCallback

Browse source 
To avoid endless re-render we also have to use a constant empty array
as the initialValue.
This commit is contained in:
Julian Tölle 2020-11-07 19:14:41 +01:00
parent 15308bfb7c
commit 1e674d18c9
2 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/ReportTopArtists.tsx
View file

@ -1,12 +1,14 @@
import React, { useMemo, useState } from "react";
import { Redirect } from "react-router-dom";
import { getTopArtists } from "../api/api";
import { TimeOptions } from "../api/entities/time-options";
import { TimePreset } from "../api/entities/time-preset.enum";
import { TopArtistsOptions } from "../api/entities/top-artists-options";
import { TopArtistsItem } from "../api/entities/top-artists-item";
import { useAsync } from "../hooks/use-async";
import { useAuth } from "../hooks/use-auth";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TimeOptions } from "../api/entities/time-options";
const INITIAL_REPORT_DATA: TopArtistsItem[] = [];
export const ReportTopArtists: React.FC = () => {
const { user } = useAuth();
@ -21,7 +23,10 @@ export const ReportTopArtists: React.FC = () => {
timeOptions,
]);
const { value: report, pending: isLoading } = useAsync(fetchData, []);
const { value: report, pending: isLoading } = useAsync(
fetchData,
INITIAL_REPORT_DATA
);
const reportHasItems = !isLoading && report.length !== 0;

4
frontend/src/hooks/use-async.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from "react";
import { useCallback, useEffect, useState } from "react";
type UseAsync = <T>(
asyncFunction: () => Promise<T>,
@ -25,7 +25,7 @@ export const useAsync: UseAsync = <T extends any>(
.then((response) => setValue(response))
.catch((err) => setError(err))
.finally(() => setPending(false));
}, [asyncFunction]);
}, [asyncFunction, initialValue]);
// Call execute if we want to fire it right away.
// Otherwise execute can be called later, such as