React function component state is not available at ComponentWillUnmount

Question

I need to make api call when ComponentWillUnmount. Iam using state variable to set api request. when i access the state variable from ComponentWillUnmount. the state value is default one but am expecting recently updated state.


    export const sampleComponent: React.FC<IProps> = (props: IProps) => {
    const [apiValue, setAipValue] = useState("");
    const [updateRec] = useMutation(UPDATE_REC);
    ....
    setApiValue
    ....
    
    useEffect(()=>{
    return () => {callApi(apiValue)}
    }, []);
    }
    
    const callApi = (input) => {
    updateRec({
    variables : {
    data : input
    }
    });
    }

Thanks for your time @Tom I have added the code. it is not exact one. and but code will look like this. — paranthaman ..sam, Sep 03 '22 at 18:17

score 1 · Accepted Answer · answered Sep 03 '22 at 18:17

Since your useEffect has empty dependencies ([]), the apiValue that is binded is only the inital value of apiValue

A solution would be to use a ref to track value

const apiValueRef = useRef();

apiValueRef.current = apiValue;

useEffect(() => {
  return () => {
    callApi(apiValueRef.current);
  }
}, []);

React function component state is not available at ComponentWillUnmount

1 Answers1