How to combine useQueries with useEffect to perform expensive calculation when data changes?

[cneumann]

Hello,
I have an application where the user can select from a number of datasets they want to visualize. To that end I keep the selected dataset ids (Array<string>) and use map to produce the query options for useQueries.
When the loaded data changes I would like to trigger some (expensive) calculations on that data. However, passing the result of useQueries to useEffect causes the effect to run on every render - it looks like array returned by useQueries has a new identity each time the hook is called and triggers the effect that has it as a dependency. This happens even if I keep the useQueries argument stable by passing it wrapping it in useMemo first, so that it only produces a new value when the selected datasets actually change.

To make this more concrete, it looks roughly like this.

Trivial custom hook that wraps useQueries:

function useDatasets(datasetIds: string[]) {
    const queries = useMemo(() => {
        return datasetIds.map((id) => ({
            queryKey: ["dataset", id],
            queryFn: fetchDataset
        }));
    }, [datasetIds]);

    return useQueries(queries);
}

Component that uses custom hook and wants to run some calculation when the data changes:

function SomeComponent(props): JSX.Element {
    const { datasetIds } = props;

    const [someState, setSomeState] = useState();
    const datasets = useDatasets(datasetIds);

    // This effect runs every time SomeComponent renders even though the loaded data is unchanged
    useEffect(() => {
        const isSuccess = datasets.every((result) => result.isSuccess);
        const isLoading = datasets.some((result) => result.isLoading);

        if (isSuccess && !isLoading) {
            const data = datasets.filter((result) => result.data != null).map((result) => result.data);
           
            // perform calculation and set state
           const newSomeState = calcSomeState(data);
           setSomeState(newSomeState);
        }

    }, [datasets, setSomeState]);
}

Am I looking at this problem the wrong way? Is there a way to get the desired behavior that does not depend on useQueries returning arrays with the same object identity on each call? Thanks!

[TkDodo]

it looks like array returned by useQueries has a new identity each time the hook is called and triggers the effect that has it as a dependency.

yes, it does. There's also no need to add useMemo to the queries input, that doesn't change that.

apart from that, data transformation shouldn't need useEffect and state. What you'd probably want is another useMemo instead of the useEffect. But this would suffer from the same problem: useMemo would also just run on every render.

So, long story short: There is no good, built-in way to aggregate data over a dynamic array from useQueries. If it helps, each data object inside your array will be kept referentially stable unless something changes inside of it. So you could get away with something like use-deep-compare-effect, but it's not great

[cneumann]

Thank you for your answer! I've found a workaround, but it seems a little fragile: I've simply pushed the useEffect driving the calculation into a renderless child component and wrapped it in memo (note: not useMemo).

export default function SomeComponent(props): JSX.Element | null {
    const { datasetIds, setSomeState } = props;

    // same useDatasets and useEffect as before

   return null;
}

Parent component:

const SomeComponentMemo = memo(SomeComponent);

export default function ParentComponent(props) {
    const { datasetIds } = props;
    const [someState, setSomeState] = useState();

    return <SomeComponentMemo datasetIds={datasetIds} setSomeState={setSomeState} />;
}

Logging output from the useEffect now shows it now only runs when the datasets change. I guess this happens to work because SomeComponent only renders when a prop changes or the useQueries hook triggers it, whereas previously other stuff in SomeComponent (which I had elided for simplicity) could also cause renders.