complex-teal

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

metropolitan-bronze•12mo ago

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

complex-tealOP•12mo 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

metropolitan-bronze•12mo 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

complex-tealOP•12mo 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

metropolitan-bronze•12mo 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

complex-tealOP•12mo 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 🤝

metropolitan-bronze•12mo 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

complex-tealOP•12mo ago

Yep I'm using a FlatList

conscious-sapphire•12mo 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.

conscious-sapphire•12mo 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

conscious-sapphire•12mo 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

metropolitan-bronze•12mo 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)

conscious-sapphire•12mo 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.

complex-tealOP•12mo 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?