onFinish | React

[Ali-Hussein-dev]

onFinish uses a stale value, any idea how to force it to use a fresh state?

const useFoo = () => {
  const [keyword, setKeyword] = React.useState<string>();
  const res = useCompletion({
    onFinish: () => {
      console.log({ keyword });  // undefined | stale value
    },
  });
  const { complete } = res;
  const onTabChange = () => {
    setKeyword("a");
    complete("...",{ body: {...} });
  };
  return res;
};

[MaxLeiter]

The final message is included in the callback:

onFinish: (message) => console.log(message)

[peterdresslar]

I think @MaxLeiter for useCompletion, there are two variables. (I could be misunderstanding the question)

So for instance this works fine:

export default function Completion() {
  const {
    completion,
    input,
    handleInputChange,
    handleSubmit,
  } = useCompletion({
    api: '/api/completion/openai',
    onFinish: (prompt: string, completion: string) => {
      console.log('onFinish is', completion);
    }
  });

Using the example onFinish: (message) => console.log(message)

... I just get the prompt back.

[MaxLeiter]

Ah, you're right -- useCompletion returns (prompt, result)

[Ali-Hussein-dev]

I came up with a workaround solution that solved my issue. It might help others.

const useFoo = () => {
  const [keyword, setKeyword] = useState<string>()
  const [isFinished, setIsFinished] = useState(false)
  const res = useCompletion({
    onFinish: () => {
      setKeyword("...")
      setIsFinished(true)
    },
  });

 const onAfterFinish=(prompt, completion)=> {
 // do something...
 }
  useEffect(() => {
    if (!isFinished || !keyword) return;
    else {
      onAfterFinish(term, res.completion);
      setIsFinished(false);
    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isFinished,  keyword])

  const { complete } = res;
  const onTabChange = () => {
    setKeyword("a");
    complete("...");
  };
  return res;
};

[peterdresslar]

Ah, I see, the question is actually about React. For what it's worth, you can get the same fresh variable with more efficient code (fewer re-renders) with React useRef.

So, making it about both React and ai:

  const [keyword, setKeyword] = React.useState<string>();
  const keywordRef = React.useRef<string>();

  // Update the ref whenever the state changes
  React.useEffect(() => {
    keywordRef.current = keyword;
  }, [keyword]);
  
  export default function Completion() {
  const {
    completion,
    // ... callback helpers
  } = useCompletion({
    onFinish: (prompt: string, completion: string) => {
      console.log('onFinish is completion is', completion); // thanks ai/react! :-)
      console.log('fresh Keyword is', keyword); // thanks react!
      // doUponCompletionHandler and so on here
    }
  });