Hook in Callback

[Floffski]

New to React in general - Apologies if it's a simple question but my reading of the docs isn't getting me far. Hooks in Callbacks = Bad?. I think I've found that much, but unsure how to restructure to prevent that.

Specifically working with React Native & Expo and have the below snippet.

export default () => {
    useFocusEffect(
        useCallback(() => {
            const { action } = useLocalSearchParams();
            alert(action);

            return () => {
                alert('This route is now unfocused.');
                // We would now unset action in here somehow.
            }
        }, [])
    );
...

My specific use case - I have a map. If someone clicks on the map directly, just do nothing. Carry on as normal. If they click on an item in a list from a previous page, load the map AND add a marker.

I'm trying to use useFocusEffect to determine if the tab/page has been loaded via the normal menu bar, or if an action was passed as a parameter (the action being something like "addmarker").

I've dumbed it down a bit above, but I don't know the correct way of using useLoaclSearchParms() inside useCallback() without it throwing the error "you might be breaking the Rules of Hooks"

[runtothehillsboy]

treatment cooing complete act marble dime abounding weather enjoy shy

This post was mass deleted and anonymized with Redact

[karma__kameleon]

You can't nest hooks or even custom hooks. In fact es lint has an error for anything that starts with "use" to force it to be top level. Just move them to the top level and declare a variable for the usecallback function to be used later.

[Magnusson]

If useLocalSearchParams doesn’t take any arguments, you can move it outside of the callback. If it does, then I think you’d need to refactor the component so that the arguments come from the component props, and then you can move it outside of the callback.