Avoid Error: Calling setState synchronously within an effect can trigger cascading renders

Question

Here is my implementation, is there a better way to do this:  const supabase = createClient();
  const {
    data: user,
    error,
    isLoading,
    mutate,
  } = useSWR("user", async () => fetcher(supabase, uid));

const [email, setEmail] = useState("");
  const [fullname, setFullname] = useState("");
  useDirty(email !== user?.email || fullname !== user?.fullname);

useEffect(() => {
    if (!user) return;

setEmail(user?.email);
    setFullname(user?.fullname);
  }, [user]);Is the correct way to create a child component with a key

Luis · Answer

You don’t need an effect for this.

SWR will keep your user data up to date, and always in sync as long as the SWR key contains all the data used in the request. Add uid to the key

Also, what are you trying to achieve?

Do you pass the data down to a component that renders the user data?

Avoid Error: Calling setState synchronously within an effect can trigger cascading renders

1 Reply