Why can't I get the latest value of useState in subscribe?

[ru88s]

Why can't I get the latest value of useState in subscribe?
I want to use the latest value when data is added.

import { useEffect, useState } from "react";
import { useLocalStorage } from "react-use";
import { supabase } from "src/lib/initSupabase";

const Demo = () => {
  const [editMode, setEditMode] = useState(false);
  const [commentTracking, setCommentTracking] = useLocalStorage("commentTracking", false);

  useEffect(() => {
    supabase
      .from("comments")
      .on("INSERT", (payload) => {
        console.log(editModeParent);
        console.log(commentTracking);
      })
      .subscribe();
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          return setEditMode(!editMode);
        }}
      >
        Button1
      </button>
      <button
        onClick={() => {
          return setCommentTracking(!commentTracking);
        }}
      >
        Button2
      </button>
    </div>
  );
};

[VictorPeralta]

This is an issue with stale closure in useEffect. As your code stands, the useEffect is only executed once after initial mount, and the values of your state will remain as it was when the effect ran. To fix this, add editMode to your dependency array

Here's a blog post that explains further

[ru88s]

@VictorPeralta Thanks!
When I add editMode to the array in this code and insert it, I get console.log output over and over again.
It is not possible to get the exact value.

import { useEffect, useState } from "react";
import { useLocalStorage } from "react-use";
import { supabase } from "src/lib/initSupabase";

const Demo = () => {
  const [editMode, setEditMode] = useState(false);
  const [commentTracking, setCommentTracking] = useLocalStorage("commentTracking", false);

  useEffect(() => {
    supabase
      .from("comments")
      .on("INSERT", (payload) => {
        console.log("commentTracking: " + commentTracking);
      })
      .subscribe();
  }, [editMode, commentTracking]);

  return (
    <div>
      <button
        onClick={() => {
          return setEditMode(!editMode);
        }}
      >
        Button1
      </button>
      <button
        onClick={() => {
          return setCommentTracking(!commentTracking);
        }}
      >
        Button2
      </button>
    </div>
  );
};

[ru88s]

@GaryAustin1 Thank you for your help many times.
I tried to do this but could not get the changed value.

@VictorPeralta Thanks. I added removeSubscription.
Would this be the correct code for performance?

import { useEffect, useState } from "react";
import { supabase } from "src/lib/initSupabase";
import TextareaAutosize from "react-textarea-autosize";
import { scroller } from "react-scroll";

const Demo = () => {
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    const mySubscription = supabase
      .from("comments")
      .on("INSERT", (payload) => {
        editModeCheck(payload);
      })
      .subscribe();

    return () => {
      if (mySubscription) supabase.removeSubscription(mySubscription);
    };
  }, []);

  const editModeCheck = (payload: any) => {
    console.log("editMode: " + editMode);
    if (!editMode) {
      scroller.scrollTo(String(payload.new.id), {});
    }
  };

  const dbInsert = async () => {
    const { data, error } = await supabase.from("comments").insert([
      {
        body: "test",
      },
    ]);
  };

  return (
    <div>
      <TextareaAutosize
        onFocus={() => {
          setEditMode(true);
        }}
        onBlur={() => {
          setEditMode(false);
        }}
      />
      <button
        onClick={() => {
          return dbInsert();
        }}
      >
        Button
      </button>
    </div>
  );
};

[VictorPeralta]

Your value won't change this way because of the same closure issue as you had before. To fix this, move the function declaration into the effect, or wrap the function in useCallback, with editMode in the useCallback dependency array and add it to the useEffect dependency array.

[VictorPeralta]

Also editMode should be included in the useEffect dependency array if you declare the function inside the effect

[ru88s]

@VictorPeralta Thanks.
If you do this, the subscription will not work because it will be removedSubscription at a bad time.
I'm looking into useCallback, but I don't know how to use it properly. I'm sorry.

useEffect(() => {
    const mySubscription = supabase
      .from("comments")
      .on("INSERT", (payload) => {
        editModeCheck(payload);
      })
      .subscribe();

    return () => {
      if (mySubscription) supabase.removeSubscription(mySubscription);
    };
  }, [editMode]);

[VictorPeralta]

Now that I see what you're trying to do, it might be easier to accomplish it with useRef instead of useState