Obsolete state in useIonViewWillEnter

I have a problem with data coming from React Context being stale inside of useIonViewWillEnter hook.

Example quasi-code:

export function CustomerForm(): JSX.Element {
  /* STATE comes from Context provider */
  const {customers, set_customers} = useContext(AppContext);
  console.log('CustomerForm render', customers[0])

  useIonViewWillEnter(() => {
    const customerOne = customers[0]
    fn_that_programmatically_populates_form_fields(customerOne)
    console.log('useIonViewWillEnter', customers[0])
  });

  return (
    <form-that-uses-customer-data>
      {customers[0]}
      <button 
        onClick={(customerDataFromThisForm) => {
          // When User updates customer data in the form - new data is saved via set_customers to Context.
          const updatedCustomers = [...customers];
          customers[0] = customerDataFromThisForm;
          set_customers(customers)
        }
      >Save customer</button>
    </form-that-uses-customer-data>
  );
};

type Customer = {name: string}

I have two screens: CustomerForm and CustomerList.
My course of action:

• Enter CustomerForm; let’s say, initial customerOne name is Jane; console will log:
  CustomerForm render, {name: "Jane"}
useIonViewWillEnter, {name: "Jane"}
• Change the name to Kate and click Save customer
• Return to CustomerList
• Hit the first customer in the list
• CustomerForm will be shown; console will log:
  useIonViewWillEnter, {name: "Jane"}

What’s the prob with useIonViewWillEnter??

3 posts - 2 participants

Read full topic