harsh-harlequin

How to compare previous vs updated data?

Using Query inside a custom hook in a React Native/Expo app. A bit new to React Query so wanted to know best practices to manage this.

import { useQuery } from "@tanstack/react-query";

export function useLiverunsData() {
  return useQuery({
    queryKey: ["liveruns"],
    queryFn: () => fetch("/api/liveruns").then((res) => res.json()),
    refetchInterval: 5000,
    staleTime: 5000,
  });
}

import { useQuery } from "@tanstack/react-query";

export function useLiverunsData() {
  return useQuery({
    queryKey: ["liveruns"],
    queryFn: () => fetch("/api/liveruns").then((res) => res.json()),
    refetchInterval: 5000,
    staleTime: 5000,
  });
}

Each object in the response contains a worldId which acts as the unique key. I want to compare the previous JSON to the new JSON, so I can identify which items have been removed/added and write animations in regards to them appearing and disappearing. What would be the best way to approach this? Thank you in advance :peepoHappy:

14 Replies

other-emerald•15mo ago

I never used animation for react/react-native but can you not animate it before mount/unmount?

harsh-harlequinOP•15mo ago

I kind of want to compare the JSON using the index it's placed on, etc. to have specific animations of the list. Right now with the animations if an item is removed it tends to refresh everything, which is why I wanted to see if there's a way to compare current index w/ previous index

other-emerald•15mo ago

technically you can keep a copy of the list, to compare to after new data, but that's too much work for nothing imo

harsh-harlequinOP•15mo ago

Yep, + did not feel the most performant since it kind of felt like I was making the query redundant. Maybe I could make a map of the worldId along with the index :Hmm: and then compare that

other-emerald•15mo ago

idk what you mean by "to have specific animations of the list" can you not suffice by choosing one animation for mounting and one for unmounting? cuz, reanimated has layout animations: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

harsh-harlequinOP•15mo ago

[1]            ->            [1]
[2]            ->            [4]
[3]            ->            [3]
[4]            ->         [Removed]

[1]            ->            [1]
[2]            ->            [4]
[3]            ->            [3]
[4]            ->         [Removed]

It's kind of like this, the order of the JSON sometimes changes so it tend to be a bit weird w/ how the indexes were mapped. But I suppose I could refactor it a bit to see if I can get it to work better. I'll check this out. Either way of course appreciate the help 🤝

other-emerald•15mo ago

this also depends on what you use I usually show lists with FlatList/FlashList and I usually dont use animations, but thats another thing

harsh-harlequinOP•15mo ago

Yep I'm using a FlatList

genetic-orange•15mo ago

Feels more like a rendering and animation issue then a query issue. That query you wrote looks fine as a list query. I'd use the worldId as a key prop for the components that you want to animate and have the animation logic encapsulated inside that. If this was web I'd be recommending Framer Motion but I don't think it supports native.

genetic-orange•15mo ago

On the index thing, I'd be cautios, you generenally want a stable key basied on the data you get not the index - that could change https://react.dev/learn/rendering-lists#why-does-react-need-keys

Rendering Lists – React

The library for web and native user interfaces

genetic-orange•15mo ago

Keep all your props for each run primitive and use React.memo as well, that'll prevent each object changing if the props are the same

other-emerald•15mo ago

on native it's even more complicated with the keys, as, for FlatList you need to pass a keyExtractor, but then there's FlashList which tells you to throw what you know out of the window (as it uses a recycler view, which reuses the elements for performance)

genetic-orange•15mo ago

Oh fun I guess that should be enough? This feels like there's a blogpost somewhere with too much detail about react native preformance lol.

harsh-harlequinOP•15mo ago

:Hmm: makes sense. I'll look into worldId + React.memo once.

Gaming

Programming

How to compare previous vs updated data?

Did you find this page helpful?