Call function only after multiple states have completed updating

Question

Logic:

I have a dialog for converting units. It has two stages of choice for the user: units to convert from and units to convert to. I keep this stage as a state, dialogStage, for maintainability as I'm likely going to need to reference what stage the dialog is in for more features in the future. Right now it's being used to determine what action to take based on what unit is clicked.

I also have a state, dialogUnits, that causes the component to rerender when it's updated. It's an array of JSX elements and it's updated via either foundUnitsArray or convertToUnitsArray, depending on what stage the dialog is at. Currently both states, dialogStage and dialogUnits, are updated at the same moment the problem occurs.

Problem:

When choosing the convertTo units, displayConversionTo() was still being called, as though dialogStage was still set to 'initial' rather than 'concertTo'. Some debugging led to confusion as to why the if (dialogStage == 'initial') was true when I'd set the state to 'convertTo'.

I believe that my problem was that the dialogStage state wasn't updated in time when handleUnitClick() was called as it's asynchronous. So I set up a new useEffect that's only called when dialogStage is updated.

The problem now is that the dialog shows no 'convertTo' units after the initial selection. I believe it's now because dialogUnits hasn't updated in time? I've swapped my original problem from one state not being ready to another state not being ready.

Question

How do I wait until both states are updated before continuing to call a function here (e.g. handleUnitClick()?).

Or have I mistaken what the problem is?

I'm new to react and, so far, I'm only familiar with the practice of state updates automatically rerendering a component when ready, unless overridden. Updating dialogUnits was displaying new units in the dialog until I tried to update it only when dialogStage was ready. It feels like an either/or situation right now (in terms of waiting for states to be updated) and it's quite possible I've overlooked something more obvious, as it doesn't seem to fit to be listening for state updates when so much of ReactJs is built around that already being catered for with rerenders, etc.

Component code:

function DialogConvert(props) {

    const units = props.pageUnits;

    const [dialogUnits, setDialogUnits] = useState([]);
    const [dialogStage, setDialogStage] = useState('initial');

    let foundUnitsArray = [];
    let convertToUnitsArray = [];

    units.unitsFound.forEach(element => {
        foundUnitsArray.push(<DialogGroupChoice homogName={element} pcbOnClick={handleUnitClick} />);
    });

    useEffect(() => {
        setDialogUnits(foundUnitsArray);
    }, []);


    useEffect(() => {
        if (dialogStage == "convertTo") {
            setDialogUnits(convertToUnitsArray);
        }
    }, [dialogStage]);
    
    
    function handleClickClose(event) {
        setDialogStage('initial');
        props.callbackFunction("none");
    }


    function handleUnitClick(homogName) {
        if (dialogStage == "initial") {
            // getConversionChoices is an external function that returns an array. This returns fine and as expected
            const choices = getConversionChoices(homogName);
            displayConversionTo(choices);
        } else if (dialogStage == "convertTo") {
            // Can't get this far
            // Will call a function not displayed here once it works
        }
    }


    function displayConversionTo(choices) {
        let canConvertTo = choices[0]["canconvertto"];
        if (canConvertTo.length > 0) {
            canConvertTo.forEach(element => {
                convertToUnitsArray.push(<DialogGroupChoice homogName={element} pcbOnClick={handleUnitClick} />);
            });
            setDialogStage('convertTo');
        }
    }
    

    return (
        <React.Fragment>
            <div className="dialog dialog__convertunits" style={divStyle}>
                <h2 className="dialogheader">Convert Which unit?</h2>
                <div className='js-dialogspace-convertunits'>
                <ul className="list list__convertunits">
                    {dialogUnits}
                </ul>
                </div>
                <button className='button button__under js-close-dialog' onClick={handleClickClose}>Close</button>
            </div>
        </React.Fragment>
    )
}

I think you can use callbacks for `useState` or `setState` for what you are describing. Please have a look at this question. Maybe it helps you. https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react — dns_nx, Aug 14 '20 at 11:44
@dns_nx Thanks. I'm using a functional component and its `useState` hook equivalent, `useEffect`, for state callbacks. See code example — biscuitstack, Aug 14 '20 at 12:52
@biscuitstack please create [mcve] if possible. Though the explanation seems good, it will help to run the code to see the issue and help it to understand better. — Sunil Chaudhary, Aug 15 '20 at 12:40
We need reproductive example to sort this out.Can you make efforts and put it on snippet? — Mosia Thabo, Aug 19 '20 at 20:52

score 4 · Accepted Answer · edited Aug 21 '20 at 19:16

So, there are some issues with your implementations:

Using non-state variables to update the state in your useEffect:

Explanation: In displayConversionTo when you run the loop to push elements in convertToUnitsArray, and then set the state dialogStage to convertTo, you should be facing the issue that the updated values are not being rendered, as the change in state triggers a re-render and the convertToUnitsArray is reset to an empty array because of the line:

let convertToUnitsArray = [];

thus when your useEffect runs that is supposed to update the dialogUnits to convertToUnitsArray, it should actually set the dialogueUnits to an empty array, thus in any case the updated units should not be visible on click of the initial units list.

useEffect(() => {
  if (dialogStage == "convertTo") {
    // as your convertToUnitsArray is an empty array
    // your dialogue units should be set to an empty array.
    setDialogUnits(convertToUnitsArray)
  }
}, [dalogStage]);

You are trying to store an array of react components in the state which is not advisable: http://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Also, refer https://stackoverflow.com/a/53976730/10844020

Solution: What you can do is try to save your data in a state, and then render the components using that state, I have created a code sandbox example how this should look for your application. I have also made some changes for this example to work correctly.

@yash-basal Apologies to you and other commenters that I haven't been able to engage with the answers and suggestions since asking due to unforeseen circumstances leaving me without the time. I'm happy to award the bounty to you for this after a quick run-through of your answer suggests you've really given this some thought in both answering and explaining clearly. I cannot properly run through it for another few days but promise to return and follow up as I would not want to let such a helpful answer go without better engagement from me. Much appreciated! — biscuitstack, Aug 21 '20 at 16:51
@yasg-basal Many thanks. The advice and specific pointers on where I went wrong and wasn't following best practices helped guide me in a direction that ended up with a working dialog with my original logic. Both states are updated, it re-renders correctly and I also now (thanks to the tip) don't store elements in the state but render elements when the data is needed. — biscuitstack, Sep 01 '20 at 16:37

score 0 · Answer 2 · answered Aug 21 '20 at 11:37

In your code , since you are passing units as props from parent, can you also pass the foundUnitsArray calculated from parent itself.

setDialogUnits(props.foundUnitsArray);

and remove the below operation,

units.unitsFound.forEach(element => {
    foundUnitsArray.push(<DialogGroupChoice homogName={element} pcbOnClick={handleUnitClick} />);
});

Call function only after multiple states have completed updating

Logic:

Problem:

Question

Component code:

2 Answers2