Setting React hooks state before function call

Question

Im having trouble setting page = 1 before calling the handleSearchClick function in resetStates. Currently when resetStates is being called (which is after a search button is clicked) it does not reset page to 1 on the first click but on the second search click it does.

I tried using a async await but thats not reseting page to 1 before handleSearchClick. How do I reset page to 1 before the function call? Any feedback is appreciated.

This is what Im currently doing:

const resetStates = async () => {
            const promise1 = setHasMore(true);
            const promise2 = await setPage(1);
            Promise.all([promise1, promise2])
                .then(() => {
                 /* At this point I want page to equal 1 */
                    handleSearchClick(); 
                })
                .catch(error => {
                    throw new Error(error);
                });
        };

    /**
     * Handles event on search click
     */
    const handleSearchClick = async () => {
        setItems([]);
        setIsLoading(true);
        const base = handleBaseId();
        const items = await fetchSearchPayload(page, value, option, base);
        setIsLoading(false);
        setInitialLoad(true);
        setItems(items);
        console.log('On Click', { option }, { page });
    };

 <SearchBar
    onClickButton={resetStates}
    onValueChange={handleChange}
    value={value}
    pageNum={page}
    onEnter={handleSearchOnEnter}
  />

Shubham Khatri · Accepted Answer · 2019-05-20T05:55:35.533

state updater is asynchronous, but it doesn't return you a promise, so you cant use await to wait for the promise to complete. Instead you can pass on the page value as an argument

    const resetStates = async () => {
            setHasMore(true);
            setPage(1);
            handleSearchClick(1); 
    };

    /**
     * Handles event on search click
     */
    const handleSearchClick = async (page) => {
        setItems([]);
        setIsLoading(true);
        const base = handleBaseId();
        const items = await fetchSearchPayload(page, value, option, base);
        setIsLoading(false);
        setInitialLoad(true);
        setItems(items);
        console.log('On Click', { option }, { page });
    };

 <SearchBar
    onClickButton={resetStates}
    onValueChange={handleChange}
    value={value}
    pageNum={page}
    onEnter={handleSearchOnEnter}
  />

or else you can make use of useEffect to wait for state update

const prevPage = usePrevious(page);
const prevHasMore = usePrevious(hasMore);
const initialRender = useRef(true);
useEffect(() => {
   if(initialRender.current !== true) {
        // you can check for hasMore also here
        if((prevPage !== page && page == 1) && (prevHasMore !== hasMore && hasMore === true)) {
            handleSearchClick();
        }
   }
}, [hasMore, page])

const resetStates = async () => {
        setHasMore(true);
        setPage(1);

};

/**
 * Handles event on search click
 */
const handleSearchClick = async (page) => {
    setItems([]);
    setIsLoading(true);
    const base = handleBaseId();
    const items = await fetchSearchPayload(page, value, option, base);
    setIsLoading(false);
    setInitialLoad(true);
    setItems(items);
    console.log('On Click', { option }, { page });
};

You can refer the implementation of usePrevious from the below post

How to compare oldValues and newValues on React Hooks useEffect?

page is a state. I have it initialized as `const [page, setPage] = React.useState(1);` if I pass 1 as an argument it wont be updated to state. is there a way I can reset it to 1 and not pass a hardcoded number ? — CatGirl19, May 20 '19 at 05:51

Setting React hooks state before function call

1 Answers1