3DJakob / react-tinder-card-demo

This is a demo for react-tinder-card which is a react module for making elements behave like cards in the ever so popular dating app tinder.

Home Page:https://3djakob.github.io/react-tinder-card-demo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

advanced example: usage of useMemo and useEffect at the same time

carlochrist opened this issue · comments

Hi!

I use TinderCard with getting data from firebase via useEffect first. The example is shown with a local data-array - where it's easy to initially use the useMemo-hook (to get the binding to the TinderCard-html-element later).

In my case, with getting asynchronous data from a database first and storing them in a useState-hook:
const [users, setUsers] = useState([] as any[]);

… it's not possible to initialize the useMemo-hook, because the data isn’t loaded yet (as both hooks fire at the same time I guess).

I just want to achieve to do the swipe-animation when a button is pressed, but I can’t get the binding without useMemo (or?).
Any ideas how I can manage this? I already thought about something like putting a short timeout before executing useMemo, but I don’t know how to do this.

Thanks a lot in advance! :)

Since you closed this I am assuming you solved it but this should not be an issue. Most likely you tried to initiate the refs from null instead of an empty array which will cause looping functions to fail.

Thanks for your reply. Yes, I solved it by just passing my users as dependency to the useMemo-hook.