React - How to call a function which is inside another callback function

Question

I have a code like below

Here I want to call the function expandUnexpandSchema from the callback function expandSchema. How this can be done? I could be able to call the loadSchemaInfo callback function from expandSchema, but that is causing all the code to execute. But I want only the particular block to be executed.

   function useSchemaState() {

const [expand, setExpand] = useKeyState('expand', false);

const expandSchema = useCallback(() => {
    setExpand((expand) => !expand);
    loadSchemaInfo();
}, [setExpand]);

const loadSchemaInfo = useCallback(
    async(connectionId, reload) => {

        // Some more lines of code
        const expanded = {};

        expandUnexpandSchema() {
            if (data) {
                Object.keys(data).forEach((schemaName) => {
                    expanded[schemaName] = expand;
                });

            };
        }
    );

};

Thanks in advance guys.

Update:

if (data) // the data here is retrieved by calling REST API, which will take lot of time if were to retrieve again. If defining expandUnexpandSchema outside of loadSchemaInfo , is there any way to retain the data by storing it in a variable with out losing it?

score 0 · Answer 1 · answered Sep 15 '20 at 12:21

You can simply define the expandUnexpandSchema function outside the loadSchemaInfo context. I don't know exactly your code's logic, but this is a possible solution:

function useSchemaState() {

    const [expand, setExpand] = useKeyState('expand', false);

    const expandSchema = useCallback(() => {
        setExpand((expand) => !expand);
        expandUnexpandSchema(data); // take data from somewhere.. I suppose you have it
    }, [setExpand]);

    const expandUnexpandSchema = (data) =>
    {
        const expanded = {};

        Object.keys(data).forEach((schemaName) => {
            expanded[schemaName] = expand;
        });

        return expanded;
    }

    const loadSchemaInfo = useCallback(
        async(connectionId, reload) => {

            // Some more lines of code

            // do something with expanded
            const expanded = expandUnexpandSchema(data);
        }
    );
};

Hi @Mihai Matei , Thanks for the response." // take data from somewhere.. I suppose you have it." The data is retrieved by calling a REST API which takes time, I want to use the data which was retireved on the first rendering, is there any way to store it in a variable and re-use it without losing it? — Sudiv, Sep 15 '20 at 12:57
Of course.. you can use the state to store it, like you did with the expand state — Mihai Matei, Sep 15 '20 at 13:27

score 0 · Answer 2 · answered Sep 15 '20 at 12:33

Define it outside loadSchemaInfo and call it both in loadSchemaInfo and expandSchema or try this:

const expandSchema = useCallback(() => {
    setExpand((expand) => !expand);
    loadSchemaInfo.expandUnexpandSchema();
}, [setExpand]);

const loadSchemaInfo = useCallback(
    async(connectionId, reload) => {

        // Some more lines of code
        const expanded = {};

        expandUnexpandSchema() {
            if (data) {
                Object.keys(data).forEach((schemaName) => {
                    expanded[schemaName] = expand;
                });

            };
        }
       loadSchemaInfo.expandUnexpandSchema = expandUnexpandSchema;
    );

};

based on Javascript call nested function

When it comes to functions, anything between the curly braces is inaccessible to the outside unless made accessible, such as through dot notation property assignment or the return statement. You can do the assignment outside or inside the outer function, but either way it requires an outside action, the minimum being to run the outer function once. – Magnus Lind Oxlund Jun 2 '19 at 12:21

React - How to call a function which is inside another callback function

2 Answers2