Updating state inside useCallback - React JS

user_11802407 0
Viewed 285

How can I restructure this code to allow a state update inside the useCallback function?

Here's what is executed first:

useEffect(() => {
    getData();
}, [getData]); // errors if getData is left (missing dependency error)

In the getData function, I pass a state variable (lastDoc) to getSomething() as a parameter. It stores the last document/database row for pagination.

const [lastDoc, setLastDoc] = useState(null);

const getData = useCallback(async() => {
    const data = await getSomething(lastDoc);
    setLastDoc(data.lastDoc); // useSate function
}, [getSomething, lastDoc]);

This, at the moment, just causes an infinite loop where the getData function is re-rendered once setLastDoc updates the lastDoc variable, as getData has lastDoc as a dependency. If I remove the lastDoc dependency, I get the missing dependency error, which I understand to be an important error to listen to.

react-hooks reactjs
1 Answers

I think a null-check might be sufficient.

useEffect(() => {
    if(lastDoc === null){
        getData();
    }
}, [getData, lastDoc]);
user_120575120
Related