https://supabase.com/ logo
Join Discord
Powered by
Any reason why it says Can't perform a React stat...
# javascript
x
Any reason why it says Can't perform a React state update on an unmounted component for this.
Copy code
useEffect(() => {
    const fetchJobs = async () => {
      setLoading(true);
      setErrorMessage(false);
      try {
        const { data, error } = await supabase.from("jobs");

        if (error) throw error;
        setJobs(data);
      } catch (error) {
        setJobs(null);
        setErrorMessage(true);
      } finally {
        setLoading(false);
      }
    };
    fetchJobs();
    // return () => fetchJobs();
  }, []);
c
This is not a Supabase issue - it's a React-specific problem with the implementation of this hook
Basically, you call fetchJobs when your component is mounted, but fetching those jobs takes some time (hence, the async keyword on your fetchJobs function)
By the time it returns, the component which called the hook is no longer mounted, but the callbacks you have defined in the hook are still alive and get called when the fetchJobs function returns a result
so you end up trying to set the state of a component that is no longer mounted
This MR shows one way of how to fix this kind of problem:
(you basically keep track of whether the component has been unmounted while waiting for the network call to return and if it has - you don't set any state)
x
is it like this?
Copy code
const isMounted = useRef(true);
  useEffect(() => {
    const fetchJobs = async () => {
      setLoading(true);
      setErrorMessage(false);
      try {
        const { data, error } = await supabase
          .from("jobs")
          .select("*, profiles:owner(username)");

        if (error) throw error;
        setJobs(data);
        console.log(data);
      } catch (error) {
        setJobs(null);
        console.log(error.message);
        setErrorMessage(true);
      } finally {
        setLoading(false);
      }
    };
    fetchJobs();
    return () => (isMounted.current = false);
  }, []);
c
you still need to check if isMounted is true before calling any of the state changing methods AFTER await superbase.from...
x
so before setJobs?
Copy code
const isMounted = useRef(true);
  useEffect(() => {
    const fetchJobs = async () => {
      setLoading(true);
      setErrorMessage(false);
      try {
        const { data, error } = await supabase
          .from("jobs")
          .select("*, profiles:owner(username)");
        if (isMounted) {
          if (error) throw error;
          setJobs(data);
        }
      } catch (error) {
        setJobs(null);
        console.log(error.message);
        setErrorMessage(true);
      } finally {
        setLoading(false);
      }
    };
    if (isMounted) {
      fetchJobs();
    }
    return () => (isMounted.current = false);
  }, []);
i still get the error
oh nvm i solved it
i realized you meant catch and finally too
PreviousNext
Powered by