js async function executed when referenced

Question

I'm trying to reference an async function but instead it gets executed.

const Payment = props => {
    const [buttonAction, setButtonAction] = useState(null);

    useEffect(() => {
        if(some true stuff){
            // this gets executed instead of being a reference to a function
            setButtonAction(() => createSubscription(a ? b : c ));
        }
    }, [deps...]);

    const createSubscription = async (sessionId) => {
        // code
    }
}

T.J. Crowder · Accepted Answer · 2021-11-21 10:12:58Z

4

React's useState setter functions accept either:

The data to set, or
A function to call with the most recent version of the data (see here in the documentation) that will return the data to set

By passing a function into setButtonAction, you're asking React to call that function with the most recent value of buttonAction so you can update it.

You can't directly store functions in state like that, and there's usually no reason to do so (though there are edge cases).

Some alternatives:

If you really need to store a function in state, wrap it in an object.
Use useCallback or useMemo to reuse a function, only updating it when its dependencies change
Keep it in a ref instead.

answered Nov 21, 2021 at 10:12

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

usertest Over a year ago

useCallback is suited for the logic I'm writting. I ended up using useRef(); const buttonAction = useRef(null); SETTING buttonAction .current = () => createSubscription( a? b : c ); CALLING onClick={() => professionalButtonAction.current()} . Thanks a lot.

Collectives™ on Stack Overflow

js async function executed when referenced

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related